@hero-design/rn 8.2.2 → 8.3.0

package/es/index.js

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, ScrollView, Modal, TextInput as TextInput$1, PanResponder, TouchableHighlight, InteractionManager, useWindowDimensions, Keyboard, SectionList, FlatList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
+import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, ScrollView, Modal, useWindowDimensions, FlatList, TextInput as TextInput$2, PanResponder, TouchableHighlight, InteractionManager, Keyboard, SectionList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
 import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -1797,6 +1797,43 @@ 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
+  };
+  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.xxxxxlarge
+  };
+  var fonts = {
+    heading: theme.fonts.playful.semiBold
+  };
+  var lineHeights = {
+    heading: theme.lineHeights.xxxlarge
+  };
+  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,
@@ -2667,6 +2704,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),
@@ -5701,7 +5739,7 @@ var StyledText$3 = index$a(Text$1)(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,
@@ -5712,7 +5750,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.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6191,10 +6229,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 = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -6230,21 +6268,45 @@ var Icon = function Icon(_ref) {
     intent = _ref$intent === void 0 ? 'text' : _ref$intent,
     testID = _ref.testID,
     _ref$spin = _ref.spin,
-    spin = _ref$spin === void 0 ? false : _ref$spin;
+    spin = _ref$spin === void 0 ? false : _ref$spin,
+    accessibilityLabel = _ref.accessibilityLabel,
+    accessibilityHint = _ref.accessibilityHint,
+    accessibilityRole = _ref.accessibilityRole,
+    accessibilityState = _ref.accessibilityState,
+    accessibilityValue = _ref.accessibilityValue,
+    accessibilityLiveRegion = _ref.accessibilityLiveRegion,
+    accessibilityElementsHidden = _ref.accessibilityElementsHidden,
+    accessible = _ref.accessible,
+    accessibilityIgnoresInvertColors = _ref.accessibilityIgnoresInvertColors,
+    accessibilityViewIsModal = _ref.accessibilityViewIsModal,
+    accessibilityActions = _ref.accessibilityActions;
   useDeprecation("".concat(icon, " icon is deprecated and will be removed in the next major release, please use ").concat(icon.replace('carat', 'caret'), " instead."), icon.startsWith('carat'));
-  return spin ? /*#__PURE__*/React.createElement(AnimatedIcon, {
+  var accessibilityProps = {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityRole: accessibilityRole,
+    accessibilityState: accessibilityState,
+    accessibilityValue: accessibilityValue,
+    accessibilityLiveRegion: accessibilityLiveRegion,
+    accessibilityElementsHidden: accessibilityElementsHidden,
+    accessible: accessible,
+    accessibilityIgnoresInvertColors: accessibilityIgnoresInvertColors,
+    accessibilityViewIsModal: accessibilityViewIsModal,
+    accessibilityActions: accessibilityActions
+  };
+  return spin ? /*#__PURE__*/React.createElement(AnimatedIcon, _extends$1({
     name: icon,
     themeIntent: intent,
     themeSize: size,
     style: style,
     testID: testID
-  }) : /*#__PURE__*/React.createElement(StyledHeroIcon, {
+  }, accessibilityProps)) : /*#__PURE__*/React.createElement(StyledHeroIcon, _extends$1({
     name: icon,
     themeIntent: intent,
     themeSize: size,
     style: style,
     testID: testID
-  });
+  }, accessibilityProps));
 };
 Icon.List = IconList;
 
@@ -6276,7 +6338,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,
@@ -6297,7 +6359,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.createElement(React.Fragment, {
       key: key
@@ -6679,7 +6741,7 @@ var StyledStatus = index$a(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,
@@ -6688,7 +6750,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.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -6721,7 +6783,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';
@@ -6736,7 +6798,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.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -6825,22 +6887,22 @@ var StyledBottomBarText = index$a(Typography.Text)(function (_ref3) {
 
 var isIOS = Platform.OS === 'ios';
 var isAndroid = Platform.OS === 'android';
-var pick = function pick(keys, props) {
+function pick(keys, obj) {
   return keys.filter(function (key) {
-    return key in props;
+    return key in obj;
   }).reduce(function (result, cur) {
-    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, props[cur]));
+    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, obj[cur]));
   }, {});
-};
-var omit = function omit(keys, props) {
-  var result = props;
+}
+function omit(keys, obj) {
+  var result = obj;
   keys.forEach(function (key) {
     delete result[key];
   });
   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;
@@ -6851,7 +6913,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 = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -6938,13 +7000,13 @@ var StyledDivider = index$a(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.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7074,7 +7136,7 @@ var StyledLoadingDot = index$a(View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$d = ["count", "size", "testID", "themeVariant"];
+var _excluded$e = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7106,7 +7168,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 = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -7502,11 +7564,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React.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 = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -7821,7 +7883,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];
@@ -7848,18 +7910,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$a(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.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10424,6 +10486,251 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
+var StyledCarouselPaginator = index$a(View)(function () {
+  return {
+    flexDirection: 'row',
+    alignItems: 'center'
+  };
+});
+var StyledCarouselPaginatorAnimatedView = index$a(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 = useWindowDimensions(),
+    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 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.createElement(StyledCarouselPaginatorAnimatedView, {
+      indicatorWidth: indicatorWidth,
+      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.createElement(Image$1, _extends$1({
+    testID: testID,
+    style: [{
+      width: imageSize,
+      height: imageSize,
+      borderRadius: rounded ? imageSize / 2 : 0
+    }, style]
+  }, imageNativeProps));
+};
+
+var StyledCarousel = index$a(View)(function (_ref) {
+  var themeSlideBackground = _ref.themeSlideBackground;
+  return {
+    zIndex: 99999,
+    position: 'absolute',
+    backgroundColor: themeSlideBackground,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0
+  };
+});
+var StyledCarouselView = index$a(View)(function () {
+  return {
+    justifyContent: 'space-between',
+    height: '100%'
+  };
+});
+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(Box)(function () {
+  return {
+    width: '100%'
+  };
+});
+
+var CarouselItem = function CarouselItem(_ref) {
+  var width = _ref.width,
+    image = _ref.image,
+    content = _ref.content,
+    heading = _ref.heading,
+    body = _ref.body,
+    minHeight = _ref.minHeight;
+  return /*#__PURE__*/React.createElement(Box, {
+    style: {
+      width: width
+    }
+  }, image && /*#__PURE__*/React.createElement(StyledCarouselImage, {
+    source: typeof image === 'string' ? {
+      uri: image
+    } : image
+  }), /*#__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));
+};
+
+var _excluded$9 = ["items", "onFinishPress", "onSkipPress", "onSlideChange", "finishButtonLabel", "skipButtonLabel", "footerHeight", "minContentHeight"];
+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,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$9);
+  var carouselRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentSlideIndex = _useState2[0],
+    setCurrentSlideIndex = _useState2[1];
+  var _useWindowDimensions = useWindowDimensions(),
+    width = _useWindowDimensions.width;
+  var scrollX = useRef(new Animated.Value(0)).current;
+  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 viewConfig = useRef({
+    viewAreaCoveragePercentThreshold: 50
+  }).current;
+  var isLastSlide = currentSlideIndex === items.length - 1;
+  return /*#__PURE__*/React.createElement(StyledCarousel, _extends$1({
+    themeSlideBackground: items[currentSlideIndex].background
+  }, nativeProps), /*#__PURE__*/React.createElement(StyledCarouselView, null, /*#__PURE__*/React.createElement(FlatList, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: false,
+    pagingEnabled: true,
+    bounces: false,
+    data: items,
+    onViewableItemsChanged: visibleSlideChanged,
+    viewabilityConfig: viewConfig,
+    scrollEventThrottle: 32,
+    ref: carouselRef,
+    onScroll: 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.createElement(CarouselItem, {
+        image: image,
+        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, {
+    numberOfSlides: items.length,
+    scrollX: scrollX
+  }))));
+};
+
 var StyledDataCard = index$a(View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -10442,12 +10749,12 @@ var Indicator = index$a(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.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -10465,11 +10772,11 @@ var StyledCard = index$a(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.createElement(StyledCard, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -10650,7 +10957,7 @@ var StyledHelperText = index$a(Typography.Text)(function (_ref10) {
     fontSize: theme.__hd__.textInput.fontSizes.error
   };
 });
-var StyledTextInput = index$a(TextInput$1)(function (_ref11) {
+var StyledTextInput = index$a(TextInput$2)(function (_ref11) {
   var theme = _ref11.theme;
   return {
     textAlignVertical: 'center',
@@ -10703,7 +11010,7 @@ var StyledErrorAndMaxLengthContainer = index$a(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,
@@ -10727,7 +11034,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) {
+var TextInput = function TextInput(_ref2, ref) {
   var _ref3;
   var label = _ref2.label,
     prefix = _ref2.prefix,
@@ -10749,7 +11056,7 @@ var TextInput = function TextInput(_ref2) {
     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;
@@ -10767,6 +11074,35 @@ var TextInput = function TextInput(_ref2) {
   });
   var shouldShowMaxLength = maxLength !== undefined;
   var theme = useTheme();
+  var innerTextInput = React.useRef();
+  React.useImperativeHandle(ref, function () {
+    return {
+      // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+      getNativeTextInputRef: function getNativeTextInputRef() {
+        return innerTextInput.current;
+      },
+      focus: function focus() {
+        var _innerTextInput$curre;
+        (_innerTextInput$curre = innerTextInput.current) === null || _innerTextInput$curre === void 0 ? void 0 : _innerTextInput$curre.focus();
+      },
+      clear: function clear() {
+        var _innerTextInput$curre2;
+        return (_innerTextInput$curre2 = innerTextInput.current) === null || _innerTextInput$curre2 === void 0 ? void 0 : _innerTextInput$curre2.clear();
+      },
+      setNativeProps: function setNativeProps(args) {
+        var _innerTextInput$curre3;
+        return (_innerTextInput$curre3 = innerTextInput.current) === null || _innerTextInput$curre3 === void 0 ? void 0 : _innerTextInput$curre3.setNativeProps(args);
+      },
+      isFocused: function isFocused() {
+        var _innerTextInput$curre4;
+        return ((_innerTextInput$curre4 = innerTextInput.current) === null || _innerTextInput$curre4 === void 0 ? void 0 : _innerTextInput$curre4.isFocused()) || false;
+      },
+      blur: function blur() {
+        var _innerTextInput$curre5;
+        return (_innerTextInput$curre5 = innerTextInput.current) === null || _innerTextInput$curre5 === void 0 ? void 0 : _innerTextInput$curre5.blur();
+      }
+    };
+  }, [innerTextInput]);
   var _useMemo = useMemo(function () {
       if (!textStyle) {
         return {};
@@ -10846,7 +11182,11 @@ var TextInput = function TextInput(_ref2) {
     testID: "input-label",
     fontSize: "medium",
     themeVariant: variant
-  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, nativeInputProps)), typeof actualSuffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+    ref: function ref(reference) {
+      innerTextInput.current = reference;
+    }
+  }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: actualSuffix,
@@ -10864,6 +11204,7 @@ var TextInput = function TextInput(_ref2) {
     fontSize: "small"
   }, displayText.length, "/", maxLength)), !!helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText)));
 };
+var TextInput$1 = /*#__PURE__*/React.forwardRef(TextInput);
 
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
@@ -10895,7 +11236,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -10963,7 +11304,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -11394,11 +11735,11 @@ var StyledFABText = index$a(Text$1)(function (_ref3) {
   };
 });
 
-var _excluded$6 = ["active"];
+var _excluded$5 = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$6);
+    iconProps = _objectWithoutProperties(_ref, _excluded$5);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.timing(rotateAnimation.current, {
@@ -11645,27 +11986,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.createElement(Image$1, _extends$1({
-    testID: testID,
-    style: [{
-      width: imageSize,
-      height: imageSize,
-      borderRadius: rounded ? imageSize / 2 : 0
-    }, style]
-  }, imageNativeProps));
-};
-
 var StyledListItemContainer$1 = index$a(TouchableOpacity)(function (_ref) {
   var theme = _ref.theme,
     _ref$themeSelected = _ref.themeSelected,
@@ -11917,7 +12237,7 @@ var StyledFilledMask = index$a(View)(function (_ref5) {
     backgroundColor: theme.__hd__.pinInput.colors[themeState]
   };
 });
-var StyledHiddenInput = index$a(TextInput$1)(function (_ref6) {
+var StyledHiddenInput = index$a(TextInput$2)(function (_ref6) {
   var themePinLength = _ref6.themePinLength,
     theme = _ref6.theme;
   var cellWidth = theme.__hd__.pinInput.sizes.cellWidth;
@@ -13029,7 +13349,7 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13077,7 +13397,7 @@ function MultiSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput, {
+  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput$1, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13205,7 +13525,7 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13237,7 +13557,7 @@ var SingleSelect = function SingleSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput, {
+  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput$1, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13978,7 +14298,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14046,7 +14366,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React.createElement(TextInput, {
+  }, /*#__PURE__*/React.createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14446,10 +14766,12 @@ var ToolbarItem = function ToolbarItem(_ref) {
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    style = _ref.style;
   return /*#__PURE__*/React.createElement(ToolbarItemWrapper, {
     onPress: onPress,
-    disabled: disabled
+    disabled: disabled,
+    style: style
   }, icon ? /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     size: label ? 'medium' : 'large',
@@ -14458,7 +14780,8 @@ var ToolbarItem = function ToolbarItem(_ref) {
   }) : null, label ? /*#__PURE__*/React.createElement(Typography.Text, {
     fontSize: icon ? 'small' : 'large',
     fontWeight: "semi-bold",
-    intent: disabled ? 'subdued' : intent
+    intent: disabled ? 'subdued' : intent,
+    maxFontSizeMultiplier: 2
   }, label) : null);
 };
 
@@ -14467,6 +14790,9 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
     align = _ref$align === void 0 ? 'right' : _ref$align,
     _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items;
+  // set maxWidth prevents overflow of items
+  // issue: https://github.com/Thinkei/hero-design/issues/1619
+  var maxWidth = items.length > 0 ? "".concat(100 / items.length, "%") : undefined;
   return /*#__PURE__*/React.createElement(ToolbarGroupWrapper, {
     align: align
   }, items.map(function (_ref2) {
@@ -14481,7 +14807,10 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
       icon: icon,
       intent: intent,
       onPress: onPress,
-      disabled: disabled
+      disabled: disabled,
+      style: {
+        maxWidth: maxWidth
+      }
     });
   }));
 };
@@ -30880,4 +31209,4 @@ var index = Object.assign(RichTextEditor$1, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };
+export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput$1 as TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };