@hero-design/rn 8.44.1 → 8.45.0

package/es/index.js

@@ -7800,27 +7800,300 @@ var Avatar = function Avatar(_ref) {
   }));
 };
 
+var isIOS = Platform.OS === 'ios';
+var isAndroid = Platform.OS === 'android';
+function pick(keys, obj) {
+  return keys.filter(function (key) {
+    return key in obj;
+  }).reduce(function (result, cur) {
+    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, obj[cur]));
+  }, {});
+}
+function omit(keys, obj) {
+  var result = obj;
+  keys.forEach(function (key) {
+    delete result[key];
+  });
+  return result;
+}
+
+var colors = {
+  backgroundColor: {
+    property: 'backgroundColor',
+    scale: 'colors'
+  },
+  bgColor: {
+    property: 'backgroundColor',
+    scale: 'colors'
+  },
+  borderColor: {
+    property: 'borderColor',
+    scale: 'colors'
+  },
+  borderTopColor: {
+    property: 'borderTopColor',
+    scale: 'colors'
+  },
+  borderBottomColor: {
+    property: 'borderBottomColor',
+    scale: 'colors'
+  },
+  borderStartColor: {
+    property: 'borderStartColor',
+    scale: 'colors'
+  },
+  borderEndColor: {
+    property: 'borderEndColor',
+    scale: 'colors'
+  },
+  borderLeftColor: {
+    property: 'borderLeftColor',
+    scale: 'colors'
+  },
+  borderRightColor: {
+    property: 'borderRightColor',
+    scale: 'colors'
+  }
+};
+var space = {
+  margin: {
+    property: 'margin',
+    scale: 'space'
+  },
+  marginBottom: {
+    property: 'marginBottom',
+    scale: 'space'
+  },
+  marginEnd: {
+    property: 'marginEnd',
+    scale: 'space'
+  },
+  marginHorizontal: {
+    property: 'marginHorizontal',
+    scale: 'space'
+  },
+  marginLeft: {
+    property: 'marginLeft',
+    scale: 'space'
+  },
+  marginRight: {
+    property: 'marginRight',
+    scale: 'space'
+  },
+  marginStart: {
+    property: 'marginStart',
+    scale: 'space'
+  },
+  marginTop: {
+    property: 'marginTop',
+    scale: 'space'
+  },
+  marginVertical: {
+    property: 'marginVertical',
+    scale: 'space'
+  },
+  padding: {
+    property: 'padding',
+    scale: 'space'
+  },
+  paddingBottom: {
+    property: 'paddingBottom',
+    scale: 'space'
+  },
+  paddingEnd: {
+    property: 'paddingEnd',
+    scale: 'space'
+  },
+  paddingHorizontal: {
+    property: 'paddingHorizontal',
+    scale: 'space'
+  },
+  paddingLeft: {
+    property: 'paddingLeft',
+    scale: 'space'
+  },
+  paddingRight: {
+    property: 'paddingRight',
+    scale: 'space'
+  },
+  paddingStart: {
+    property: 'paddingStart',
+    scale: 'space'
+  },
+  paddingTop: {
+    property: 'paddingTop',
+    scale: 'space'
+  },
+  paddingVertical: {
+    property: 'paddingVertical',
+    scale: 'space'
+  }
+};
+var radii = {
+  borderBottomEndRadius: {
+    property: 'borderBottomEndRadius',
+    scale: 'radii'
+  },
+  borderBottomLeftRadius: {
+    property: 'borderBottomLeftRadius',
+    scale: 'radii'
+  },
+  borderBottomRightRadius: {
+    property: 'borderBottomRightRadius',
+    scale: 'radii'
+  },
+  borderBottomStartRadius: {
+    property: 'borderBottomStartRadius',
+    scale: 'radii'
+  },
+  borderTopEndRadius: {
+    property: 'borderTopEndRadius',
+    scale: 'radii'
+  },
+  borderTopLeftRadius: {
+    property: 'borderTopLeftRadius',
+    scale: 'radii'
+  },
+  borderTopRightRadius: {
+    property: 'borderTopRightRadius',
+    scale: 'radii'
+  },
+  borderTopStartRadius: {
+    property: 'borderTopStartRadius',
+    scale: 'radii'
+  },
+  borderRadius: {
+    property: 'borderRadius',
+    scale: 'radii'
+  }
+};
+var borderWidths = {
+  borderWidth: {
+    property: 'borderWidth',
+    scale: 'borderWidths'
+  },
+  borderBottomWidth: {
+    property: 'borderBottomWidth',
+    scale: 'borderWidths'
+  },
+  borderTopWidth: {
+    property: 'borderTopWidth',
+    scale: 'borderWidths'
+  },
+  borderLeftWidth: {
+    property: 'borderLeftWidth',
+    scale: 'borderWidths'
+  },
+  borderRightWidth: {
+    property: 'borderRightWidth',
+    scale: '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$t = ["theme"];
+var getThemeValue = function getThemeValue(theme, key, props) {
+  var propConfig = config[key];
+  var propValue = props[key];
+  if (!propValue) return undefined;
+  var scale = propConfig.scale,
+    property = propConfig.property;
+  switch (scale) {
+    case 'colors':
+      return _defineProperty({}, property, theme.colors[propValue]);
+    case 'space':
+      return _defineProperty({}, property, theme.space[propValue]);
+    case 'radii':
+      return _defineProperty({}, property, theme.radii[propValue]);
+    case 'borderWidths':
+      return _defineProperty({}, property, theme.borderWidths[propValue]);
+  }
+};
+var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
+  var entries = Object.keys(props);
+  return entries.reduce(function (result, key) {
+    return _objectSpread2(_objectSpread2({}, result), getThemeValue(theme, key, props));
+  }, {});
+};
+var configKeys = Object.keys(config);
+var StyledBox = index$a(View)(function (_ref5) {
+  var theme = _ref5.theme,
+    otherProps = _objectWithoutProperties(_ref5, _excluded$t);
+  var styleProps = pick(configKeys, otherProps);
+  var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
+  return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
+});
+
+var _excluded$s = ["children", "style", "testID"];
+var Box = function Box(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    testID = _ref.testID,
+    otherProps = _objectWithoutProperties(_ref, _excluded$s);
+  return /*#__PURE__*/React.createElement(StyledBox, _extends$1({}, otherProps, {
+    style: style,
+    testID: testID
+  }), children);
+};
+
 var VISIBLE_RATIO = 0.7;
 var StyledWrapper$a = index$a(View)(function (_ref) {
   var theme = _ref.theme,
     themeSize = _ref.themeSize,
-    themeAvatarCount = _ref.themeAvatarCount;
+    themeAvatarCount = _ref.themeAvatarCount,
+    _ref$themeVariant = _ref.themeVariant,
+    themeVariant = _ref$themeVariant === void 0 ? 'horizontal' : _ref$themeVariant,
+    _ref$themeHasSurplus = _ref.themeHasSurplus,
+    themeHasSurplus = _ref$themeHasSurplus === void 0 ? false : _ref$themeHasSurplus;
   var avatarSize = theme.__hd__.avatar.sizes[themeSize];
+  var widthAndHeightByVariant = {
+    horizontal: {
+      width: avatarSize * (1 + VISIBLE_RATIO * (themeHasSurplus ? themeAvatarCount : themeAvatarCount - 1)),
+      height: avatarSize
+    },
+    vertical: {
+      width: avatarSize,
+      height: avatarSize * (1 + VISIBLE_RATIO * (themeHasSurplus ? themeAvatarCount : themeAvatarCount - 1))
+    }
+  };
   return {
-    flexDirection: 'row',
-    height: avatarSize,
-    width: avatarSize * (1 + VISIBLE_RATIO * (themeAvatarCount - 1))
+    flexDirection: themeVariant === 'horizontal' ? 'row' : 'column',
+    height: widthAndHeightByVariant[themeVariant].height,
+    width: widthAndHeightByVariant[themeVariant].width
   };
 });
 var StyledAvatar = index$a(Avatar)(function (_ref2) {
   var theme = _ref2.theme,
     themeIndex = _ref2.themeIndex,
     _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'small' : _ref2$size;
+    size = _ref2$size === void 0 ? 'small' : _ref2$size,
+    _ref2$themeVariant = _ref2.themeVariant,
+    themeVariant = _ref2$themeVariant === void 0 ? 'horizontal' : _ref2$themeVariant;
   var avatarSize = theme.__hd__.avatar.sizes[size];
+  var offset = avatarSize * VISIBLE_RATIO * themeIndex;
   return {
     position: 'absolute',
-    left: avatarSize * VISIBLE_RATIO * themeIndex
+    left: themeVariant === 'horizontal' ? offset : undefined,
+    top: themeVariant === 'vertical' ? offset : undefined
+  };
+});
+var StyledSurplusContainer = index$a(Box)(function (_ref3) {
+  var theme = _ref3.theme,
+    themeIndex = _ref3.themeIndex,
+    themeVariant = _ref3.themeVariant,
+    _ref3$themeSize = _ref3.themeSize,
+    themeSize = _ref3$themeSize === void 0 ? 'small' : _ref3$themeSize;
+  var avatarSize = theme.__hd__.avatar.sizes[themeSize];
+  var offset = avatarSize * VISIBLE_RATIO * themeIndex;
+  return {
+    position: 'absolute',
+    left: themeVariant === 'horizontal' ? offset : undefined,
+    top: themeVariant === 'vertical' ? offset : undefined,
+    borderRadius: theme.__hd__.avatar.radii.rounded,
+    width: theme.__hd__.avatar.sizes[themeSize],
+    height: theme.__hd__.avatar.sizes[themeSize],
+    overflow: 'hidden'
   };
 });
 
@@ -7847,35 +8120,86 @@ var useAvatarColors = function useAvatarColors() {
   return shuffledColors;
 };
 
-var AvatarStack = function AvatarStack(_ref) {
-  var children = _ref.children,
-    max = _ref.max,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'small' : _ref$size,
-    style = _ref.style,
-    testID = _ref.testID;
+var Surplus = function Surplus(_ref) {
+  var value = _ref.value,
+    renderSurplus = _ref.renderSurplus,
+    size = _ref.size,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'horizontal' : _ref$variant,
+    index = _ref.index,
+    backgroundColor = _ref.backgroundColor;
+  if (value > 0) {
+    if (renderSurplus) {
+      return /*#__PURE__*/React.createElement(StyledSurplusContainer, {
+        testID: "surplus-container",
+        themeSize: size,
+        themeVariant: variant,
+        themeIndex: index,
+        style: {
+          backgroundColor: backgroundColor
+        }
+      }, renderSurplus(value));
+    }
+    return /*#__PURE__*/React.createElement(StyledAvatar, {
+      testID: "surplus-container",
+      themeVariant: variant,
+      title: "+".concat(value),
+      size: size,
+      themeIndex: index,
+      style: {
+        backgroundColor: backgroundColor
+      }
+    });
+  }
+  return null;
+};
+var AvatarStack = function AvatarStack(_ref2) {
+  var children = _ref2.children,
+    max = _ref2.max,
+    _ref2$size = _ref2.size,
+    size = _ref2$size === void 0 ? 'small' : _ref2$size,
+    style = _ref2.style,
+    testID = _ref2.testID,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'horizontal' : _ref2$variant,
+    total = _ref2.total,
+    renderSurplus = _ref2.renderSurplus;
   var colors = useAvatarColors();
   var avatars = children.slice(0, max);
-  if (max !== undefined && children.length - max > 0) {
-    var remainingAvatar = /*#__PURE__*/React.createElement(Avatar, {
-      title: "+".concat(children.length - max),
-      size: size
-    });
-    avatars.push(remainingAvatar);
-  }
+  var remainingAvatar = function () {
+    var remain = 0;
+    // Remaining value will prioritize total prop if it exists
+    if (total && total > children.length) {
+      remain = total - avatars.length;
+    } else if (max && children.length > max) {
+      remain = children.length - max;
+    }
+    return remain;
+  }();
   return /*#__PURE__*/React.createElement(StyledWrapper$a, {
     themeSize: size,
     themeAvatarCount: avatars.length,
+    themeHasSurplus: remainingAvatar > 0,
     style: style,
-    testID: testID
+    testID: testID,
+    themeVariant: variant
   }, avatars.map(function (avt, index) {
-    return /*#__PURE__*/React.createElement(StyledAvatar, _extends$1({}, avt.props, {
+    return /*#__PURE__*/React.createElement(StyledAvatar, _extends$1({
+      themeVariant: variant
+    }, avt.props, {
       size: size,
       themeIndex: index,
       style: {
         backgroundColor: colors[index % colors.length]
       }
     }));
+  }), /*#__PURE__*/React.createElement(Surplus, {
+    value: remainingAvatar,
+    index: avatars.length,
+    size: size,
+    variant: variant,
+    renderSurplus: renderSurplus,
+    backgroundColor: colors[avatars.length % colors.length]
   }));
 };
 
@@ -7920,7 +8244,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$t = ["children", "visible", "intent", "style", "testID"];
+var _excluded$r = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -7929,7 +8253,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$t);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -7962,7 +8286,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$s = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$q = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -7977,7 +8301,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$s);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -8064,24 +8388,7 @@ var StyledBottomBarText = index$a(Typography.Caption)(function (_ref3) {
   };
 });
 
-var isIOS = Platform.OS === 'ios';
-var isAndroid = Platform.OS === 'android';
-function pick(keys, obj) {
-  return keys.filter(function (key) {
-    return key in obj;
-  }).reduce(function (result, cur) {
-    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, obj[cur]));
-  }, {});
-}
-function omit(keys, obj) {
-  var result = obj;
-  keys.forEach(function (key) {
-    delete result[key];
-  });
-  return result;
-}
-
-var _excluded$r = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$p = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -8092,7 +8399,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
   useDeprecation('BottomNavigation is deprecated and will be removed in the next major release. Please remove it.');
   var insets = useSafeAreaInsets();
   /**
@@ -8179,13 +8486,13 @@ var StyledDivider = index$a(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$q = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$o = ["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$q);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$o);
   return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -8309,7 +8616,7 @@ var StyledLoadingDot = index$a(View)(function (_ref) {
   }, themeStyling());
 });
 
-var _excluded$p = ["count", "size", "testID", "themeVariant"];
+var _excluded$n = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -8341,7 +8648,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$p);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$n);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -8783,11 +9090,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
 };
 
-var _excluded$o = ["scrollEventThrottle"];
+var _excluded$m = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$o);
+    props = _objectWithoutProperties(_ref, _excluded$m);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -8900,253 +9207,33 @@ var BottomSheet = function BottomSheet(_ref) {
   }, /*#__PURE__*/React.createElement(StyledKeyboardAvoidingView, _extends$1({
     behavior: Platform.OS === 'ios' ? 'padding' : 'height'
   }, keyboardAvoidingViewProps), /*#__PURE__*/React.createElement(StyledBackdrop$2, {
-    style: {
-      opacity: interpolateOpacity
-    },
-    onPress: onRequestClose
-  }), /*#__PURE__*/React.createElement(StyledBottomSheet, {
-    style: [style, {
-      transform: [{
-        scaleY: height > 0 ? 1 : 0
-      }, {
-        translateY: interpolateY
-      }]
-    }]
-  }, header !== undefined ? /*#__PURE__*/React.createElement(Header, {
-    content: header,
-    showDivider: internalShowDivider,
-    onRequestClose: onRequestClose,
-    showCloseButton: showCloseButton
-  }) : null, /*#__PURE__*/React.createElement(BottomSheetContext.Provider, {
-    value: BottomSheetContextValue
-  }, children), footer ? /*#__PURE__*/React.createElement(Footer$1, {
-    showDivider: showDivider
-  }, footer) : null))));
-};
-var BottomSheet$1 = Object.assign(BottomSheet, {
-  ScrollView: BottomSheetScrollView
-});
-
-var colors = {
-  backgroundColor: {
-    property: 'backgroundColor',
-    scale: 'colors'
-  },
-  bgColor: {
-    property: 'backgroundColor',
-    scale: 'colors'
-  },
-  borderColor: {
-    property: 'borderColor',
-    scale: 'colors'
-  },
-  borderTopColor: {
-    property: 'borderTopColor',
-    scale: 'colors'
-  },
-  borderBottomColor: {
-    property: 'borderBottomColor',
-    scale: 'colors'
-  },
-  borderStartColor: {
-    property: 'borderStartColor',
-    scale: 'colors'
-  },
-  borderEndColor: {
-    property: 'borderEndColor',
-    scale: 'colors'
-  },
-  borderLeftColor: {
-    property: 'borderLeftColor',
-    scale: 'colors'
-  },
-  borderRightColor: {
-    property: 'borderRightColor',
-    scale: 'colors'
-  }
-};
-var space = {
-  margin: {
-    property: 'margin',
-    scale: 'space'
-  },
-  marginBottom: {
-    property: 'marginBottom',
-    scale: 'space'
-  },
-  marginEnd: {
-    property: 'marginEnd',
-    scale: 'space'
-  },
-  marginHorizontal: {
-    property: 'marginHorizontal',
-    scale: 'space'
-  },
-  marginLeft: {
-    property: 'marginLeft',
-    scale: 'space'
-  },
-  marginRight: {
-    property: 'marginRight',
-    scale: 'space'
-  },
-  marginStart: {
-    property: 'marginStart',
-    scale: 'space'
-  },
-  marginTop: {
-    property: 'marginTop',
-    scale: 'space'
-  },
-  marginVertical: {
-    property: 'marginVertical',
-    scale: 'space'
-  },
-  padding: {
-    property: 'padding',
-    scale: 'space'
-  },
-  paddingBottom: {
-    property: 'paddingBottom',
-    scale: 'space'
-  },
-  paddingEnd: {
-    property: 'paddingEnd',
-    scale: 'space'
-  },
-  paddingHorizontal: {
-    property: 'paddingHorizontal',
-    scale: 'space'
-  },
-  paddingLeft: {
-    property: 'paddingLeft',
-    scale: 'space'
-  },
-  paddingRight: {
-    property: 'paddingRight',
-    scale: 'space'
-  },
-  paddingStart: {
-    property: 'paddingStart',
-    scale: 'space'
-  },
-  paddingTop: {
-    property: 'paddingTop',
-    scale: 'space'
-  },
-  paddingVertical: {
-    property: 'paddingVertical',
-    scale: 'space'
-  }
-};
-var radii = {
-  borderBottomEndRadius: {
-    property: 'borderBottomEndRadius',
-    scale: 'radii'
-  },
-  borderBottomLeftRadius: {
-    property: 'borderBottomLeftRadius',
-    scale: 'radii'
-  },
-  borderBottomRightRadius: {
-    property: 'borderBottomRightRadius',
-    scale: 'radii'
-  },
-  borderBottomStartRadius: {
-    property: 'borderBottomStartRadius',
-    scale: 'radii'
-  },
-  borderTopEndRadius: {
-    property: 'borderTopEndRadius',
-    scale: 'radii'
-  },
-  borderTopLeftRadius: {
-    property: 'borderTopLeftRadius',
-    scale: 'radii'
-  },
-  borderTopRightRadius: {
-    property: 'borderTopRightRadius',
-    scale: 'radii'
-  },
-  borderTopStartRadius: {
-    property: 'borderTopStartRadius',
-    scale: 'radii'
-  },
-  borderRadius: {
-    property: 'borderRadius',
-    scale: 'radii'
-  }
-};
-var borderWidths = {
-  borderWidth: {
-    property: 'borderWidth',
-    scale: 'borderWidths'
-  },
-  borderBottomWidth: {
-    property: 'borderBottomWidth',
-    scale: 'borderWidths'
-  },
-  borderTopWidth: {
-    property: 'borderTopWidth',
-    scale: 'borderWidths'
-  },
-  borderLeftWidth: {
-    property: 'borderLeftWidth',
-    scale: 'borderWidths'
-  },
-  borderRightWidth: {
-    property: 'borderRightWidth',
-    scale: '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$n = ["theme"];
-var getThemeValue = function getThemeValue(theme, key, props) {
-  var propConfig = config[key];
-  var propValue = props[key];
-  if (!propValue) return undefined;
-  var scale = propConfig.scale,
-    property = propConfig.property;
-  switch (scale) {
-    case 'colors':
-      return _defineProperty({}, property, theme.colors[propValue]);
-    case 'space':
-      return _defineProperty({}, property, theme.space[propValue]);
-    case 'radii':
-      return _defineProperty({}, property, theme.radii[propValue]);
-    case 'borderWidths':
-      return _defineProperty({}, property, theme.borderWidths[propValue]);
-  }
-};
-var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
-  var entries = Object.keys(props);
-  return entries.reduce(function (result, key) {
-    return _objectSpread2(_objectSpread2({}, result), getThemeValue(theme, key, props));
-  }, {});
+    style: {
+      opacity: interpolateOpacity
+    },
+    onPress: onRequestClose
+  }), /*#__PURE__*/React.createElement(StyledBottomSheet, {
+    style: [style, {
+      transform: [{
+        scaleY: height > 0 ? 1 : 0
+      }, {
+        translateY: interpolateY
+      }]
+    }]
+  }, header !== undefined ? /*#__PURE__*/React.createElement(Header, {
+    content: header,
+    showDivider: internalShowDivider,
+    onRequestClose: onRequestClose,
+    showCloseButton: showCloseButton
+  }) : null, /*#__PURE__*/React.createElement(BottomSheetContext.Provider, {
+    value: BottomSheetContextValue
+  }, children), footer ? /*#__PURE__*/React.createElement(Footer$1, {
+    showDivider: showDivider
+  }, footer) : null))));
 };
