@hero-design/rn 8.2.3 → 8.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,9 +1,9 @@
1
- @hero-design/rn:build: cache hit, replaying output e72791422bc29fc3
1
+ @hero-design/rn:build: cache hit, replaying output eb885563f0cea779
2
2
  @hero-design/rn:build: $ yarn build:js && yarn build:types
3
3
  @hero-design/rn:build: $ rollup -c
4
4
  @hero-design/rn:build: 
5
5
  @hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
6
6
  @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`.
7
7
  @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
8
- @hero-design/rn:build: created lib/index.js, es/index.js in 32.4s
8
+ @hero-design/rn:build: created lib/index.js, es/index.js in 25.7s
9
9
  @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
package/es/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as reactNative from 'react-native';
2
- 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$2, PanResponder, TouchableHighlight, InteractionManager, useWindowDimensions, Keyboard, SectionList, FlatList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
2
+ 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';
3
3
  import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
4
4
  import { createIconSet } from 'react-native-vector-icons';
5
5
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -1797,6 +1797,43 @@ var getCardTheme = function getCardTheme(theme) {
1797
1797
  };
1798
1798
  };
1799
1799
 
1800
+ var getCarouselTheme = function getCarouselTheme(theme) {
1801
+ var colors = {
1802
+ paginatorBackgroundColor: theme.colors.primary
1803
+ };
1804
+ var space = {
1805
+ headingMarginTop: theme.space.small,
1806
+ headingMarginBottom: theme.space.medium,
1807
+ paginatorMarginHorizontal: theme.space.small
1808
+ };
1809
+ var sizes = {
1810
+ indicatorWidth: theme.sizes.medium,
1811
+ paginatorHeight: theme.sizes.small,
1812
+ paginatorWidth: theme.sizes.small
1813
+ };
1814
+ var radii = {
1815
+ paginatorBorderRadius: theme.radii.rounded
1816
+ };
1817
+ var fontSizes = {
1818
+ heading: theme.fontSizes.xxxxxlarge
1819
+ };
1820
+ var fonts = {
1821
+ heading: theme.fonts.playful.semiBold
1822
+ };
1823
+ var lineHeights = {
1824
+ heading: theme.lineHeights.xxxlarge
1825
+ };
1826
+ return {
1827
+ colors: colors,
1828
+ sizes: sizes,
1829
+ radii: radii,
1830
+ space: space,
1831
+ fonts: fonts,
1832
+ fontSizes: fontSizes,
1833
+ lineHeights: lineHeights
1834
+ };
1835
+ };
1836
+
1800
1837
  var getCheckboxTheme = function getCheckboxTheme(theme) {
1801
1838
  var colors = {
1802
1839
  "default": theme.colors.primaryOutline,
@@ -2667,6 +2704,7 @@ var getTheme$1 = function getTheme() {
2667
2704
  button: getButtonTheme(globalTheme),
2668
2705
  calendar: getCalendarTheme(globalTheme),
2669
2706
  card: getCardTheme(globalTheme),
2707
+ carousel: getCarouselTheme(globalTheme),
2670
2708
  checkbox: getCheckboxTheme(globalTheme),
2671
2709
  contentNavigator: getContentNavigatorTheme(globalTheme),
2672
2710
  datePicker: getDatePickerTheme(globalTheme),
@@ -5701,7 +5739,7 @@ var StyledText$3 = index$a(Text$1)(function (_ref) {
5701
5739
  });
5702
5740
  });
5703
5741
 
5704
- var _excluded$k = ["children", "fontSize", "fontWeight", "intent", "typeface"];
5742
+ var _excluded$l = ["children", "fontSize", "fontWeight", "intent", "typeface"];
5705
5743
  var Text = function Text(_ref) {
5706
5744
  var children = _ref.children,
5707
5745
  _ref$fontSize = _ref.fontSize,
@@ -5712,7 +5750,7 @@ var Text = function Text(_ref) {
5712
5750
  intent = _ref$intent === void 0 ? 'body' : _ref$intent,
5713
5751
  _ref$typeface = _ref.typeface,
5714
5752
  typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
5715
- nativeProps = _objectWithoutProperties(_ref, _excluded$k);
5753
+ nativeProps = _objectWithoutProperties(_ref, _excluded$l);
5716
5754
  return /*#__PURE__*/React.createElement(StyledText$3, _extends$1({}, nativeProps, {
5717
5755
  themeFontSize: fontSize,
5718
5756
  themeFontWeight: fontWeight,
@@ -6191,10 +6229,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
6191
6229
  };
6192
6230
  });
6193
6231
 
6194
- var _excluded$j = ["style"];
6232
+ var _excluded$k = ["style"];
6195
6233
  var AnimatedIcon = function AnimatedIcon(_ref) {
6196
6234
  var style = _ref.style,
6197
- otherProps = _objectWithoutProperties(_ref, _excluded$j);
6235
+ otherProps = _objectWithoutProperties(_ref, _excluded$k);
6198
6236
  var rotateAnimation = useRef(new Animated.Value(0));
6199
6237
  useEffect(function () {
6200
6238
  var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -6300,7 +6338,7 @@ var AccordionItem = function AccordionItem(_ref) {
6300
6338
  }, content));
6301
6339
  };
6302
6340
 
6303
- var _excluded$i = ["key"];
6341
+ var _excluded$j = ["key"];
6304
6342
  var Accordion = function Accordion(_ref) {
6305
6343
  var items = _ref.items,
6306
6344
  activeItemKey = _ref.activeItemKey,
@@ -6321,7 +6359,7 @@ var Accordion = function Accordion(_ref) {
6321
6359
  testID: testID
6322
6360
  }, items.map(function (_ref2, index) {
6323
6361
  var key = _ref2.key,
6324
- props = _objectWithoutProperties(_ref2, _excluded$i);
6362
+ props = _objectWithoutProperties(_ref2, _excluded$j);
6325
6363
  var open = _activeItemKey === key;
6326
6364
  return /*#__PURE__*/React.createElement(React.Fragment, {
6327
6365
  key: key
@@ -6703,7 +6741,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
6703
6741
  };
6704
6742
  });
6705
6743
 
6706
- var _excluded$h = ["children", "visible", "intent", "style", "testID"];
6744
+ var _excluded$i = ["children", "visible", "intent", "style", "testID"];
6707
6745
  var Status = function Status(_ref) {
6708
6746
  var children = _ref.children,
6709
6747
  _ref$visible = _ref.visible,
@@ -6712,7 +6750,7 @@ var Status = function Status(_ref) {
6712
6750
  intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
6713
6751
  style = _ref.style,
6714
6752
  testID = _ref.testID,
6715
- nativeProps = _objectWithoutProperties(_ref, _excluded$h);
6753
+ nativeProps = _objectWithoutProperties(_ref, _excluded$i);
6716
6754
  var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
6717
6755
  opacity = _React$useRef.current;
6718
6756
  var isFirstRendering = React.useRef(true);
@@ -6745,7 +6783,7 @@ var Status = function Status(_ref) {
6745
6783
  }));
6746
6784
  };
6747
6785
 
6748
- var _excluded$g = ["content", "visible", "max", "intent", "style", "testID"];
6786
+ var _excluded$h = ["content", "visible", "max", "intent", "style", "testID"];
6749
6787
  var DEFAULT_MAX_NUMBER = 99;
6750
6788
  var getPaddingState = function getPaddingState(content) {
6751
6789
  return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -6760,7 +6798,7 @@ var Badge = function Badge(_ref) {
6760
6798
  intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
6761
6799
  style = _ref.style,
6762
6800
  testID = _ref.testID,
6763
- nativeProps = _objectWithoutProperties(_ref, _excluded$g);
6801
+ nativeProps = _objectWithoutProperties(_ref, _excluded$h);
6764
6802
  var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
6765
6803
  opacity = _React$useRef.current;
6766
6804
  var isFirstRendering = React.useRef(true);
@@ -6864,7 +6902,7 @@ function omit(keys, obj) {
6864
6902
  return result;
6865
6903
  }
6866
6904
 
6867
- var _excluded$f = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
6905
+ var _excluded$g = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
6868
6906
  var getInactiveIcon = function getInactiveIcon(icon) {
6869
6907
  var inactiveIcon = "".concat(icon, "-outlined");
6870
6908
  return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -6875,7 +6913,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
6875
6913
  renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
6876
6914
  selectedTabKey = _ref.selectedTabKey,
6877
6915
  tabs = _ref.tabs,
6878
- nativeProps = _objectWithoutProperties(_ref, _excluded$f);
6916
+ nativeProps = _objectWithoutProperties(_ref, _excluded$g);
6879
6917
  var insets = useSafeAreaInsets();
6880
6918
  /**
6881
6919
  * List of loaded tabs, tabs will be loaded when navigated to.
@@ -6962,13 +7000,13 @@ var StyledDivider = index$a(View)(function (_ref) {
6962
7000
  }, horizontalMargin), verticalMargin);
6963
7001
  });
6964
7002
 
6965
- var _excluded$e = ["marginHorizontal", "marginVertical", "style", "testID"];
7003
+ var _excluded$f = ["marginHorizontal", "marginVertical", "style", "testID"];
6966
7004
  var Divider = function Divider(_ref) {
6967
7005
  var marginHorizontal = _ref.marginHorizontal,
6968
7006
  marginVertical = _ref.marginVertical,
6969
7007
  style = _ref.style,
6970
7008
  testID = _ref.testID,
6971
- nativeProps = _objectWithoutProperties(_ref, _excluded$e);
7009
+ nativeProps = _objectWithoutProperties(_ref, _excluded$f);
6972
7010
  return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({}, nativeProps, {
6973
7011
  themeMarginHorizontal: marginHorizontal,
6974
7012
  themeMarginVertical: marginVertical,
@@ -7098,7 +7136,7 @@ var StyledLoadingDot = index$a(View)(function (_ref2) {
7098
7136
  }, themeStyling());
7099
7137
  });
7100
7138
 
7101
- var _excluded$d = ["count", "size", "testID", "themeVariant"];
7139
+ var _excluded$e = ["count", "size", "testID", "themeVariant"];
7102
7140
  var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
7103
7141
  var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
7104
7142
  var renderDotComponent = function renderDotComponent(_ref) {
@@ -7130,7 +7168,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
7130
7168
  size = _ref2$size === void 0 ? 12 : _ref2$size,
7131
7169
  testID = _ref2.testID,
7132
7170
  themeVariant = _ref2.themeVariant,
7133
- nativeProps = _objectWithoutProperties(_ref2, _excluded$d);
7171
+ nativeProps = _objectWithoutProperties(_ref2, _excluded$e);
7134
7172
  var progressAnimation = useRef(new Animated.Value(0));
7135
7173
  useEffect(function () {
7136
7174
  var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -7526,11 +7564,11 @@ var Header = function Header(_ref) {
7526
7564
  })) : null), showDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
7527
7565
  };
7528
7566
 
7529
- var _excluded$c = ["scrollEventThrottle"];
7567
+ var _excluded$d = ["scrollEventThrottle"];
7530
7568
  var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
7531
7569
  var _ref$scrollEventThrot = _ref.scrollEventThrottle,
7532
7570
  scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
7533
- props = _objectWithoutProperties(_ref, _excluded$c);
7571
+ props = _objectWithoutProperties(_ref, _excluded$d);
7534
7572
  var _useContext = useContext(BottomSheetContext),
7535
7573
  setInternalShowDivider = _useContext.setInternalShowDivider;
7536
7574
  var onScrollBeginDrag = useCallback(function (e) {
@@ -7845,7 +7883,7 @@ var borderWidths = {
7845
7883
  var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
7846
7884
  var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
7847
7885
 
7848
- var _excluded$b = ["theme"];
7886
+ var _excluded$c = ["theme"];
7849
7887
  var getThemeValue = function getThemeValue(theme, key, props) {
7850
7888
  var propConfig = config[key];
7851
7889
  var propValue = props[key];
@@ -7872,18 +7910,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
7872
7910
  var configKeys = Object.keys(config);
7873
7911
  var StyledBox = index$a(View)(function (_ref5) {
7874
7912
  var theme = _ref5.theme,
7875
- otherProps = _objectWithoutProperties(_ref5, _excluded$b);
7913
+ otherProps = _objectWithoutProperties(_ref5, _excluded$c);
7876
7914
  var styleProps = pick(configKeys, otherProps);
7877
7915
  var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
7878
7916
  return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
7879
7917
  });
7880
7918
 
7881
- var _excluded$a = ["children", "style", "testID"];
7919
+ var _excluded$b = ["children", "style", "testID"];
7882
7920
  var Box = function Box(_ref) {
7883
7921
  var children = _ref.children,
7884
7922
  style = _ref.style,
7885
7923
  testID = _ref.testID,
7886
- otherProps = _objectWithoutProperties(_ref, _excluded$a);
7924
+ otherProps = _objectWithoutProperties(_ref, _excluded$b);
7887
7925
  return /*#__PURE__*/React.createElement(StyledBox, _extends$1({}, otherProps, {
7888
7926
  style: style,
7889
7927
  testID: testID
@@ -10448,6 +10486,251 @@ var Calendar = function Calendar(_ref) {
10448
10486
  })));
10449
10487
  };
10450
10488
 
10489
+ var StyledCarouselPaginator = index$a(View)(function () {
10490
+ return {
10491
+ flexDirection: 'row',
10492
+ alignItems: 'center'
10493
+ };
10494
+ });
10495
+ var StyledCarouselPaginatorAnimatedView = index$a(Animated.View)(function (_ref) {
10496
+ var theme = _ref.theme;
10497
+ return {
10498
+ height: theme.__hd__.carousel.sizes.paginatorHeight,
10499
+ width: theme.__hd__.carousel.sizes.paginatorWidth,
10500
+ borderRadius: theme.__hd__.carousel.radii.paginatorBorderRadius,
10501
+ backgroundColor: theme.__hd__.carousel.colors.paginatorBackgroundColor,
10502
+ marginHorizontal: theme.__hd__.carousel.space.paginatorMarginHorizontal
10503
+ };
10504
+ });
10505
+
10506
+ var CarouselPaginator = function CarouselPaginator(_ref) {
10507
+ var numberOfSlides = _ref.numberOfSlides,
10508
+ scrollX = _ref.scrollX;
10509
+ var _useWindowDimensions = useWindowDimensions(),
10510
+ width = _useWindowDimensions.width;
10511
+ var theme = useTheme();
10512
+ return /*#__PURE__*/React.createElement(StyledCarouselPaginator, null, new Array(numberOfSlides).fill('').map(function (_, index) {
10513
+ var inputRange = [(index - 1) * width, index * width, (index + 1) * width];
10514
+ var indicatorWidth = scrollX.interpolate({
10515
+ inputRange: inputRange,
10516
+ outputRange: [theme.space.small, theme.space.large, theme.space.small],
10517
+ extrapolate: 'clamp'
10518
+ });
10519
+ var opacity = scrollX.interpolate({
10520
+ inputRange: inputRange,
10521
+ outputRange: [0.5, 1, 0.5],
10522
+ extrapolate: 'clamp'
10523
+ });
10524
+ return /*#__PURE__*/React.createElement(StyledCarouselPaginatorAnimatedView, {
10525
+ indicatorWidth: indicatorWidth,
10526
+ style: [{
10527
+ width: indicatorWidth,
10528
+ opacity: opacity
10529
+ }],
10530
+ key: index.toString()
10531
+ });
10532
+ }));
10533
+ };
10534
+
10535
+ var _excluded$a = ["rounded", "size", "testID", "style"];
10536
+ var Image = function Image(_ref) {
10537
+ var _ref$rounded = _ref.rounded,
10538
+ rounded = _ref$rounded === void 0 ? false : _ref$rounded,
10539
+ _ref$size = _ref.size,
10540
+ size = _ref$size === void 0 ? '6xlarge' : _ref$size,
10541
+ testID = _ref.testID,
10542
+ style = _ref.style,
10543
+ imageNativeProps = _objectWithoutProperties(_ref, _excluded$a);
10544
+ var theme = useTheme();
10545
+ var imageSize = theme.__hd__.image.sizes[size];
10546
+ return /*#__PURE__*/React.createElement(Image$1, _extends$1({
10547
+ testID: testID,
10548
+ style: [{
10549
+ width: imageSize,
10550
+ height: imageSize,
10551
+ borderRadius: rounded ? imageSize / 2 : 0
10552
+ }, style]
10553
+ }, imageNativeProps));
10554
+ };
10555
+
10556
+ var StyledCarousel = index$a(View)(function (_ref) {
10557
+ var themeSlideBackground = _ref.themeSlideBackground;
10558
+ return {
10559
+ zIndex: 99999,
10560
+ position: 'absolute',
10561
+ backgroundColor: themeSlideBackground,
10562
+ top: 0,
10563
+ bottom: 0,
10564
+ right: 0,
10565
+ left: 0
10566
+ };
10567
+ });
10568
+ var StyledCarouselView = index$a(View)(function () {
10569
+ return {
10570
+ justifyContent: 'space-between',
10571
+ height: '100%'
10572
+ };
10573
+ });
10574
+ var StyledCarouselHeading = index$a(Typography.Text)(function (_ref2) {
10575
+ var theme = _ref2.theme;
10576
+ return {
10577
+ marginTop: theme.__hd__.carousel.space.headingMarginTop,
10578
+ marginBottom: theme.__hd__.carousel.space.headingMarginBottom,
10579
+ fontFamily: theme.__hd__.carousel.fonts.heading,
10580
+ fontSize: theme.__hd__.carousel.fontSizes.heading,
10581
+ lineHeight: theme.__hd__.carousel.lineHeights.heading
10582
+ };
10583
+ });
10584
+ var StyledCarouselImage = index$a(Image)(function () {
10585
+ return {
10586
+ flex: 1,
10587
+ width: '100%',
10588
+ resizeMode: 'contain'
10589
+ };
10590
+ });
10591
+ var StyledCarouselContentWrapper = index$a(Box)(function (_ref3) {
10592
+ var width = _ref3.width;
10593
+ return {
10594
+ width: width
10595
+ };
10596
+ });
10597
+ var StyledCarouselFooterWrapper = index$a(Box)(function () {
10598
+ return {
10599
+ width: '100%'
10600
+ };
10601
+ });
10602
+
10603
+ var CarouselItem = function CarouselItem(_ref) {
10604
+ var width = _ref.width,
10605
+ image = _ref.image,
10606
+ content = _ref.content,
10607
+ heading = _ref.heading,
10608
+ body = _ref.body,
10609
+ minHeight = _ref.minHeight;
10610
+ return /*#__PURE__*/React.createElement(Box, {
10611
+ style: {
10612
+ width: width
10613
+ }
10614
+ }, image && /*#__PURE__*/React.createElement(StyledCarouselImage, {
10615
+ source: typeof image === 'string' ? {
10616
+ uri: image
10617
+ } : image
10618
+ }), /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
10619
+ paddingHorizontal: "large",
10620
+ marginTop: "large",
10621
+ width: width,
10622
+ style: {
10623
+ minHeight: minHeight
10624
+ }
10625
+ }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, null, heading), body ? /*#__PURE__*/React.createElement(Typography.Text, {
10626
+ fontSize: "large"
10627
+ }, body) : null));
10628
+ };
10629
+
10630
+ var _excluded$9 = ["items", "onFinishPress", "onSkipPress", "onSlideChange", "finishButtonLabel", "skipButtonLabel", "footerHeight", "minContentHeight"];
10631
+ var Carousel = function Carousel(_ref) {
10632
+ var items = _ref.items,
10633
+ onFinishPress = _ref.onFinishPress,
10634
+ onSkipPress = _ref.onSkipPress,
10635
+ onSlideChange = _ref.onSlideChange,
10636
+ _ref$finishButtonLabe = _ref.finishButtonLabel,
10637
+ finishButtonLabel = _ref$finishButtonLabe === void 0 ? "Let's go!" : _ref$finishButtonLabe,
10638
+ _ref$skipButtonLabel = _ref.skipButtonLabel,
10639
+ skipButtonLabel = _ref$skipButtonLabel === void 0 ? 'Skip' : _ref$skipButtonLabel,
10640
+ _ref$footerHeight = _ref.footerHeight,
10641
+ footerHeight = _ref$footerHeight === void 0 ? 70 : _ref$footerHeight,
10642
+ _ref$minContentHeight = _ref.minContentHeight,
10643
+ minContentHeight = _ref$minContentHeight === void 0 ? 250 : _ref$minContentHeight,
10644
+ nativeProps = _objectWithoutProperties(_ref, _excluded$9);
10645
+ var carouselRef = useRef(null);
10646
+ var _useState = useState(0),
10647
+ _useState2 = _slicedToArray(_useState, 2),
10648
+ currentSlideIndex = _useState2[0],
10649
+ setCurrentSlideIndex = _useState2[1];
10650
+ var _useWindowDimensions = useWindowDimensions(),
10651
+ width = _useWindowDimensions.width;
10652
+ var scrollX = useRef(new Animated.Value(0)).current;
10653
+ var visibleSlideChanged = useCallback(function (_ref2) {
10654
+ var viewableItems = _ref2.viewableItems;
10655
+ if (!viewableItems || viewableItems && !viewableItems.length) return;
10656
+ var currentIndex = viewableItems[0].index;
10657
+ setCurrentSlideIndex(viewableItems[0].index);
10658
+ var currentSlide = items[currentIndex];
10659
+ if (onSlideChange) {
10660
+ onSlideChange(currentSlide);
10661
+ }
10662
+ }, [items, onSlideChange]);
10663
+ var skipCarousel = useCallback(function () {
10664
+ var currentSlide = items[currentSlideIndex];
10665
+ if (onSkipPress) {
10666
+ onSkipPress(currentSlide);
10667
+ }
10668
+ }, [currentSlideIndex, onSkipPress, items]);
10669
+ var finishCarousel = useCallback(function () {
10670
+ var currentSlide = items[currentSlideIndex];
10671
+ if (onFinishPress) {
10672
+ onFinishPress(currentSlide);
10673
+ }
10674
+ }, [onFinishPress, items, currentSlideIndex]);
10675
+ var viewConfig = useRef({
10676
+ viewAreaCoveragePercentThreshold: 50
10677
+ }).current;
10678
+ var isLastSlide = currentSlideIndex === items.length - 1;
10679
+ return /*#__PURE__*/React.createElement(StyledCarousel, _extends$1({
10680
+ themeSlideBackground: items[currentSlideIndex].background
10681
+ }, nativeProps), /*#__PURE__*/React.createElement(StyledCarouselView, null, /*#__PURE__*/React.createElement(FlatList, {
10682
+ horizontal: true,
10683
+ showsHorizontalScrollIndicator: false,
10684
+ pagingEnabled: true,
10685
+ bounces: false,
10686
+ data: items,
10687
+ onViewableItemsChanged: visibleSlideChanged,
10688
+ viewabilityConfig: viewConfig,
10689
+ scrollEventThrottle: 32,
10690
+ ref: carouselRef,
10691
+ onScroll: Animated.event([{
10692
+ nativeEvent: {
10693
+ contentOffset: {
10694
+ x: scrollX
10695
+ }
10696
+ }
10697
+ }], {
10698
+ useNativeDriver: false
10699
+ }),
10700
+ renderItem: function renderItem(_ref3) {
10701
+ var item = _ref3.item;
10702
+ if (!item) return null;
10703
+ var image = item.image,
10704
+ heading = item.heading,
10705
+ body = item.body,
10706
+ content = item.content;
10707
+ return /*#__PURE__*/React.createElement(CarouselItem, {
10708
+ image: image,
10709
+ heading: heading,
10710
+ body: body,
10711
+ content: content,
10712
+ minHeight: minContentHeight,
10713
+ width: width
10714
+ });
10715
+ }
10716
+ }), /*#__PURE__*/React.createElement(StyledCarouselFooterWrapper, {
10717
+ paddingHorizontal: "large",
10718
+ flexDirection: "row",
10719
+ justifyContent: "space-between",
10720
+ style: {
10721
+ height: footerHeight
10722
+ }
10723
+ }, /*#__PURE__*/React.createElement(CompoundButton, {
10724
+ variant: isLastSlide ? 'filled' : 'text',
10725
+ intent: "primary",
10726
+ onPress: isLastSlide ? finishCarousel : skipCarousel,
10727
+ text: isLastSlide ? finishButtonLabel : skipButtonLabel
10728
+ }), /*#__PURE__*/React.createElement(CarouselPaginator, {
10729
+ numberOfSlides: items.length,
10730
+ scrollX: scrollX
10731
+ }))));
10732
+ };
10733
+
10451
10734
  var StyledDataCard = index$a(View)(function (_ref) {
10452
10735
  var theme = _ref.theme;
10453
10736
  return {
@@ -10466,12 +10749,12 @@ var Indicator = index$a(View)(function (_ref2) {
10466
10749
  };
10467
10750
  });
10468
10751
 
10469
- var _excluded$9 = ["intent", "children"];
10752
+ var _excluded$8 = ["intent", "children"];
10470
10753
  var DataCard = function DataCard(_ref) {
10471
10754
  var _ref$intent = _ref.intent,
10472
10755
  intent = _ref$intent === void 0 ? 'info' : _ref$intent,
10473
10756
  children = _ref.children,
10474
- nativeProps = _objectWithoutProperties(_ref, _excluded$9);
10757
+ nativeProps = _objectWithoutProperties(_ref, _excluded$8);
10475
10758
  return /*#__PURE__*/React.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
10476
10759
  themeIntent: intent,
10477
10760
  testID: "data-card-indicator"
@@ -10489,11 +10772,11 @@ var StyledCard = index$a(View)(function (_ref) {
10489
10772
  });
10490
10773
  });
10491
10774
 
10492
- var _excluded$8 = ["intent", "children"];
10775
+ var _excluded$7 = ["intent", "children"];
10493
10776
  var Card = function Card(_ref) {
10494
10777
  var intent = _ref.intent,
10495
10778
  children = _ref.children,
10496
- nativeProps = _objectWithoutProperties(_ref, _excluded$8);
10779
+ nativeProps = _objectWithoutProperties(_ref, _excluded$7);
10497
10780
  return /*#__PURE__*/React.createElement(StyledCard, _extends$1({}, nativeProps, {
10498
10781
  themeIntent: intent
10499
10782
  }), children);
@@ -10727,7 +11010,7 @@ var StyledErrorAndMaxLengthContainer = index$a(View)(function () {
10727
11010
  };
10728
11011
  });
10729
11012
 
10730
- var _excluded$7 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
11013
+ var _excluded$6 = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue"];
10731
11014
  var getVariant$1 = function getVariant(_ref) {
10732
11015
  var disabled = _ref.disabled,
10733
11016
  error = _ref.error,
@@ -10773,7 +11056,7 @@ var TextInput = function TextInput(_ref2, ref) {
10773
11056
  value = _ref2.value,
10774
11057
  defaultValue = _ref2.defaultValue,
10775
11058
  renderInputValue = _ref2.renderInputValue,
10776
- nativeProps = _objectWithoutProperties(_ref2, _excluded$7);
11059
+ nativeProps = _objectWithoutProperties(_ref2, _excluded$6);
10777
11060
  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
10778
11061
  var isEmptyValue = displayText.length === 0;
10779
11062
  var actualSuffix = loading ? 'loading' : suffix;
@@ -11452,11 +11735,11 @@ var StyledFABText = index$a(Text$1)(function (_ref3) {
11452
11735
  };
11453
11736
  });
11454
11737
 
11455
- var _excluded$6 = ["active"];
11738
+ var _excluded$5 = ["active"];
11456
11739
  var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
11457
11740
  var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
11458
11741
  var active = _ref.active,
11459
- iconProps = _objectWithoutProperties(_ref, _excluded$6);
11742
+ iconProps = _objectWithoutProperties(_ref, _excluded$5);
11460
11743
  var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
11461
11744
  useEffect(function () {
11462
11745
  var animation = Animated.timing(rotateAnimation.current, {
@@ -11703,27 +11986,6 @@ var index$6 = Object.assign(FAB, {
11703
11986
  ActionGroup: ActionGroup
11704
11987
  });
11705
11988
 
11706
- var _excluded$5 = ["rounded", "size", "testID", "style"];
11707
- var Image = function Image(_ref) {
11708
- var _ref$rounded = _ref.rounded,
11709
- rounded = _ref$rounded === void 0 ? false : _ref$rounded,
11710
- _ref$size = _ref.size,
11711
- size = _ref$size === void 0 ? '6xlarge' : _ref$size,
11712
- testID = _ref.testID,
11713
- style = _ref.style,
11714
- imageNativeProps = _objectWithoutProperties(_ref, _excluded$5);
11715
- var theme = useTheme();
11716
- var imageSize = theme.__hd__.image.sizes[size];
11717
- return /*#__PURE__*/React.createElement(Image$1, _extends$1({
11718
- testID: testID,
11719
- style: [{
11720
- width: imageSize,
11721
- height: imageSize,
11722
- borderRadius: rounded ? imageSize / 2 : 0
11723
- }, style]
11724
- }, imageNativeProps));
11725
- };
11726
-
11727
11989
  var StyledListItemContainer$1 = index$a(TouchableOpacity)(function (_ref) {
11728
11990
  var theme = _ref.theme,
11729
11991
  _ref$themeSelected = _ref.themeSelected,
@@ -30947,4 +31209,4 @@ var index = Object.assign(RichTextEditor$1, {
30947
31209
  Toolbar: EditorToolbar
30948
31210
  });
30949
31211
 
30950
- 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$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 };
31212
+ 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 };