@hero-design/rn 8.20.0 → 8.22.0-alpha.0

package/lib/index.js

@@ -944,13 +944,18 @@ var BASE_COLORS = {
   aliceBlue: '#ecf0ff',
   antiFlashWhite: '#f1f2f3',
   apple: '#e3602a',
+  bigStone: '#344348',
   blue1: '#5a68e2',
   blue: '#1dbeee',
+  blueOblivion: '#23438f',
+  blazingBonfire: '#ffa234',
   cornflowerBlue: '#5d80f0',
   currant: '#48000a',
   darkBlue: '#25006e',
   deepSaffron: '#ffa234',
+  deepIntoTheJungle: '#004e48',
   emerald: '#5ace7d',
+  flagstone: '#acacaf',
   frenchSky: '#8999ff',
   gold: '#ffd500',
   green: '#01b39c',
@@ -958,13 +963,17 @@ var BASE_COLORS = {
   grotesqueGreen: '#6af293',
   hitPink: '#ffad79',
   honeydew: '#f0fef4',
+  indianDance: '#f89076',
   jordyBlue: '#92abfc',
   linen: '#fcebe7',
   maasstrichtBlue: '#001f23',
   mauve: '#c38cee',
+  moussaka: '#6f2a17',
   mellowApricot: '#ffbe71',
+  mintLeaf: '#01cbb0',
   nightBlue: '#353957',
   pastelRed: '#f46363',
+  pastelBlue: '#a1b5fc',
   paua: '#130066',
   peach: '#f8ac7d',
   pineGreen: '#017d6d',
@@ -982,6 +991,8 @@ var BASE_COLORS = {
   violet1: '#8505a2',
   violet: '#7622d7',
   vodka: '#b5c3fd',
+  theatreGold: '#a56822',
+  uniformGreen: '#4d4628',
   yellow: '#fadb14'
 };
 var colorScales = Object.entries(BASE_COLORS).reduce(function (acc, _ref16) {
@@ -1152,13 +1163,19 @@ var palette$8 = {
 var aliceBlue = colorScales.aliceBlue,
   antiFlashWhite = colorScales.antiFlashWhite,
   apple$2 = colorScales.apple,
+  blazingBonfire = colorScales.blazingBonfire,
+  bigStone = colorScales.bigStone,
+  flagstone = colorScales.flagstone,
   deepSaffron$1 = colorScales.deepSaffron,
+  deepIntoTheJungle = colorScales.deepIntoTheJungle,
   emerald$1 = colorScales.emerald,
   grey$3 = colorScales.grey,
   honeydew$2 = colorScales.honeydew,
+  indianDance = colorScales.indianDance,
   linen$2 = colorScales.linen,
   maasstrichtBlue$2 = colorScales.maasstrichtBlue,
   mellowApricot = colorScales.mellowApricot,
+  moussaka = colorScales.moussaka,
   pastelRed$1 = colorScales.pastelRed,
   pineGreen$1 = colorScales.pineGreen,
   seashell$2 = colorScales.seashell,
@@ -1166,7 +1183,12 @@ var aliceBlue = colorScales.aliceBlue,
   sonicSilver$1 = colorScales.sonicSilver,
   ultramarineBlue$1 = colorScales.ultramarineBlue,
   vermilion$1 = colorScales.vermilion,
-  vodka = colorScales.vodka;
+  vodka = colorScales.vodka,
+  theatreGold = colorScales.theatreGold,
+  uniformGreen = colorScales.uniformGreen,
+  mintLeaf = colorScales.mintLeaf,
+  blueOblivion = colorScales.blueOblivion,
+  pastelBlue = colorScales.pastelBlue;
 var palette$7 = {
   black: '#000000',
   white: '#ffffff',
@@ -1191,17 +1213,29 @@ var palette$7 = {
   pastelRedLight20: pastelRed$1.lighten20,
   mellowApricot: mellowApricot.base,
   mellowApricotLight20: mellowApricot.lighten20,
+  moussaka: moussaka.base,
   emerald: emerald$1.base,
   emeraldLight20: emerald$1.lighten20,
   emeraldDark20: emerald$1.darken20,
   vodka: vodka.base,
   vodkaLight20: vodka.lighten20,
   vermilion: vermilion$1.base,
+  vermilionLight20: vermilion$1.lighten20,
+  vermilionDark10: vermilion$1.darken10,
   deepSaffron: deepSaffron$1.base,
   deepSaffronDark20: deepSaffron$1.darken20,
+  indianDance: indianDance.base,
+  theatreGold: theatreGold.base,
+  theatreGoldLight20: theatreGold.lighten20,
   pineGreen: pineGreen$1.base,
+  pineGreenLight20: pineGreen$1.lighten20,
+  pineGreenDark10: pineGreen$1.darken10,
   ultramarineBlue: ultramarineBlue$1.base,
+  ultramarineBlueLight20: ultramarineBlue$1.lighten20,
+  ultramarineBlueDark10: ultramarineBlue$1.darken10,
   sonicSilver: sonicSilver$1.base,
+  sonicSilverLight50: sonicSilver$1.lighten45,
+  sonicSilverDark10: sonicSilver$1.darken10,
   linen: linen$2.base,
   seashell: seashell$2.base,
   honeydew: honeydew$2.base,
@@ -1209,7 +1243,15 @@ var palette$7 = {
   antiFlashWhite: antiFlashWhite.base,
   apple: apple$2.base,
   silverChalice: silverChalice.base,
-  silverChaliceLight20: silverChalice.lighten20
+  silverChaliceLight20: silverChalice.lighten20,
+  uniformGreen: uniformGreen.base,
+  blazingBonfire: blazingBonfire.base,
+  deepIntoTheJungle: deepIntoTheJungle.base,
+  mintLeaf: mintLeaf.base,
+  blueOblivion: blueOblivion.base,
+  pastelBlue: pastelBlue.base,
+  bigStone: bigStone.base,
+  flagstone: flagstone.base
 };
 var currant$1 = colorScales.currant,
   sonicSilver = colorScales.sonicSilver,
@@ -1898,9 +1940,6 @@ var getButtonTheme = function getButtonTheme(theme) {
     utility: theme.fontSizes.large,
     textVariant: theme.fontSizes.large
   };
-  var lineHeight = {
-    "default": theme.lineHeights.large
-  };
   var borderWidth = {
     "default": theme.space.xxsmall
   };
@@ -1948,7 +1987,6 @@ var getButtonTheme = function getButtonTheme(theme) {
     sizes: sizes,
     radii: radii,
     colors: colors,
-    lineHeight: lineHeight,
     space: space
   };
 };
@@ -2015,7 +2053,9 @@ var getCarouselTheme = function getCarouselTheme(theme) {
     headingMarginBottom: theme.space.medium,
     footerPaddingHorizontal: theme.space.large,
     footerPaddingVertical: theme.space.medium,
-    footerMarginBottom: theme.space.large
+    footerMarginBottom: theme.space.large,
+    pageControlPaddingVertical: theme.space.small,
+    pageControlWrapperHeight: scale(48)
   };
   var fontSizes = {
     heading: theme.fontSizes['xxxxxlarge']
@@ -6075,7 +6115,7 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$r = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$s = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6088,7 +6128,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6610,10 +6650,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$q = ["style"];
+var _excluded$r = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$q);
+    otherProps = _objectWithoutProperties(_ref, _excluded$r);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -6719,7 +6759,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$p = ["key"];
+var _excluded$q = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6740,7 +6780,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$p);
+      props = _objectWithoutProperties(_ref2, _excluded$q);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: key
@@ -7137,7 +7177,7 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$o = ["children", "visible", "intent", "style", "testID"];
+var _excluded$p = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -7146,7 +7186,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$o);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   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);
@@ -7179,7 +7219,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$n = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$o = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -7194,7 +7234,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$o);
   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);
@@ -7298,7 +7338,7 @@ function omit(keys, obj) {
   return result;
 }
 
-var _excluded$m = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$n = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -7309,7 +7349,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -7396,13 +7436,13 @@ var StyledDivider = index$a(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$l = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$m = ["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$l);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7532,7 +7572,7 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$k = ["count", "size", "testID", "themeVariant"];
+var _excluded$l = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7564,7 +7604,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$k);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$l);
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -7649,8 +7689,7 @@ var genOutlineTextStyles = function genOutlineTextStyles(theme, intent, disabled
     };
   };
   return _objectSpread2({
-    fontSize: theme.__hd__.button.fontSize["default"],
-    lineHeight: theme.__hd__.button.lineHeight["default"]
+    fontSize: theme.__hd__.button.fontSize["default"]
   }, textColorStyling());
 };
 var genTextVariantTextStyles = function genTextVariantTextStyles(theme, intent, disabled) {
@@ -7665,8 +7704,7 @@ var genTextVariantTextStyles = function genTextVariantTextStyles(theme, intent,
     };
   };
   return _objectSpread2({
-    fontSize: theme.__hd__.button.fontSize.textVariant,
-    lineHeight: theme.__hd__.button.lineHeight["default"]
+    fontSize: theme.__hd__.button.fontSize.textVariant
   }, textColorStyling());
 };
 var StyledButtonContainer = index$a(reactNative.TouchableHighlight)(function (_ref) {
@@ -7714,7 +7752,6 @@ var StyledButtonText = index$a(Typography.Text)(function (_ref2) {
       case 'filled-danger':
         return {
           fontSize: theme.__hd__.button.fontSize["default"],
-          lineHeight: theme.__hd__.button.lineHeight["default"],
           color: theme.__hd__.button.colors.invertedText
         };
       case 'outlined-primary':
@@ -7874,9 +7911,9 @@ var Button = function Button(_ref) {
     testID: "".concat(testID, "-left-icon"),
     themeVariant: themeVariant
   })), /*#__PURE__*/React__default["default"].createElement(StyledButtonText, {
-    disabled: disabled,
     ellipsizeMode: "tail",
     numberOfLines: 1,
+    disabled: disabled,
     themeVariant: themeVariant
   }, text), rightIcon !== undefined && /*#__PURE__*/React__default["default"].createElement(StyledButtonIconWrapper, {
     themePosition: "right"
@@ -7970,13 +8007,13 @@ CompoundButton.Icon = IconButton;
 CompoundButton.Utility = UtilityButton;
 
 // eslint-disable-next-line @typescript-eslint/no-empty-function
-var noop = function noop() {};
+var noop$1 = function noop() {};
 
 var Header = function Header(_ref) {
   var content = _ref.content,
     showDivider = _ref.showDivider,
     _ref$onRequestClose = _ref.onRequestClose,
-    onRequestClose = _ref$onRequestClose === void 0 ? noop : _ref$onRequestClose,
+    onRequestClose = _ref$onRequestClose === void 0 ? noop$1 : _ref$onRequestClose,
     showCloseButton = _ref.showCloseButton;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledHeaderWrapper, null, typeof content === 'string' ? /*#__PURE__*/React__default["default"].createElement(StyledHeader, null, /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
     fontSize: "large",
@@ -7994,11 +8031,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
-var _excluded$j = ["scrollEventThrottle"];
+var _excluded$k = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$j);
+    props = _objectWithoutProperties(_ref, _excluded$k);
   var _useContext = React.useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = React.useCallback(function (e) {
@@ -8313,7 +8350,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$i = ["theme"];
+var _excluded$j = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8340,18 +8377,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$i);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$j);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$h = ["children", "style", "testID"];
+var _excluded$i = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$h);
+    otherProps = _objectWithoutProperties(_ref, _excluded$i);
   return /*#__PURE__*/React__default["default"].createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10821,15 +10858,16 @@ var Calendar = function Calendar(_ref) {
     visibleDate = _ref.visibleDate,
     onChange = _ref.onChange,
     _ref$onPreviousPress = _ref.onPreviousPress,
-    onPreviousPress = _ref$onPreviousPress === void 0 ? noop : _ref$onPreviousPress,
+    onPreviousPress = _ref$onPreviousPress === void 0 ? noop$1 : _ref$onPreviousPress,
     _ref$onNextPress = _ref.onNextPress,
-    onNextPress = _ref$onNextPress === void 0 ? noop : _ref$onNextPress,
+    onNextPress = _ref$onNextPress === void 0 ? noop$1 : _ref$onNextPress,
     _ref$onTitlePress = _ref.onTitlePress,
-    onTitlePress = _ref$onTitlePress === void 0 ? noop : _ref$onTitlePress,
+    onTitlePress = _ref$onTitlePress === void 0 ? noop$1 : _ref$onTitlePress,
     minDate = _ref.minDate,
     maxDate = _ref.maxDate,
     _ref$markedDates = _ref.markedDates,
-    markedDates = _ref$markedDates === void 0 ? [] : _ref$markedDates;
+    markedDates = _ref$markedDates === void 0 ? [] : _ref$markedDates,
+    testID = _ref.testID;
   var currentMonth = visibleDate.getMonth();
   var currentYear = visibleDate.getFullYear();
   var now = new Date();
@@ -10860,7 +10898,9 @@ var Calendar = function Calendar(_ref) {
   var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
     return date !== undefined;
   }) || maxDate <= lastDateOfMonth;
-  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$5, null, /*#__PURE__*/React__default["default"].createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default["default"].createElement(ContentNavigator, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledContainer$5, {
+    testID: testID
+  }, /*#__PURE__*/React__default["default"].createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default["default"].createElement(ContentNavigator, {
     value: formatTime('MMMM yyyy', visibleDate),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
@@ -10916,7 +10956,7 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
-var _excluded$g = ["rounded", "size", "testID", "style"];
+var _excluded$h = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -10924,7 +10964,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$h);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React__default["default"].createElement(reactNative.Image, _extends$1({
@@ -11020,6 +11060,7 @@ var StyledCarouselHeading = index$a(Typography.Text)(function (_ref2) {
 });
 var StyledCarouselImage = index$a(Image)(function () {
   return {
+    flexGrow: 2,
     flex: 1,
     width: '100%',
     resizeMode: 'contain'
@@ -11040,8 +11081,7 @@ var StyledCustomSizeCarouselImage = index$a(Image)(function (_ref3) {
 var StyledCarouselContentWrapper = index$a(Box)(function (_ref4) {
   var width = _ref4.width;
   return {
-    width: width,
-    minHeight: scale(250)
+    width: width
   };
 });
 var StyledCarouselFooterWrapper = index$a(reactNative.View)(function (_ref5) {
@@ -11054,8 +11094,19 @@ var StyledCarouselFooterWrapper = index$a(reactNative.View)(function (_ref5) {
     marginBottom: theme.__hd__.carousel.space.footerMarginBottom
   };
 });
-var StyledPageControl$1 = index$a(PageControl)({
-  marginStart: 'auto'
+var StyledPageControl$1 = index$a(PageControl)(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    paddingVertical: theme.__hd__.carousel.space.pageControlPaddingVertical
+  };
+});
+var StyledPageControlWrapper = index$a(reactNative.View)(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: theme.__hd__.carousel.space.pageControlWrapperHeight
+  };
 });
 
 function isCarouselImageProps(image) {
@@ -11117,12 +11168,12 @@ var Indicator = index$a(reactNative.View)(function (_ref2) {
   };
 });
 
-var _excluded$f = ["intent", "children"];
+var _excluded$g = ["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$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   return /*#__PURE__*/React__default["default"].createElement(StyledDataCard, nativeProps, /*#__PURE__*/React__default["default"].createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -11140,11 +11191,11 @@ var StyledCard$1 = index$a(reactNative.View)(function (_ref) {
   });
 });
 
-var _excluded$e = ["intent", "children"];
+var _excluded$f = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   return /*#__PURE__*/React__default["default"].createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -11332,7 +11383,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$d = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination"];
+var _excluded$e = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = React.useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11343,6 +11394,9 @@ function useStateFromProp(initialValue) {
   }, [initialValue]);
   return [value, setValue];
 }
+var noop = function noop(_) {
+  return true;
+};
 var Carousel = function Carousel(_ref) {
   var items = _ref.items,
     onItemIndexChange = _ref.onItemIndexChange,
@@ -11351,10 +11405,12 @@ var Carousel = function Carousel(_ref) {
     selectedItemIndex = _ref$selectedItemInde === void 0 ? 0 : _ref$selectedItemInde,
     style = _ref.style,
     _ref$shouldShowPagina = _ref.shouldShowPagination,
-    shouldShowPagination = _ref$shouldShowPagina === void 0 ? function () {
-      return true;
-    } : _ref$shouldShowPagina,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$d);
+    shouldShowPagination = _ref$shouldShowPagina === void 0 ? noop : _ref$shouldShowPagina,
+    _ref$pageControlPosit = _ref.pageControlPosition,
+    pageControlPosition = _ref$pageControlPosit === void 0 ? 'bottom' : _ref$pageControlPosit,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
+  useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
+  useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var carouselRef = React.useRef(null);
   var _useStateFromProp = useStateFromProp(selectedItemIndex),
     _useStateFromProp2 = _slicedToArray(_useStateFromProp, 2),
@@ -11396,7 +11452,10 @@ var Carousel = function Carousel(_ref) {
     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, {
+  }), /*#__PURE__*/React__default["default"].createElement(StyledPageControlWrapper, null, pageControlPosition === 'top' && shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React__default["default"].createElement(StyledPageControl$1, {
+    numberOfPages: items.length,
+    currentPage: currentSlideIndex
+  })), /*#__PURE__*/React__default["default"].createElement(StyledCarouselView, null, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
     horizontal: true,
     showsHorizontalScrollIndicator: false,
     pagingEnabled: true,
@@ -11430,7 +11489,7 @@ var Carousel = function Carousel(_ref) {
         width: width
       });
     }
-  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React__default["default"].createElement(StyledPageControl$1, {
+  }), /*#__PURE__*/React__default["default"].createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), pageControlPosition === 'bottom' && shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React__default["default"].createElement(StyledPageControl$1, {
     numberOfPages: items.length,
     currentPage: currentSlideIndex
   }))));
@@ -11666,7 +11725,7 @@ var StyledErrorAndMaxLengthContainer = index$a(reactNative.View)(function () {
   };
 });
 
-var _excluded$c = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling"];
+var _excluded$d = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling"];
 var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -11714,7 +11773,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     renderInputValue = _ref2.renderInputValue,
     _ref2$allowFontScalin = _ref2.allowFontScaling,
     allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$c);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$d);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -11947,6 +12006,110 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }) : null);
 };
 
