@hero-design/rn 8.87.2 → 8.88.0

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3084) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3003) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -10,4 +10,4 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 52.1s
+created lib/index.js, es/index.js in 52.4s

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hero-design/rn
 
+## 8.88.0
+
+### Minor Changes
+
+- [#3630](https://github.com/Thinkei/hero-design/pull/3630) [`b4ae9bf3fe00b4a7a27d2919eb7ef83a7d391e59`](https://github.com/Thinkei/hero-design/commit/b4ae9bf3fe00b4a7a27d2919eb7ef83a7d391e59) Thanks [@phucdph](https://github.com/phucdph)! - [AppCue] Support top-left, top-right, bottom-left, bottom-right placement
+
+### Patch Changes
+
+- [#3633](https://github.com/Thinkei/hero-design/pull/3633) [`040aa3235d512304df0dc00c4aa3c26766f1fc1c`](https://github.com/Thinkei/hero-design/commit/040aa3235d512304df0dc00c4aa3c26766f1fc1c) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [TextInput] Fix label when has value do not align with another TextInput
+
+- [#3638](https://github.com/Thinkei/hero-design/pull/3638) [`4a5628d321f2c6b9dcb96c62b1ceed999a6ec7b7`](https://github.com/Thinkei/hero-design/commit/4a5628d321f2c6b9dcb96c62b1ceed999a6ec7b7) Thanks [@ttkien](https://github.com/ttkien)! - [Empty] Update descrption typeface and font size
+
 ## 8.87.2
 
 ### Patch Changes

package/es/index.js

@@ -8358,7 +8358,7 @@ var StyledContainer$9 = index$a(View)(function (_ref2) {
 var StyledIconContainer$1 = index$a(Animated.View)(function (_ref3) {
   var theme = _ref3.theme,
     themePlacement = _ref3.themePlacement;
-  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
     position: 'absolute',
     color: theme.__hd__.appCue.colors.background,
     display: 'flex',
@@ -8385,6 +8385,24 @@ var StyledIconContainer$1 = index$a(Animated.View)(function (_ref3) {
       rotate: '-90deg'
     }],
     height: '100%'
+  }), themePlacement === 'top-left' && {
+    bottom: -theme.__hd__.appCue.space.arrowOffset,
+    right: theme.__hd__.appCue.space.arrowOffset
+  }), themePlacement === 'top-right' && {
+    bottom: -theme.__hd__.appCue.space.arrowOffset,
+    left: theme.__hd__.appCue.space.arrowOffset
+  }), themePlacement === 'bottom-left' && {
+    top: -theme.__hd__.appCue.space.arrowOffset,
+    right: theme.__hd__.appCue.space.arrowOffset,
+    transform: [{
+      rotate: '180deg'
+    }]
+  }), themePlacement === 'bottom-right' && {
+    top: -theme.__hd__.appCue.space.arrowOffset,
+    left: theme.__hd__.appCue.space.arrowOffset,
+    transform: [{
+      rotate: '180deg'
+    }]
   });
 });
 
