@hero-design/rn 8.45.0-test.0 → 8.45.1

package/es/index.js

@@ -3333,8 +3333,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
   };
   var space = {
     containerPadding: theme.space.medium,
-    labelLeft: theme.space.medium,
-    labelTop: theme.lineHeights.small / -4,
+    labelLeft: theme.space.xlarge,
+    labelTop: theme.space.xlarge / 3,
     labelPaddingBottom: theme.space.small,
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
@@ -6761,7 +6761,7 @@ var Caption = function Caption(_ref) {
   }), children);
 };
 
-var StyledLabel$2 = index$a(Text$1)(function (_ref) {
+var StyledLabel$1 = index$a(Text$1)(function (_ref) {
   var themeIntent = _ref.themeIntent,
     theme = _ref.theme;
   return {
@@ -6780,7 +6780,7 @@ var Label = function Label(_ref) {
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$y);
-  return /*#__PURE__*/React.createElement(StyledLabel$2, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
   }), children);
@@ -7508,8 +7508,8 @@ var Accordion = function Accordion(_ref) {
     onItemPress = _ref.onItemPress,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    testID = _ref.testID,
-    style = _ref.style;
+    style = _ref.style,
+    testID = _ref.testID;
   var defaultValue = useMemo(function () {
     return typeof activeItemKey === 'number' ? NaN : '';
   }, [activeItemKey]);
@@ -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'
   };
 });
 
@@ -7846,36 +8119,87 @@ 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) {
@@ -8908,245 +9215,25 @@ var BottomSheet = function BottomSheet(_ref) {
     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));
-  }, {});
+      }, {
+        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');
@@ -11780,26 +11867,59 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
-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 StyledDataCard = index$a(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    borderRadius: theme.__hd__.card.radii["default"],
+    overflow: 'hidden',
+    flexDirection: 'row'
+  };
+});
+var Indicator = index$a(View)(function (_ref2) {
+  var theme = _ref2.theme,
+    themeIntent = _ref2.themeIntent;
+  return {
+    backgroundColor: theme.__hd__.card.colors[themeIntent],
+    width: theme.__hd__.card.sizes.indicatorWidth,
+    height: '100%'
+  };
+});
+
+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$l);
+  return /*#__PURE__*/React.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
+    themeIntent: intent,
+    testID: "data-card-indicator"
+  }), children);
+};
+
+var StyledCard$1 = index$a(View)(function (_ref) {
+  var theme = _ref.theme,
+    themeIntent = _ref.themeIntent;
+  return _objectSpread2(_objectSpread2({}, themeIntent !== undefined && {
+    backgroundColor: theme.__hd__.card.colors[themeIntent]
+  }), {}, {
+    borderRadius: theme.__hd__.card.radii["default"],
+    overflow: 'hidden'
+  });
+});
+
+var _excluded$k = ["intent", "children"];
+var Card = function Card(_ref) {
+  var intent = _ref.intent,
+    children = _ref.children,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
+  return /*#__PURE__*/React.createElement(StyledCard$1, _extends$1({}, nativeProps, {
+    themeIntent: intent
+  }), children);
 };