+var InternalCalendar = function InternalCalendar(_ref) {
+  var minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
+    value = _ref.value,
+    _onChange = _ref.onChange;
+  var _useState = React.useState(value || new Date()),
+    _useState2 = _slicedToArray(_useState, 2),
+    visibleDate = _useState2[0],
+    setVisibleDate = _useState2[1];
+  var _useState3 = React.useState(value || new Date()),
+    _useState4 = _slicedToArray(_useState3, 2),
+    selectingDate = _useState4[0],
+    setSelectingDate = _useState4[1];
+  return /*#__PURE__*/React__default["default"].createElement(Calendar, {
+    testID: "calendar",
+    value: selectingDate,
+    visibleDate: visibleDate,
+    onChange: function onChange(date) {
+      setSelectingDate(date);
+      if (_onChange) {
+        _onChange(date);
+      }
+    },
+    onPreviousPress: function onPreviousPress() {
+      return setVisibleDate(new Date(visibleDate.getFullYear(), visibleDate.getMonth() - 1, 1));
+    },
+    onNextPress: function onNextPress() {
+      return setVisibleDate(new Date(visibleDate.getFullYear(), visibleDate.getMonth() + 1, 1));
+    },
+    minDate: minDate,
+    maxDate: maxDate
+  });
+};
+var DatePickerCalendar = function DatePickerCalendar(_ref2) {
+  var value = _ref2.value,
+    _ref2$minDate = _ref2.minDate,
+    minDate = _ref2$minDate === void 0 ? new Date('1900-01-01T00:00:00.000Z') : _ref2$minDate,
+    _ref2$maxDate = _ref2.maxDate,
+    maxDate = _ref2$maxDate === void 0 ? new Date('2100-01-01T00:00:00.000Z') : _ref2$maxDate,
+    label = _ref2.label,
+    placeholder = _ref2.placeholder,
+    onChange = _ref2.onChange,
+    confirmLabel = _ref2.confirmLabel,
+    _ref2$displayFormat = _ref2.displayFormat,
+    displayFormat = _ref2$displayFormat === void 0 ? 'dd/MM/yyyy' : _ref2$displayFormat,
+    _ref2$disabled = _ref2.disabled,
+    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
+    required = _ref2.required,
+    error = _ref2.error,
+    helpText = _ref2.helpText,
+    style = _ref2.style,
+    testID = _ref2.testID;
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    open = _useState6[0],
+    setOpen = _useState6[1];
+  var _useState7 = React.useState(value || new Date()),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectingDate = _useState8[0],
+    setSelectingDate = _useState8[1];
+  var displayValue = value ? formatTime(displayFormat, value) : '';
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
+    onPress: function onPress() {
+      return setOpen(true);
+    },
+    disabled: disabled
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+    pointerEvents: "none",
+    testID: "datePickerCalendar"
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+    label: label,
+    value: displayValue,
+    suffix: "calendar-dates-outlined",
+    placeholder: placeholder || displayFormat,
+    disabled: disabled,
+    error: error,
+    required: required,
+    helpText: helpText,
+    testID: testID,
+    style: style
+  })), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
+    open: open,
+    onRequestClose: function onRequestClose() {
+      return setOpen(false);
+    },
+    header: label,
+    footer: /*#__PURE__*/React__default["default"].createElement(CompoundButton, {
+      variant: "text",
+      text: confirmLabel,
+      onPress: function onPress() {
+        if (selectingDate) {
+          onChange(selectingDate);
+        }
+        setOpen(false);
+      }
+    })
+  }, /*#__PURE__*/React__default["default"].createElement(InternalCalendar, {
+    minDate: minDate,
+    maxDate: maxDate,
+    value: value,
+    onChange: setSelectingDate
+  })));
+};
+
 var StyledPickerWrapper$1 = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -12035,7 +12198,14 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }))));
 };
 