@@ -8411,42 +8429,79 @@ var calculatePosition = function calculatePosition(_ref) {
   var placement = _ref.placement,
     position = _ref.position,
     contentSize = _ref.contentSize,
-    offset = _ref.offset;
+    offset = _ref.offset,
+    windowWidth = _ref.windowWidth;
   switch (placement) {
     case 'top':
       {
         return {
           // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
-          x: position.pageX + (position.width - contentSize.width) / 2,
+          left: position.pageX + (position.width - contentSize.width) / 2,
           // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
-          y: position.pageY - contentSize.height - offset
+          top: position.pageY - contentSize.height - offset
         };
       }
     case 'bottom':
       {
         return {
           // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
-          x: position.pageX + (position.width - contentSize.width) / 2,
+          left: position.pageX + (position.width - contentSize.width) / 2,
           // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
-          y: position.pageY + position.height + offset
+          top: position.pageY + position.height + offset
         };
       }
     case 'right':
       {
         return {
           // The X coordinate is calculated by adding the width of the target element and the offset to the X coordinate of the target element.
-          x: position.pageX + position.width + offset,
+          left: position.pageX + position.width + offset,
           // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
-          y: position.pageY + (position.height - contentSize.height) / 2
+          top: position.pageY + (position.height - contentSize.height) / 2
         };
       }
     case 'left':
       {
         return {
           // The X coordinate is calculated by subtracting the width of the content and the offset from the X coordinate of the target element.
-          x: position.pageX - contentSize.width - offset,
+          left: position.pageX - contentSize.width - offset,
           // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
-          y: position.pageY + (position.height - contentSize.height) / 2
+          top: position.pageY + (position.height - contentSize.height) / 2
+        };
+      }
+    case 'top-left':
+      {
+        return {
+          // The X coordinate is calculated by subtracting the width of the content from the X coordinate of the target element.
+          right: windowWidth - position.pageX - position.width,
+          // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
+          top: position.pageY - contentSize.height - offset
+        };
+      }
+    case 'top-right':
+      {
+        return {
+          // The X coordinate is calculated by adding the width of the target element to the X coordinate of the target element.
+          left: position.pageX,
+          // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element.
+          top: position.pageY - contentSize.height - offset
+        };
+      }
+    case 'bottom-left':
+      {
+        return {
+          // The X coordinate is calculated by subtracting the width of the content from the X coordinate of the target element.
+          right: windowWidth - position.pageX - position.width,
+          // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
+          top: position.pageY + position.height + offset
+        };
+      }
+    case 'bottom-right':
+      {
+        return {
+          // The X coordinate is calculated by adding the width of the target element to the X coordinate of the target element.
+          left: position.pageX,
+          // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
+          top: position.pageY + position.height + offset
         };
       }
   }
@@ -8488,6 +8543,22 @@ var calulateContentMaxWidth = function calulateContentMaxWidth(_ref2) {
       {
         return position.pageX - offset;
       }
+    case 'top-left':
+      {
+        return position.pageX + position.width;
+      }
+    case 'top-right':
+      {
+        return windowWidth - position.pageX;
+      }
+    case 'bottom-left':
+      {
+        return position.pageX + position.width;
+      }
+    case 'bottom-right':
+      {
+        return windowWidth - position.pageX;
+      }
   }
 };
 
@@ -8554,14 +8625,15 @@ var AppCue = function AppCue(_ref) {
       height: event.nativeEvent.layout.height
     });
   };
+  var _useWindowDimensions = useWindowDimensions(),
+    windowWidth = _useWindowDimensions.width;
   var pos = calculatePosition({
     position: position,
     contentSize: contentSize,
     placement: placement,
-    offset: offset
+    offset: offset,
+    windowWidth: windowWidth
   });