+var Card$1 = Object.assign(Card, {
+  Data: DataCard
+});
 
 var StyledPageControl$2 = index$a(View)(function () {
   return {
@@ -11854,172 +11974,11 @@ var PageControl = function PageControl(_ref) {
       }],
       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
-    }
-  }, 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) {
-  var theme = _ref.theme;
-  return {
-    borderRadius: theme.__hd__.card.radii["default"],
-    overflow: 'hidden',
-    flexDirection: 'row'
-  };
-});
-var Indicator = index$a(View)(function (_ref2) {
-  var theme = _ref2.theme,
-    themeIntent = _ref2.themeIntent;
-  return {
-    backgroundColor: theme.__hd__.card.colors[themeIntent],
-    width: theme.__hd__.card.sizes.indicatorWidth,
-    height: '100%'
-  };
-});
-
-var _excluded$k = ["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);
-  return /*#__PURE__*/React.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
-    themeIntent: intent,
-    testID: "data-card-indicator"
-  }), children);
-};
-
-var StyledCard$1 = index$a(View)(function (_ref) {
-  var theme = _ref.theme,
-    themeIntent = _ref.themeIntent;
-  return _objectSpread2(_objectSpread2({}, themeIntent !== undefined && {
-    backgroundColor: theme.__hd__.card.colors[themeIntent]
-  }), {}, {
-    borderRadius: theme.__hd__.card.radii["default"],
-    overflow: 'hidden'
-  });
-});
-
-var _excluded$j = ["intent", "children"];
-var Card = function Card(_ref) {
-  var intent = _ref.intent,
-    children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
-  return /*#__PURE__*/React.createElement(StyledCard$1, _extends$1({}, nativeProps, {
-    themeIntent: intent
-  }), children);
+    });
+  }));
 };
-var Card$1 = Object.assign(Card, {
-  Data: DataCard
-});
 
-var StyledPageControl = index$a(PageControl)(function (_ref) {
+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
   }))));
@@ -12429,7 +12518,7 @@ var StyledIconWrapper$3 = index$a(Box)(function (_ref2) {
     marginRight: theme.__hd__.chip.space.iconWrapperMarginRight
   };
 });