-var DatePicker = function DatePicker(props) {
+var _excluded$c = ["variant"];
+var DatePicker = function DatePicker(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  if (variant === 'calendar') {
+    return /*#__PURE__*/React__default["default"].createElement(DatePickerCalendar, props);
+  }
   if (reactNative.Platform.OS === 'ios') {
     return /*#__PURE__*/React__default["default"].createElement(DatePickerIOS, props);
   }
@@ -15596,7 +15766,9 @@ var Toast$1 = function Toast(_ref2) {
     autoDismiss = _ref2$autoDismiss === void 0 ? true : _ref2$autoDismiss,
     onAction = _ref2.onAction,
     actionLabel = _ref2.actionLabel,
-    onDismiss = _ref2.onDismiss;
+    onDismiss = _ref2.onDismiss,
+    _ref2$distance = _ref2.distance,
+    distance = _ref2$distance === void 0 ? 0 : _ref2$distance;
   var animatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
   var toastConfig = useToastConfig();
   React.useEffect(function () {
@@ -15624,7 +15796,7 @@ var Toast$1 = function Toast(_ref2) {
   });
   var interpolateY = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [toastConfig.position === 'top' ? -20 : 20, 0]
+    outputRange: toastConfig.position === 'top' ? [-20, distance] : [20, -distance]
   });
   return /*#__PURE__*/React__default["default"].createElement(Container, {
     themeVariant: variant,