-  var _useWindowDimensions = useWindowDimensions(),
-    windowWidth = _useWindowDimensions.width;
   var maxWidth = calulateContentMaxWidth({
     position: position,
     offset: offset,
@@ -8601,8 +8673,10 @@ var AppCue = function AppCue(_ref) {
   }, /*#__PURE__*/React__default.createElement(StyledContainer$9, null, /*#__PURE__*/React__default.createElement(View, {
     style: StyleSheet$1.flatten([{
       position: 'absolute',
-      top: pos.y,
-      left: pos.x
+      top: pos.top,
+      left: pos.left,
+      bottom: pos.bottom,
+      right: pos.right
     }, style]),
     onLayout: measureContent,
     testID: testID
@@ -13970,7 +14044,11 @@ var StyledLabelInsideTextInput = index$a(Typography.Body)(function (_ref3) {
     alignContent: 'center',
     alignItems: 'center',
     color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
-    marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop
+    marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop,
+    position: 'absolute',
+    zIndex: 1,
+    left: 0,
+    top: '50%'
   };
 });
 var StyledAsteriskLabelInsideTextInput = index$a(Typography.Body)(function (_ref4) {
@@ -14191,18 +14269,10 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     inputSize = _React$useState2[0],
     setInputSize = _React$useState2[1];
-  var _React$useState3 = React__default.useState(0),
+  var _React$useState3 = React__default.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    labelWidth = _React$useState4[0],
-    setLabelWidth = _React$useState4[1];
-  var _React$useState5 = React__default.useState(0),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    prefixWidth = _React$useState6[0],
-    setPrefixWidth = _React$useState6[1];
-  var _React$useState7 = React__default.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    isFocused = _React$useState8[0],
-    setIsFocused = _React$useState8[1];
+    isFocused = _React$useState4[0],
+    setIsFocused = _React$useState4[1];
   var state = getState$3({
     disabled: disabled,
     error: error,
@@ -14232,14 +14302,6 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
       });
     });
   }, []);
-  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__default.useRef();
   React__default.useImperativeHandle(ref, function () {
     return {
@@ -14346,9 +14408,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     style: [{
       backgroundColor: backgroundColor
     }, borderStyle]
-  }), /*#__PURE__*/React__default.createElement(View, {
-    onLayout: onPrefixLayout
-  }, renderPrefix$1({
+  }), /*#__PURE__*/React__default.createElement(View, null, renderPrefix$1({
     state: state,
     prefix: prefix
   })), /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
@@ -14360,12 +14420,12 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, 0]
+          outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, theme.space.xsmall]
         })
       }, {
         translateX: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [-inputSize.width / 2 + labelWidth / 2 + prefixWidth + theme.space.large, -inputSize.width / 2 + labelWidth / 2 + theme.space.small]
+          outputRange: [prefix ? theme.space.xxlarge : theme.space.medium, -theme.space.xlarge + theme.space.xsmall]
         })
       }, {
         scale: focusAnimation.interpolate({
@@ -14374,21 +14434,20 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
         })
       }]
     }]
-  }, required && /*#__PURE__*/React__default.createElement(StyledAsteriskLabelInsideTextInput, {
+  }, !!label && /*#__PURE__*/React__default.createElement(StyledLabelInsideTextInput, {
     style: {
       backgroundColor: backgroundColor
     },
-    themeState: state,
-    testID: "input-label-asterisk"
-  }, "*"), !!label && /*#__PURE__*/React__default.createElement(StyledLabelInsideTextInput, {
+    nativeID: accessibilityLabelledBy,
+    testID: "input-label",
+    themeState: state
+  }, required && /*#__PURE__*/React__default.createElement(StyledAsteriskLabelInsideTextInput, {
     style: {
       backgroundColor: backgroundColor
     },
-    nativeID: accessibilityLabelledBy,
-    testID: "input-label",
     themeState: state,
-    onLayout: onLabelLayout
-  }, label)), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+    testID: "input-label-asterisk"
+  }, "*"), label)), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
@@ -15111,8 +15170,8 @@ var Empty = function Empty(_ref) {
     level: "h4",
     typeface: "playful"
   }, title), !!description && /*#__PURE__*/React__default.createElement(StyledDescription, {
-    themeVariant: variant,
-    typeface: "playful"
+    variant: "small",
+    themeVariant: variant
   }, description));
 };
 

package/lib/index.js