-var configKeys = Object.keys(config);
-var StyledBox = index$a(View)(function (_ref5) {
-  var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$n);
-  var styleProps = pick(configKeys, otherProps);
-  var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
-  return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
+var BottomSheet$1 = Object.assign(BottomSheet, {
+  ScrollView: BottomSheetScrollView
 });
 
-var _excluded$m = ["children", "style", "testID"];
-var Box = function Box(_ref) {
-  var children = _ref.children,
-    style = _ref.style,
-    testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$m);
-  return /*#__PURE__*/React.createElement(StyledBox, _extends$1({}, otherProps, {
-    style: style,
-    testID: testID
-  }), children);
-};
-
 function requiredArgs(required, args) {
   if (args.length < required) {
     throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present');
@@ -11726,243 +11813,58 @@ var Calendar = function Calendar(_ref) {
   })), /*#__PURE__*/React.createElement(StyledCalendarRow, null, daysOfPreviousMonth.map(function (date) {
     return date ? /*#__PURE__*/React.createElement(CalendarRowItem, {
       key: date.toDateString(),
-      date: date,
-      isCurrent: isEqDate(now, date),
-      isSelected: isEqDate(value, date),
-      onPress: function onPress() {
-        return onChange === null || onChange === void 0 ? void 0 : onChange(date);
-      },
-      textIntent: "subdued",
-      marked: parsedMaskedDate[date.toDateString()]
-    }) : /*#__PURE__*/React.createElement(StyledDisabledCalendarRowItem, {
-      testID: "calendar-disabled-cell"
-    });
-  }), daysOfCurrentMonth.map(function (date) {
-    return date ? /*#__PURE__*/React.createElement(CalendarRowItem, {
-      key: date.toDateString(),
-      date: date,
-      isCurrent: isEqDate(now, date),
-      isSelected: isEqDate(value, date),
-      onPress: function onPress() {
-        return onChange === null || onChange === void 0 ? void 0 : onChange(date);
-      },
-      marked: parsedMaskedDate[date.toDateString()]
-    }) : /*#__PURE__*/React.createElement(StyledDisabledCalendarRowItem, {
-      testID: "calendar-disabled-cell"
-    });
-  }), daysOfNextMonth.map(function (date) {
-    return date ? /*#__PURE__*/React.createElement(CalendarRowItem, {
-      key: date.toDateString(),
-      date: date,
-      isCurrent: isEqDate(now, date),
-      isSelected: isEqDate(value, date),
-      onPress: function onPress() {
-        return onChange === null || onChange === void 0 ? void 0 : onChange(date);
-      },
-      textIntent: "subdued",
-      marked: parsedMaskedDate[date.toDateString()]
-    }) : /*#__PURE__*/React.createElement(StyledDisabledCalendarRowItem, {
-      testID: "calendar-disabled-cell"
-    });
-  })), Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React.createElement(MonthYearPickerDialogueAndroid, {
-    doneButtonLabel: monthPickerConfirmLabel,
-    cancelButtonLabel: monthPickerCancelLabel,
-    value: value,
-    minimumDate: minDate,
-    maximumDate: maxDate,
-    onChange: function onChange(action, date) {
-      setMonthPickerVisible(false);
-      onToggleMonthPicker === null || onToggleMonthPicker === void 0 || onToggleMonthPicker(false);
-      if (action === 'dateSetAction' && !!date) {
-        onMonthChange(date);
-      }
-    }
-  })));
-};
-
-var _excluded$l = ["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$l);
-  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 StyledPageControl$2 = index$a(View)(function () {
-  return {
-    flexDirection: 'row',
-    alignItems: 'center'
-  };
-});
-var StyledPageControlAnimatedView = index$a(Animated.View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    height: theme.__hd__.pageControl.sizes.paginatorHeight,
-    width: theme.__hd__.pageControl.sizes.paginatorWidth,
-    borderRadius: theme.__hd__.pageControl.radii.paginatorBorderRadius,
-    backgroundColor: theme.__hd__.pageControl.colors.paginatorBackgroundColor,
-    marginHorizontal: theme.__hd__.pageControl.space.paginatorMarginHorizontal
-  };
-});
-
-var PageControl = function PageControl(_ref) {
-  var numberOfPages = _ref.numberOfPages,
-    _ref$currentPage = _ref.currentPage,
-    currentPage = _ref$currentPage === void 0 ? 0 : _ref$currentPage,
-    testID = _ref.testID,
-    style = _ref.style;
-  var theme = useTheme();
-  var animatedValue = React.useRef(new Animated.Value(currentPage)).current;
-  React.useEffect(function () {
-    animatedValue.setValue(currentPage);
-  }, [currentPage]);
-  return /*#__PURE__*/React.createElement(StyledPageControl$2, {
-    testID: testID,
-    style: style
-  }, new Array(numberOfPages).fill('').map(function (_, index) {
-    var inputRange = [index - 1, index, index + 1];
-    var indicatorWidth = animatedValue.interpolate({
-      inputRange: inputRange,
-      outputRange: [theme.space.small, theme.space.large, theme.space.small],
-      extrapolate: 'clamp'
-    });
-    var opacity = animatedValue.interpolate({
-      inputRange: inputRange,
-      outputRange: [0.5, 1, 0.5],
-      extrapolate: 'clamp'
-    });
-    return /*#__PURE__*/React.createElement(StyledPageControlAnimatedView, {
-      accessibilityState: {
-        selected: index === currentPage
-      },
-      style: [{
-        width: indicatorWidth,
-        opacity: opacity
-      }],
-      key: index.toString(),
-      testID: "page-control-indicator".concat(index)
-    });
-  }));
-};
-
-var StyledBackDrop = index$a(View)(function (_ref) {
-  var themeSlideBackground = _ref.themeSlideBackground;
-  return {
-    position: 'absolute',
-    backgroundColor: themeSlideBackground,
-    top: 0,
-    bottom: 0,
-    right: 0,
-    left: 0
-  };
-});
-var StyledCarouselView = index$a(View)(function () {
-  return {
-    flexGrow: 2,
-    justifyContent: 'space-between'
-  };
-});
-var StyledCarouselHeading = index$a(Typography.Title)(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    marginTop: theme.__hd__.carousel.space.headingMarginTop,
-    marginBottom: theme.__hd__.carousel.space.headingMarginBottom
-  };
-});
-var StyledCarouselImage = index$a(Image)(function () {
-  return {
-    flexGrow: 2,
-    flex: 1,
-    width: '100%',
-    resizeMode: 'contain'
-  };
-});
-var StyledCustomSizeCarouselImage = index$a(Image)(function (_ref3) {
-  var height = _ref3.height,
-    _ref3$resizeMode = _ref3.resizeMode,
-    resizeMode = _ref3$resizeMode === void 0 ? 'contain' : _ref3$resizeMode,
-    width = _ref3.width;
-  return {
-    alignSelf: 'center',
-    width: width,
-    height: height,
-    resizeMode: resizeMode
-  };
-});
-var StyledCarouselContentWrapper = index$a(Box)(function (_ref4) {
-  var width = _ref4.width;
-  return {
-    width: width
-  };
-});
-var StyledCarouselFooterWrapper = index$a(View)(function (_ref5) {
-  var theme = _ref5.theme;
-  return {
-    paddingHorizontal: theme.__hd__.carousel.space.footerPaddingHorizontal,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: theme.__hd__.carousel.space.footerPaddingVertical,
-    marginBottom: theme.__hd__.carousel.space.footerMarginBottom
-  };
-});
-var StyledPageControl$1 = index$a(PageControl)(function (_ref6) {
-  var theme = _ref6.theme;
-  return {
-    paddingVertical: theme.__hd__.carousel.space.pageControlPaddingVertical
-  };
-});
-var StyledPageControlWrapper = index$a(View)(function (_ref7) {
-  var theme = _ref7.theme;
-  return {
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: theme.__hd__.carousel.space.pageControlWrapperHeight
-  };
-});
-
-function isCarouselImageProps(image) {
-  return _typeof(image) === 'object';
-}
-var CarouselItem = function CarouselItem(_ref) {
-  var width = _ref.width,
-    image = _ref.image,
-    content = _ref.content,
-    heading = _ref.heading,
-    body = _ref.body;
-  return /*#__PURE__*/React.createElement(Box, {
-    style: {
-      width: width
+      date: date,
+      isCurrent: isEqDate(now, date),
+      isSelected: isEqDate(value, date),
+      onPress: function onPress() {
+        return onChange === null || onChange === void 0 ? void 0 : onChange(date);
+      },
+      textIntent: "subdued",
+      marked: parsedMaskedDate[date.toDateString()]
+    }) : /*#__PURE__*/React.createElement(StyledDisabledCalendarRowItem, {
+      testID: "calendar-disabled-cell"
+    });
+  }), daysOfCurrentMonth.map(function (date) {
+    return date ? /*#__PURE__*/React.createElement(CalendarRowItem, {
+      key: date.toDateString(),
+      date: date,
+      isCurrent: isEqDate(now, date),
+      isSelected: isEqDate(value, date),
+      onPress: function onPress() {
+        return onChange === null || onChange === void 0 ? void 0 : onChange(date);
+      },
+      marked: parsedMaskedDate[date.toDateString()]
+    }) : /*#__PURE__*/React.createElement(StyledDisabledCalendarRowItem, {
+      testID: "calendar-disabled-cell"
+    });
+  }), daysOfNextMonth.map(function (date) {
+    return date ? /*#__PURE__*/React.createElement(CalendarRowItem, {
+      key: date.toDateString(),
+      date: date,
+      isCurrent: isEqDate(now, date),
+      isSelected: isEqDate(value, date),
+      onPress: function onPress() {
+        return onChange === null || onChange === void 0 ? void 0 : onChange(date);
+      },
+      textIntent: "subdued",
+      marked: parsedMaskedDate[date.toDateString()]
+    }) : /*#__PURE__*/React.createElement(StyledDisabledCalendarRowItem, {
+      testID: "calendar-disabled-cell"
+    });
+  })), Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React.createElement(MonthYearPickerDialogueAndroid, {
+    doneButtonLabel: monthPickerConfirmLabel,
+    cancelButtonLabel: monthPickerCancelLabel,
+    value: value,
+    minimumDate: minDate,
+    maximumDate: maxDate,
+    onChange: function onChange(action, date) {
+      setMonthPickerVisible(false);
+      onToggleMonthPicker === null || onToggleMonthPicker === void 0 || onToggleMonthPicker(false);
+      if (action === 'dateSetAction' && !!date) {
+        onMonthChange(date);
+      }
     }
-  }, image && (isCarouselImageProps(image) ? /*#__PURE__*/React.createElement(StyledCustomSizeCarouselImage, {
-    source: image,
-    height: image.height,
-    width: image.width,
-    resizeMode: image.resizeMode
-  }) : /*#__PURE__*/React.createElement(StyledCarouselImage, {
-    source: typeof image === 'string' ? {
-      uri: image
-    } : image
-  })), /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
-    paddingHorizontal: "large",
-    marginTop: "large",
-    width: width
-  }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, {
-    level: "h1",
-    typeface: "playful"
-  }, heading), body ? /*#__PURE__*/React.createElement(Typography.Body, null, body) : null));
+  })));
 };
 
 var StyledDataCard = index$a(View)(function (_ref) {
@@ -11983,12 +11885,12 @@ var Indicator = index$a(View)(function (_ref2) {
   };
 });
 
-var _excluded$k = ["intent", "children"];
+var _excluded$l = ["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$k);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/React.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -12006,11 +11908,11 @@ var StyledCard$1 = index$a(View)(function (_ref) {
   });
 });
 