-var StyledLabel$1 = index$a(Typography.Body)(function (_ref3) {
+var StyledLabel = index$a(Typography.Body)(function (_ref3) {
   var themeSelected = _ref3.themeSelected,
     themeVariant = _ref3.themeVariant,
     theme = _ref3.theme;
@@ -12475,7 +12564,7 @@ var Chip = function Chip(_ref) {
     themeSelected: selected,
     themeVariant: variant,
     testID: "chip-icon-".concat(internalIcon)
-  })), /*#__PURE__*/React.createElement(StyledLabel$1, {
+  })), /*#__PURE__*/React.createElement(StyledLabel, {
     variant: "small",
     themeVariant: variant,
     themeSelected: selected
@@ -12581,45 +12670,23 @@ var StyledContainer$4 = index$a(View)(function (_ref) {
     marginTop: theme.__hd__.textInput.space.containerMarginTop
   };
 });
-var StyledLabelContainer = index$a(View)(function (_ref2) {
-  var theme = _ref2.theme;
+var StyledLabelContainerInsideTextInput = index$a(Animated.View)(function (_ref2) {
+  var themeVariant = _ref2.themeVariant,
+    theme = _ref2.theme;
   return {
-    position: 'absolute',
     flexDirection: 'row',
-    left: theme.__hd__.textInput.space.labelLeft,
-    top: theme.__hd__.textInput.space.labelTop,
-    backgroundColor: theme.__hd__.textInput.colors.labelBackground,
+    alignItems: themeVariant === 'text' ? 'center' : 'flex-start',
+    justifyContent: 'center',
+    position: 'absolute',
     zIndex: 1,
-    paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding
+    left: 0,
+    right: 0,
+    top: -theme.__hd__.textInput.space.labelTop
   };
 });
-var StyledLabel = index$a(Typography.Caption)(function (_ref3) {
+var StyledLabelInsideTextInput = index$a(Typography.Body)(function (_ref3) {
   var theme = _ref3.theme,
     themeState = _ref3.themeState;
-  return {
-    color: theme.__hd__.textInput.colors.labels[themeState],
-    lineHeight: theme.__hd__.textInput.lineHeights.topLabel
-  };
-});
-var StyledAsteriskLabel = index$a(Typography.Caption)(function (_ref4) {
-  var theme = _ref4.theme,
-    themeState = _ref4.themeState;
-  return {
-    color: theme.__hd__.textInput.colors.asterisks[themeState],
-    lineHeight: theme.__hd__.textInput.lineHeights.topLabel
-  };
-});
-var StyledLabelContainerInsideTextInput = index$a(View)(function (_ref5) {
-  var themeVariant = _ref5.themeVariant;
-  return _objectSpread2({
-    flexDirection: 'row',
-    zIndex: 9999,
-    alignItems: themeVariant === 'text' ? 'center' : 'flex-start'
-  }, StyleSheet$1.absoluteFillObject);
-});
-var StyledLabelInsideTextInput = index$a(Typography.Body)(function (_ref6) {
-  var theme = _ref6.theme,
-    themeState = _ref6.themeState;
   return {
     textAlignVertical: 'center',
     alignContent: 'center',
@@ -12628,15 +12695,15 @@ var StyledLabelInsideTextInput = index$a(Typography.Body)(function (_ref6) {
     marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop
   };
 });
-var StyledAsteriskLabelInsideTextInput = index$a(Typography.Body)(function (_ref7) {
-  var theme = _ref7.theme,
-    themeState = _ref7.themeState;
+var StyledAsteriskLabelInsideTextInput = index$a(Typography.Body)(function (_ref4) {
+  var theme = _ref4.theme,
+    themeState = _ref4.themeState;
   return {
     color: theme.__hd__.textInput.colors.asterisks[themeState]
   };
 });
-var StyledErrorContainer$2 = index$a(View)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledErrorContainer$2 = index$a(View)(function (_ref5) {
+  var theme = _ref5.theme;
   return {
     marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
     flexDirection: 'row',
@@ -12645,16 +12712,16 @@ var StyledErrorContainer$2 = index$a(View)(function (_ref8) {
     flexGrow: 4
   };
 });
-var StyledError = index$a(Typography.Caption)(function (_ref9) {
-  var theme = _ref9.theme;
+var StyledError = index$a(Typography.Caption)(function (_ref6) {
+  var theme = _ref6.theme;
   return {
     color: theme.__hd__.textInput.colors.error,
     marginLeft: theme.__hd__.textInput.space.errorMarginLeft
   };
 });
-var StyledMaxLengthMessage = index$a(Typography.Caption)(function (_ref10) {
-  var theme = _ref10.theme,
-    themeState = _ref10.themeState;
+var StyledMaxLengthMessage = index$a(Typography.Caption)(function (_ref7) {
+  var theme = _ref7.theme,
+    themeState = _ref7.themeState;
   return {
     color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
     marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
@@ -12665,9 +12732,9 @@ var StyledMaxLengthMessage = index$a(Typography.Caption)(function (_ref10) {
   };
 });
 var StyledHelperText = Typography.Caption;
-var StyledTextInput = index$a(TextInput$1)(function (_ref11) {
-  var theme = _ref11.theme,
-    themeVariant = _ref11.themeVariant;
+var StyledTextInput = index$a(TextInput$1)(function (_ref8) {
+  var theme = _ref8.theme,
+    themeVariant = _ref8.themeVariant;
   return {
     textAlignVertical: themeVariant === 'text' ? 'center' : 'top',
     fontSize: theme.__hd__.textInput.fontSizes.text,
@@ -12680,19 +12747,19 @@ var StyledTextInput = index$a(TextInput$1)(function (_ref11) {
     fontFamily: theme.__hd__.textInput.fonts.text
   };
 });
-var StyledBorderBackDrop = index$a(View)(function (_ref12) {
+var StyledBorderBackDrop = index$a(View)(function (_ref9) {
   var _theme$__hd__$textInp;
-  var theme = _ref12.theme,
-    themeFocused = _ref12.themeFocused,
-    themeState = _ref12.themeState;
+  var theme = _ref9.theme,
+    themeFocused = _ref9.themeFocused,
+    themeState = _ref9.themeState;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     borderWidth: themeFocused ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
     borderRadius: theme.__hd__.textInput.radii.container,
     borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeState]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
   });
 });
-var StyledTextInputContainer = index$a(View)(function (_ref13) {
-  var theme = _ref13.theme;
+var StyledTextInputContainer = index$a(View)(function (_ref10) {
+  var theme = _ref10.theme;
   return {
     flexDirection: 'row',
     alignItems: 'center',
@@ -12710,8 +12777,8 @@ var StyledTextInputAndLabelContainer = index$a(View)(function () {
     flexShrink: 1
   };
 });
-var StyledErrorAndHelpTextContainer = index$a(View)(function (_ref14) {
-  var theme = _ref14.theme;
+var StyledErrorAndHelpTextContainer = index$a(View)(function (_ref11) {
+  var theme = _ref11.theme;
   return {
     paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft,
     minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight,
@@ -12749,6 +12816,7 @@ var getState$1 = function getState(_ref) {
 // Fix issue: Placeholder is not shown on iOS when multiline is true
 // https://github.com/callstack/react-native-paper/pull/3331
 var EMPTY_PLACEHOLDER_VALUE = ' ';
+var LABEL_ANIMATION_DURATION = 150;
 var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref3;
   var label = _ref2.label,
@@ -12781,10 +12849,25 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState({
+      height: 0,
+      width: 0
+    }),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    isFocused = _React$useState2[0],
-    setIsFocused = _React$useState2[1];
+    inputSize = _React$useState2[0],
+    setInputSize = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    labelWidth = _React$useState4[0],
+    setLabelWidth = _React$useState4[1];
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    prefixWidth = _React$useState6[0],
+    setPrefixWidth = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isFocused = _React$useState8[0],
+    setIsFocused = _React$useState8[1];
   var state = getState$1({
     disabled: disabled,
     error: error,
@@ -12795,6 +12878,34 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   });
   var shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
   var theme = useTheme();
+  var focusAnimation = useRef(new Animated.Value(0)).current;
+  useEffect(function () {
+    Animated.timing(focusAnimation, {
+      toValue: isFocused || !isEmptyValue ? 1 : 0,
+      duration: LABEL_ANIMATION_DURATION,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: true
+    }).start();
+  }, [focusAnimation, isEmptyValue, isFocused]);
+  var onLayout = useCallback(function (event) {
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      height = _event$nativeEvent$la.height,
+      width = _event$nativeEvent$la.width;
+    setInputSize(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, {
+        height: height,
+        width: width
+      });
+    });
+  }, []);
+  var onPrefixLayout = useCallback(function (event) {
+    var width = event.nativeEvent.layout.width;
+    setPrefixWidth(width);
+  }, []);
+  var onLabelLayout = useCallback(function (event) {
+    var width = event.nativeEvent.layout.width;
+    setLabelWidth(width);
+  }, []);
   var innerTextInput = React.useRef();
   React.useImperativeHandle(ref, function () {
     return {
@@ -12892,43 +13003,60 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     style: styleWithoutBackgroundColor,
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID
-  }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
+  }, /*#__PURE__*/React.createElement(StyledTextInputContainer, {
+    onLayout: onLayout
+  }, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
     themeFocused: isFocused,
     themeState: state,
     testID: "text-input-border",
     style: [{
       backgroundColor: backgroundColor
     }, borderStyle]
-  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React.createElement(StyledLabelContainer, {
-    pointerEvents: "none",
-    testID: "label-container",
-    style: {
-      backgroundColor: backgroundColor
-    }
-  }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
-    themeState: state
-  }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabel, {
-    nativeID: accessibilityLabelledBy,
-    testID: "input-label",
-    themeState: state,
-    style: {
-      backgroundColor: backgroundColor
-    }
-  }, label)), typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement(View, {
+    onLayout: onPrefixLayout
+  }, typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     intent: state === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
     icon: prefix,
     size: "xsmall"
-  }) : prefix, /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
+  }) : prefix), /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
     themeVariant: variant,
-    pointerEvents: "none"
+    pointerEvents: "none",
+    style: [{
+      position: 'absolute'
+    }, {
+      transform: [{
+        translateY: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, 0]
+        })
+      }, {
+        translateX: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-inputSize.width / 2 + labelWidth / 2 + prefixWidth + theme.space.large, -inputSize.width / 2 + labelWidth / 2 + theme.space.small]
+        })
+      }, {
+        scale: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, 0.75]
+        })
+      }]
+    }]
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabelInsideTextInput, {
-    themeState: state
+    style: {
+      backgroundColor: backgroundColor
+    },
+    themeState: state,
+    testID: "input-label-asterisk"
   }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabelInsideTextInput, {
+    style: {
+      backgroundColor: backgroundColor
+    },
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
-    themeState: state
-  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+    themeState: state,
+    onLayout: onLabelLayout
+  }, label)), /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeProps.multiline,
     ref: function ref(reference) {
@@ -33923,6 +34051,41 @@ var RichTextEditor = function RichTextEditor(_ref) {
       postMessage(webview.current, message);
     }
   };
+  var _React$useState = React.useState({
+      height: 0,
+      width: 0
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    inputSize = _React$useState2[0],
+    setInputSize = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    labelWidth = _React$useState4[0],
+    setLabelWidth = _React$useState4[1];
+  var focusAnimation = useRef(new Animated.Value(0)).current;
+  useEffect(function () {
+    Animated.timing(focusAnimation, {
+      toValue: isFocused || !isEmptyValue ? 1 : 0,
+      duration: LABEL_ANIMATION_DURATION,
+      easing: Easing.bezier(0.4, 0, 0.2, 1),
+      useNativeDriver: true
+    }).start();
+  }, [focusAnimation, isEmptyValue, isFocused]);
+  var onLayout = useCallback(function (event) {
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      height = _event$nativeEvent$la.height,
+      width = _event$nativeEvent$la.width;
+    setInputSize(function (prev) {
+      return _objectSpread2(_objectSpread2({}, prev), {}, {
+        height: height,
+        width: width
+      });
+    });
+  }, []);
+  var onLabelLayout = useCallback(function (event) {
+    var width = event.nativeEvent.layout.width;
+    setLabelWidth(width);
+  }, []);
   useEffect(function () {
     var removeFocusListener = on(emitter, normalizeEventName('editor-focus'), function () {
       return setIsFocused(true);
@@ -34012,25 +34175,48 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement(StyledContainer$4, {
     testID: testID
-  }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
-    themeState: state,
-    themeFocused: isFocused
-  }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React.createElement(StyledLabelContainer, {
-    pointerEvents: "none"
-  }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
-    themeState: state
-  }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabel, {
-    testID: "input-label",
-    themeState: state
-  }, label)), /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
+  }, /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
     themeVariant: "text",
-    pointerEvents: "none"
+    pointerEvents: "none",
+    testID: "input-label-container",
+    style: [{
+      position: 'absolute'
+    }, {
+      transform: [{
+        translateY: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [inputSize.height / 2, 0]
+        })
+      }, {
+        translateX: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [-inputSize.width / 2 + labelWidth / 2 + theme.space.large, -inputSize.width / 2 + labelWidth / 2 + theme.space.small]
+        })
+      }, {
+        scale: focusAnimation.interpolate({
+          inputRange: [0, 1],
+          outputRange: [1, 0.75]
+        })
+      }]
+    }]
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabelInsideTextInput, {
+    style: {
+      backgroundColor: theme.__hd__.textInput.colors.labelBackground
+    },
     themeState: state
   }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabelInsideTextInput, {
+    style: {
+      backgroundColor: theme.__hd__.textInput.colors.labelBackground
+    },
     testID: "input-label",
-    themeState: state
-  }, label)), /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+    themeState: state,
+    onLayout: onLabelLayout
+  }, label)), /*#__PURE__*/React.createElement(StyledTextInputContainer, {
+    onLayout: onLayout
+  }, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
+    themeState: state,
+    themeFocused: isFocused
+  }), /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
     onPress: function onPress(e) {
       return e.stopPropagation();
     }