@@ -8386,7 +8386,7 @@ var StyledContainer$9 = index$a(reactNative.View)(function (_ref2) {
 var StyledIconContainer$1 = index$a(reactNative.Animated.View)(function (_ref3) {
   var theme = _ref3.theme,
     themePlacement = _ref3.themePlacement;
-  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
     position: 'absolute',
     color: theme.__hd__.appCue.colors.background,
     display: 'flex',
@@ -8413,6 +8413,24 @@ var StyledIconContainer$1 = index$a(reactNative.Animated.View)(function (_ref3)
       rotate: '-90deg'
     }],
     height: '100%'
+  }), themePlacement === 'top-left' && {
+    bottom: -theme.__hd__.appCue.space.arrowOffset,
+    right: theme.__hd__.appCue.space.arrowOffset
+  }), themePlacement === 'top-right' && {
+    bottom: -theme.__hd__.appCue.space.arrowOffset,
+    left: theme.__hd__.appCue.space.arrowOffset
+  }), themePlacement === 'bottom-left' && {
+    top: -theme.__hd__.appCue.space.arrowOffset,
+    right: theme.__hd__.appCue.space.arrowOffset,
+    transform: [{
+      rotate: '180deg'
+    }]
+  }), themePlacement === 'bottom-right' && {
+    top: -theme.__hd__.appCue.space.arrowOffset,
+    left: theme.__hd__.appCue.space.arrowOffset,
+    transform: [{
+      rotate: '180deg'
+    }]
   });
 });
 
@@ -8439,42 +8457,79 @@ var calculatePosition = function calculatePosition(_ref) {
   var placement = _ref.placement,
     position = _ref.position,
     contentSize = _ref.contentSize,
-    offset = _ref.offset;
+    offset = _ref.offset,
+    windowWidth = _ref.windowWidth;
   switch (placement) {
     case 'top':
       {
         return {
           // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
-          x: position.pageX + (position.width - contentSize.width) / 2,
+          left: position.pageX + (position.width - contentSize.width) / 2,
           // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
-          y: position.pageY - contentSize.height - offset
+          top: position.pageY - contentSize.height - offset
         };
       }
     case 'bottom':
       {
         return {
           // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
-          x: position.pageX + (position.width - contentSize.width) / 2,
+          left: position.pageX + (position.width - contentSize.width) / 2,
           // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
-          y: position.pageY + position.height + offset
+          top: position.pageY + position.height + offset
         };
       }
     case 'right':
       {
         return {
           // The X coordinate is calculated by adding the width of the target element and the offset to the X coordinate of the target element.
-          x: position.pageX + position.width + offset,
+          left: position.pageX + position.width + offset,
           // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
-          y: position.pageY + (position.height - contentSize.height) / 2
+          top: position.pageY + (position.height - contentSize.height) / 2
         };
       }
     case 'left':
       {
         return {
           // The X coordinate is calculated by subtracting the width of the content and the offset from the X coordinate of the target element.
-          x: position.pageX - contentSize.width - offset,
+          left: position.pageX - contentSize.width - offset,
           // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
-          y: position.pageY + (position.height - contentSize.height) / 2
+          top: position.pageY + (position.height - contentSize.height) / 2
+        };
+      }
+    case 'top-left':
+      {
+        return {
+          // The X coordinate is calculated by subtracting the width of the content from the X coordinate of the target element.
+          right: windowWidth - position.pageX - position.width,
+          // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
+          top: position.pageY - contentSize.height - offset
+        };
+      }
+    case 'top-right':
+      {
+        return {
+          // The X coordinate is calculated by adding the width of the target element to the X coordinate of the target element.
+          left: position.pageX,
+          // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element.
+          top: position.pageY - contentSize.height - offset
+        };
+      }
+    case 'bottom-left':
+      {
+        return {
+          // The X coordinate is calculated by subtracting the width of the content from the X coordinate of the target element.
+          right: windowWidth - position.pageX - position.width,
+          // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
+          top: position.pageY + position.height + offset
+        };
+      }
+    case 'bottom-right':
+      {
+        return {
+          // The X coordinate is calculated by adding the width of the target element to the X coordinate of the target element.
+          left: position.pageX,
+          // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
+          top: position.pageY + position.height + offset
         };
       }
   }
@@ -8516,6 +8571,22 @@ var calulateContentMaxWidth = function calulateContentMaxWidth(_ref2) {
       {
         return position.pageX - offset;
       }
+    case 'top-left':
+      {
+        return position.pageX + position.width;
+      }
+    case 'top-right':
+      {
+        return windowWidth - position.pageX;
+      }
+    case 'bottom-left':
+      {
+        return position.pageX + position.width;
+      }
+    case 'bottom-right':
+      {
+        return windowWidth - position.pageX;
+      }
   }
 };
 