-var _excluded$j = ["intent", "children"];
+var _excluded$k = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -12019,7 +11921,64 @@ var Card$1 = Object.assign(Card, {
   Data: DataCard
 });
 
-var StyledPageControl = index$a(PageControl)(function (_ref) {
+var StyledPageControl$2 = index$a(View)(function () {
+  return {
+    flexDirection: 'row',
+    alignItems: 'center'
+  };
+});
+var StyledPageControlAnimatedView = index$a(Animated.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    height: theme.__hd__.pageControl.sizes.paginatorHeight,
+    width: theme.__hd__.pageControl.sizes.paginatorWidth,
+    borderRadius: theme.__hd__.pageControl.radii.paginatorBorderRadius,
+    backgroundColor: theme.__hd__.pageControl.colors.paginatorBackgroundColor,
+    marginHorizontal: theme.__hd__.pageControl.space.paginatorMarginHorizontal
+  };
+});
+
+var PageControl = function PageControl(_ref) {
+  var numberOfPages = _ref.numberOfPages,
+    _ref$currentPage = _ref.currentPage,
+    currentPage = _ref$currentPage === void 0 ? 0 : _ref$currentPage,
+    testID = _ref.testID,
+    style = _ref.style;
+  var theme = useTheme();
+  var animatedValue = React.useRef(new Animated.Value(currentPage)).current;
+  React.useEffect(function () {
+    animatedValue.setValue(currentPage);
+  }, [currentPage]);
+  return /*#__PURE__*/React.createElement(StyledPageControl$2, {
+    testID: testID,
+    style: style
+  }, new Array(numberOfPages).fill('').map(function (_, index) {
+    var inputRange = [index - 1, index, index + 1];
+    var indicatorWidth = animatedValue.interpolate({
+      inputRange: inputRange,
+      outputRange: [theme.space.small, theme.space.large, theme.space.small],
+      extrapolate: 'clamp'
+    });
+    var opacity = animatedValue.interpolate({
+      inputRange: inputRange,
+      outputRange: [0.5, 1, 0.5],
+      extrapolate: 'clamp'
+    });
+    return /*#__PURE__*/React.createElement(StyledPageControlAnimatedView, {
+      accessibilityState: {
+        selected: index === currentPage
+      },
+      style: [{
+        width: indicatorWidth,
+        opacity: opacity
+      }],
+      key: index.toString(),
+      testID: "page-control-indicator".concat(index)
+    });
+  }));
+};
+
+var StyledPageControl$1 = index$a(PageControl)(function (_ref) {
   var theme = _ref.theme;
   return {
     alignSelf: 'center',
@@ -12219,7 +12178,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     viewabilityConfig: {
       itemVisiblePercentThreshold: 80
     }
-  }), !hidePageControl && /*#__PURE__*/React.createElement(StyledPageControl, {
+  }), !hidePageControl && /*#__PURE__*/React.createElement(StyledPageControl$1, {
     testID: "pageControl",
     currentPage: currentIndex,
     numberOfPages: items.length
@@ -12227,6 +12186,134 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
+var _excluded$j = ["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$j);
+  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 StyledBackDrop = index$a(View)(function (_ref) {
+  var themeSlideBackground = _ref.themeSlideBackground;
+  return {
+    position: 'absolute',
+    backgroundColor: themeSlideBackground,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    left: 0
+  };
+});
+var StyledCarouselView = index$a(View)(function () {
+  return {
+    flexGrow: 2,
+    justifyContent: 'space-between'
+  };
+});
+var StyledCarouselHeading = index$a(Typography.Title)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    marginTop: theme.__hd__.carousel.space.headingMarginTop,
+    marginBottom: theme.__hd__.carousel.space.headingMarginBottom
+  };
+});
+var StyledCarouselImage = index$a(Image)(function () {
+  return {
+    flexGrow: 2,
+    flex: 1,
+    width: '100%',
+    resizeMode: 'contain'
+  };
+});
+var StyledCustomSizeCarouselImage = index$a(Image)(function (_ref3) {
+  var height = _ref3.height,
+    _ref3$resizeMode = _ref3.resizeMode,
+    resizeMode = _ref3$resizeMode === void 0 ? 'contain' : _ref3$resizeMode,
+    width = _ref3.width;
+  return {
+    alignSelf: 'center',
+    width: width,
+    height: height,
+    resizeMode: resizeMode
+  };
+});
+var StyledCarouselContentWrapper = index$a(Box)(function (_ref4) {
+  var width = _ref4.width;
+  return {
+    width: width
+  };
+});
+var StyledCarouselFooterWrapper = index$a(View)(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    paddingHorizontal: theme.__hd__.carousel.space.footerPaddingHorizontal,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: theme.__hd__.carousel.space.footerPaddingVertical,
+    marginBottom: theme.__hd__.carousel.space.footerMarginBottom
+  };
+});
+var StyledPageControl = index$a(PageControl)(function (_ref6) {
+  var theme = _ref6.theme;
+  return {
+    paddingVertical: theme.__hd__.carousel.space.pageControlPaddingVertical
+  };
+});
+var StyledPageControlWrapper = index$a(View)(function (_ref7) {
+  var theme = _ref7.theme;
+  return {
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: theme.__hd__.carousel.space.pageControlWrapperHeight
+  };
+});
+
+function isCarouselImageProps(image) {
+  return _typeof(image) === 'object';
+}
+var CarouselItem = function CarouselItem(_ref) {
+  var width = _ref.width,
+    image = _ref.image,
+    content = _ref.content,
+    heading = _ref.heading,
+    body = _ref.body;
+  return /*#__PURE__*/React.createElement(Box, {
+    style: {
+      width: width
+    }
+  }, image && (isCarouselImageProps(image) ? /*#__PURE__*/React.createElement(StyledCustomSizeCarouselImage, {
+    source: image,
+    height: image.height,
+    width: image.width,
+    resizeMode: image.resizeMode
+  }) : /*#__PURE__*/React.createElement(StyledCarouselImage, {
+    source: typeof image === 'string' ? {
+      uri: image
+    } : image
+  })), /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
+    paddingHorizontal: "large",
+    marginTop: "large",
+    width: width
+  }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, {
+    level: "h1",
+    typeface: "playful"
+  }, heading), body ? /*#__PURE__*/React.createElement(Typography.Body, null, body) : null));
+};
+
 var _excluded$i = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