@@ -8582,14 +8653,15 @@ var AppCue = function AppCue(_ref) {
       height: event.nativeEvent.layout.height
     });
   };
+  var _useWindowDimensions = reactNative.useWindowDimensions(),
+    windowWidth = _useWindowDimensions.width;
   var pos = calculatePosition({
     position: position,
     contentSize: contentSize,
     placement: placement,
-    offset: offset
+    offset: offset,
+    windowWidth: windowWidth
   });
-  var _useWindowDimensions = reactNative.useWindowDimensions(),
-    windowWidth = _useWindowDimensions.width;
   var maxWidth = calulateContentMaxWidth({
     position: position,
     offset: offset,
@@ -8629,8 +8701,10 @@ var AppCue = function AppCue(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     style: reactNative.StyleSheet.flatten([{
       position: 'absolute',
-      top: pos.y,
-      left: pos.x
+      top: pos.top,
+      left: pos.left,
+      bottom: pos.bottom,
+      right: pos.right
     }, style]),
     onLayout: measureContent,
     testID: testID
@@ -13998,7 +14072,11 @@ var StyledLabelInsideTextInput = index$a(Typography.Body)(function (_ref3) {
     alignContent: 'center',
     alignItems: 'center',
     color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
-    marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop
+    marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop,
+    position: 'absolute',
+    zIndex: 1,
+    left: 0,
+    top: '50%'
   };
 });
 var StyledAsteriskLabelInsideTextInput = index$a(Typography.Body)(function (_ref4) {
@@ -14219,18 +14297,10 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     inputSize = _React$useState2[0],
     setInputSize = _React$useState2[1];
-  var _React$useState3 = React__namespace.default.useState(0),
+  var _React$useState3 = React__namespace.default.useState(false),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    labelWidth = _React$useState4[0],
-    setLabelWidth = _React$useState4[1];
-  var _React$useState5 = React__namespace.default.useState(0),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    prefixWidth = _React$useState6[0],
-    setPrefixWidth = _React$useState6[1];
-  var _React$useState7 = React__namespace.default.useState(false),
-    _React$useState8 = _slicedToArray(_React$useState7, 2),
-    isFocused = _React$useState8[0],
-    setIsFocused = _React$useState8[1];
+    isFocused = _React$useState4[0],
+    setIsFocused = _React$useState4[1];
   var state = getState$3({
     disabled: disabled,
     error: error,
@@ -14260,14 +14330,6 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
       });
     });
   }, []);
-  var onPrefixLayout = React.useCallback(function (event) {
-    var width = event.nativeEvent.layout.width;
-    setPrefixWidth(width);
-  }, []);
-  var onLabelLayout = React.useCallback(function (event) {
-    var width = event.nativeEvent.layout.width;
-    setLabelWidth(width);
-  }, []);
   var innerTextInput = React__namespace.default.useRef();
   React__namespace.default.useImperativeHandle(ref, function () {
     return {
@@ -14374,9 +14436,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     style: [{
       backgroundColor: backgroundColor
     }, borderStyle]
-  }), /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
-    onLayout: onPrefixLayout
-  }, renderPrefix$1({
+  }), /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, renderPrefix$1({
     state: state,
     prefix: prefix
   })), /*#__PURE__*/React__namespace.default.createElement(StyledLabelContainerInsideTextInput, {
@@ -14388,12 +14448,12 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
       transform: [{
         translateY: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, 0]
+          outputRange: [variant !== 'textarea' ? inputSize.height / 2 : theme.space.large, theme.space.xsmall]
         })
       }, {
         translateX: focusAnimation.interpolate({
           inputRange: [0, 1],
-          outputRange: [-inputSize.width / 2 + labelWidth / 2 + prefixWidth + theme.space.large, -inputSize.width / 2 + labelWidth / 2 + theme.space.small]
+          outputRange: [prefix ? theme.space.xxlarge : theme.space.medium, -theme.space.xlarge + theme.space.xsmall]
         })
       }, {
         scale: focusAnimation.interpolate({
@@ -14402,21 +14462,20 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
         })
       }]
     }]
-  }, required && /*#__PURE__*/React__namespace.default.createElement(StyledAsteriskLabelInsideTextInput, {
+  }, !!label && /*#__PURE__*/React__namespace.default.createElement(StyledLabelInsideTextInput, {
     style: {
       backgroundColor: backgroundColor
     },
-    themeState: state,
-    testID: "input-label-asterisk"
-  }, "*"), !!label && /*#__PURE__*/React__namespace.default.createElement(StyledLabelInsideTextInput, {
+    nativeID: accessibilityLabelledBy,
+    testID: "input-label",
+    themeState: state
+  }, required && /*#__PURE__*/React__namespace.default.createElement(StyledAsteriskLabelInsideTextInput, {
     style: {
       backgroundColor: backgroundColor
     },
-    nativeID: accessibilityLabelledBy,
-    testID: "input-label",
     themeState: state,
-    onLayout: onLabelLayout
-  }, label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
+    testID: "input-label-asterisk"
+  }, "*"), label)), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, renderInput$1({
     variant: variant,
     nativeInputProps: nativeInputProps,
     renderInputValue: renderInputValue,
@@ -15139,8 +15198,8 @@ var Empty = function Empty(_ref) {
     level: "h4",
     typeface: "playful"
   }, title), !!description && /*#__PURE__*/React__namespace.default.createElement(StyledDescription, {
-    themeVariant: variant,
-    typeface: "playful"
+    variant: "small",
+    themeVariant: variant
   }, description));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.87.2",
+  "version": "8.88.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/AppCue/StyledAppCue.tsx

@@ -1,7 +1,15 @@
 import styled from '@emotion/native';
 import { View, Animated } from 'react-native';
 
-export type Placement = 'top' | 'bottom' | 'right' | 'left';
+export type Placement =
+  | 'top'
+  | 'bottom'
+  | 'right'
+  | 'left'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right';
 
 export const StyledContent = styled(View)(({ theme }) => ({
   padding: theme.__hd__.appCue.space.padding,
@@ -43,4 +51,22 @@ export const StyledIconContainer = styled(Animated.View)<{
     transform: [{ rotate: '-90deg' }],
     height: '100%',
   }),
+  ...(themePlacement === 'top-left' && {
+    bottom: -theme.__hd__.appCue.space.arrowOffset,
+    right: theme.__hd__.appCue.space.arrowOffset,
+  }),
+  ...(themePlacement === 'top-right' && {
+    bottom: -theme.__hd__.appCue.space.arrowOffset,
+    left: theme.__hd__.appCue.space.arrowOffset,
+  }),
+  ...(themePlacement === 'bottom-left' && {
+    top: -theme.__hd__.appCue.space.arrowOffset,
+    right: theme.__hd__.appCue.space.arrowOffset,
+    transform: [{ rotate: '180deg' }],
+  }),
+  ...(themePlacement === 'bottom-right' && {
+    top: -theme.__hd__.appCue.space.arrowOffset,
+    left: theme.__hd__.appCue.space.arrowOffset,
+    transform: [{ rotate: '180deg' }],
+  }),
 }));

package/src/components/AppCue/__tests__/StyledAppCue.tsx

@@ -9,6 +9,10 @@ describe('AppCue', () => {
     ${'bottom'}
     ${'left'}
     ${'right'}
+    ${'top-left'}
+    ${'top-right'}
+    ${'bottom-left'}
+    ${'bottom-right'}
   `('renders icon $placement correctly', ({ placement }) => {
     const { toJSON } = renderWithTheme(
       <StyledIconContainer themePlacement={placement} />