@@ -12242,6 +12329,7 @@ var noop = function noop(_) {
   return true;
 };
 var Carousel = function Carousel(_ref) {
+  var _items$currentSlideIn;
   var items = _ref.items,
     onItemIndexChange = _ref.onItemIndexChange,
     renderActions = _ref.renderActions,
@@ -12256,6 +12344,7 @@ var Carousel = function Carousel(_ref) {
     nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
+  var theme = useTheme();
   var carouselRef = useRef(null);
   var _useStateFromProp = useStateFromProp(selectedItemIndex),
     _useStateFromProp2 = _slicedToArray(_useStateFromProp, 2),
@@ -12287,20 +12376,20 @@ var Carousel = function Carousel(_ref) {
   var viewConfig = useRef({
     viewAreaCoveragePercentThreshold: 50
   }).current;
-  var onViewCallBack = React.useCallback(function (info) {
+  var onViewCallBack = useRef(function (info) {
     var firstVisibleItem = info.viewableItems.find(function (view) {
       return view.index != null && view.isViewable;
     });
     if (firstVisibleItem) {
       internalOnItemIndexChange(firstVisibleItem.index || 0);
     }
-  }, [internalOnItemIndexChange]);
+  });
   return /*#__PURE__*/React.createElement(View, _extends$1({
     style: style,
     testID: testID
   }, nativeProps), /*#__PURE__*/React.createElement(StyledBackDrop, {
-    themeSlideBackground: items[currentSlideIndex].background
-  }), /*#__PURE__*/React.createElement(StyledPageControlWrapper, null, pageControlPosition === 'top' && shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React.createElement(StyledPageControl$1, {
+    themeSlideBackground: ((_items$currentSlideIn = items[currentSlideIndex]) === null || _items$currentSlideIn === void 0 ? void 0 : _items$currentSlideIn.background) || theme.colors.defaultGlobalSurface
+  }), /*#__PURE__*/React.createElement(StyledPageControlWrapper, null, pageControlPosition === 'top' && shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React.createElement(StyledPageControl, {
     numberOfPages: items.length,
     currentPage: currentSlideIndex
   })), /*#__PURE__*/React.createElement(StyledCarouselView, null, /*#__PURE__*/React.createElement(FlatList, {
@@ -12310,7 +12399,7 @@ var Carousel = function Carousel(_ref) {
     pagingEnabled: true,
     bounces: false,
     data: items,
-    onViewableItemsChanged: onViewCallBack,
+    onViewableItemsChanged: onViewCallBack.current,
     viewabilityConfig: viewConfig,
     scrollEventThrottle: 32,
     ref: carouselRef,
@@ -12338,7 +12427,7 @@ var Carousel = function Carousel(_ref) {
         width: width
       });
     }
-  }), /*#__PURE__*/React.createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), pageControlPosition === 'bottom' && shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React.createElement(StyledPageControl$1, {
+  }), /*#__PURE__*/React.createElement(StyledCarouselFooterWrapper, null, renderActions && renderActions(currentSlideIndex), pageControlPosition === 'bottom' && shouldShowPagination(currentSlideIndex) && /*#__PURE__*/React.createElement(StyledPageControl, {
     numberOfPages: items.length,
     currentPage: currentSlideIndex
   }))));