@hero-design/rn 8.121.0 → 8.123.0

package/lib/index.js

@@ -5644,6 +5644,7 @@ var getAttachmentTheme = function getAttachmentTheme(theme) {
 
 var getAvatarTheme = function getAvatarTheme(theme) {
   var colors = {
+    neutral: palette$8.maasstrichtBlueLight25,
     primary: theme.colors.primary,
     info: theme.colors.info,
     danger: theme.colors.error,
@@ -7915,6 +7916,23 @@ var getSegmentedControlTheme = function getSegmentedControlTheme(theme) {
   };
 };
 
+var getInlineLoaderTheme = function getInlineLoaderTheme(theme) {
+  return {
+    space: {
+      gap: theme.space.small
+    },
+    icon: {
+      lineHeights: {
+        xsmall: theme.lineHeights.xsmall,
+        small: theme.lineHeights.small,
+        medium: theme.lineHeights.medium,
+        large: theme.lineHeights.large,
+        xlarge: theme.lineHeights.xlarge
+      }
+    }
+  };
+};
+
 var getTheme = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
   var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$2;
@@ -7976,6 +7994,7 @@ var getTheme = function getTheme() {
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
       floatingIsland: getFloatingIslandTheme(globalTheme),
+      inlineLoader: getInlineLoaderTheme(globalTheme),
       segmentedControl: getSegmentedControlTheme(globalTheme)
     }
   });
@@ -9426,7 +9445,7 @@ var StyledContent$1 = index$c(reactNative.View)(function (_ref) {
     alignSelf: 'center'
   };
 });
-var StyledContainer$9 = index$c(reactNative.View)(function (_ref2) {
+var StyledContainer$a = index$c(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     width: '100%',
@@ -9434,7 +9453,7 @@ var StyledContainer$9 = index$c(reactNative.View)(function (_ref2) {
     backgroundColor: theme.__hd__.appCue.colors.backdropColor
   };
 });
-var StyledIconContainer$1 = index$c(reactNative.Animated.View)(function (_ref3) {
+var StyledIconContainer$2 = index$c(reactNative.Animated.View)(function (_ref3) {
   var theme = _ref3.theme,
     themePlacement = _ref3.themePlacement;
   return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
@@ -9749,7 +9768,7 @@ var AppCue = function AppCue(_ref) {
     onPress: function onPress() {
       return setVisible(false);
     }
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledContainer$a, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     style: reactNative.StyleSheet.flatten([{
       position: 'absolute',
       top: pos.top,
@@ -9764,7 +9783,7 @@ var AppCue = function AppCue(_ref) {
       maxWidth: maxWidth
     },
     testID: testID && "".concat(testID, "-content")
-  }, renderContent()), /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer$1, {
+  }, renderContent()), /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer$2, {
     themePlacement: placement,
     testID: testID && "".concat(testID, "-arrow")
   }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
@@ -9773,7 +9792,7 @@ var AppCue = function AppCue(_ref) {
   })))))));
 };
 
-var StyledContainer$8 = index$c(reactNative.View)({
+var StyledContainer$9 = index$c(reactNative.View)({
   alignItems: 'center',
   flexDirection: 'row'
 });
@@ -9815,7 +9834,7 @@ var Attachment = function Attachment(_ref) {
     backgroundHighlighted = _ref$backgroundHighli === void 0 ? false : _ref$backgroundHighli,
     style = _ref.style,
     testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$8, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, {
     testID: testID,
     style: style
   }, /*#__PURE__*/React__namespace.default.createElement(StyledContentContainer$1, {
@@ -9903,7 +9922,7 @@ var Avatar = function Avatar(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'small' : _ref$size,
     _ref$intent = _ref.intent,
-    intent = _ref$intent === void 0 ? 'primary' : _ref$intent;
+    intent = _ref$intent === void 0 ? 'neutral' : _ref$intent;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasImageError = _useState2[0],
@@ -13937,7 +13956,7 @@ function ContentNavigator(_ref) {
   }));
 }
 
-var StyledContainer$7 = index$c(reactNative.View)(function (_ref) {
+var StyledContainer$8 = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.calendar.colors.background
@@ -14372,7 +14391,7 @@ var CalendarRange = function CalendarRange(_ref) {
       textIntent: isCurrentMonth ? undefined : 'subdued'
     });
   };
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$7, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$8, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__namespace.default.createElement(ContentNavigator, {
     value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
@@ -14506,7 +14525,7 @@ var Calendar = function Calendar(_ref) {
     monthPickerVisible = _useState2[0],
     setMonthPickerVisible = _useState2[1];
   var now = new Date();
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$7, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$8, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__namespace.default.createElement(ContentNavigator, {
     value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
@@ -20654,7 +20673,7 @@ var index$9 = Object.assign(DefaultCheckbox, {
   Inline: InlineCheckbox
 });
 
-var StyledContainer$6 = index$c(reactNative.View)(function (_ref) {
+var StyledContainer$7 = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: '100%',
@@ -21042,7 +21061,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     defaultValue: defaultValue,
     placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
   });
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$6, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$7, {
     style: styleWithoutBackgroundColor,
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID
@@ -21722,7 +21741,7 @@ var index$8 = Object.assign(PublicDatePicker, {
 });
 
 var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
-var StyledContainer$5 = index$c(reactNative.View)(function (_ref) {
+var StyledContainer$6 = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
@@ -21982,7 +22001,7 @@ var Drawer = function Drawer(_ref) {
       return animation.stop();
     };
   }, [visible]);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$5, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$6, {
     testID: testID,
     enableShadow: enableShadow,
     pointerEvents: "box-none"
@@ -23973,7 +23992,7 @@ var StyledFABText = index$c(Typography.Body)(function (_ref3) {
     marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
   };
 });
-var StyledIconContainer = index$c(Box)(function (_ref4) {
+var StyledIconContainer$1 = index$c(Box)(function (_ref4) {
   var theme = _ref4.theme;
   return {
     width: theme.__hd__.fab.sizes.iconContainerWidth,
@@ -24017,7 +24036,7 @@ var ActionItem = function ActionItem(_ref) {
     style: style,
     onPress: onPress,
     testID: testID
-  }, /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$3, {
+  }, /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledIcon$3, {
     size: "xsmall",
     icon: icon
   })), /*#__PURE__*/React__namespace.default.createElement(StyledActionItemText, null, title))));
@@ -24066,14 +24085,14 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
     animated = _ref.animated,
     active = _ref.active;
   if (animated) {
-    return /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(AnimatedFABIcon, {
+    return /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer$1, null, /*#__PURE__*/React__namespace.default.createElement(AnimatedFABIcon, {
       active: active,
       icon: icon,
       testID: "animated-fab-icon",
       size: "xsmall"
     }));
   }
-  return /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledFABIcon, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledFABIcon, {
     size: "xsmall",
     icon: icon,
     testID: "styled-fab-icon"
@@ -24082,7 +24101,7 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
 var IconWithTextContent = function IconWithTextContent(_ref2) {
   var icon = _ref2.icon,
     title = _ref2.title;
-  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledFABIcon, {
+  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledFABIcon, {
     size: "xsmall",
     icon: icon,
     testID: "styled-fab-icon"
@@ -24240,7 +24259,7 @@ var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
 });
 FAB$1.displayName = 'FAB';
 
-var StyledContainer$4 = index$c(reactNative.View)({
+var StyledContainer$5 = index$c(reactNative.View)({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -24347,7 +24366,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$4, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$5, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -25078,7 +25097,7 @@ var HeroDesignProvider = function HeroDesignProvider(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(Toast.Provider, null, /*#__PURE__*/React__namespace.default.createElement(Portal$1.Provider, null, children))));
 };
 
-var StyledContainer$3 = index$c(reactNative.View)(function (_ref) {
+var StyledContainer$4 = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: theme.__hd__.mapPin.sizes["default"],
@@ -25158,7 +25177,7 @@ var MapPinFocussed = function MapPinFocussed(_ref) {
   var style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$o);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$3, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
   }), /*#__PURE__*/React__namespace.default.createElement(StyledFocusIcon, {
@@ -25185,7 +25204,7 @@ var MapPin = function MapPin(_ref) {
     icon = _ref.icon,
     nativeProps = _objectWithoutProperties(_ref, _excluded$n);
   var badgeIcon = getBadgeIconName(state);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$3, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
   }), /*#__PURE__*/React__namespace.default.createElement(StyledContent, {
@@ -25467,7 +25486,7 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 });
 PinInput.displayName = 'PinInput';
 
-var StyledContainer$2 = index$c(reactNative.View)(function (_ref) {
+var StyledContainer$3 = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     flexDirection: 'row',
@@ -25539,7 +25558,7 @@ var ProgressCircle = function ProgressCircle(_ref) {
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.View, _extends$1({}, nativeProps, {
     testID: testID,
     style: style
-  }), /*#__PURE__*/React__namespace.default.createElement(StyledContainer$2, null, /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
+  }), /*#__PURE__*/React__namespace.default.createElement(StyledContainer$3, null, /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
     width: size,
     height: size,
     viewBox: "0 0 ".concat(size, " ").concat(size)
@@ -27273,7 +27292,7 @@ var index$4 = Object.assign(SingleSelect, {
   Multi: MultiSelect
 });
 
-var StyledContainer$1 = index$c(Box)(function (_ref) {
+var StyledContainer$2 = index$c(Box)(function (_ref) {
   var theme = _ref.theme,
     themeIntent = _ref.themeIntent,
     themeVariant = _ref.themeVariant;
@@ -27359,7 +27378,7 @@ var Skeleton = function Skeleton(_ref) {
     }
     onLayout === null || onLayout === void 0 || onLayout(e);
   }, []);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$1, _extends$1({
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$2, _extends$1({
     style: style,
     themeVariant: variant,
     themeIntent: intent,
@@ -41334,7 +41353,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
     onBlur === null || onBlur === void 0 || onBlur();
     setIsFocused(false);
   }, [onBlur]);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$6, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$7, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(StyledLabelContainerInsideTextInput, {
     themeHasPrefix: false,
@@ -41588,7 +41607,7 @@ function SectionListWithFAB(_ref) {
   });
 }
 
-var StyledContainer = index$c(reactNative.View)(function () {
+var StyledContainer$1 = index$c(reactNative.View)(function () {
   return {
     width: '100%'
   };
@@ -41693,7 +41712,7 @@ var SearchTwoLine = function SearchTwoLine(props) {
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'basic' : _props$variant,
     accessible = props.accessible;
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$1, {
     style: style,
     testID: testID,
     accessible: accessible
@@ -41810,7 +41829,7 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }));
   };
   var shouldShowClearButton = clearable && (state === 'filled' || isFocused) && !isEmptyValue;
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$1, {
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID,
     style: style,
@@ -42267,6 +42286,237 @@ var FilterTrigger = function FilterTrigger(_ref) {
   })));
 };
 
+var ANIMATION_DURATION_MS = 2000;
+var AnimatedGradientText = function AnimatedGradientText(_ref) {
+  var children = _ref.children,
+    fontSize = _ref.fontSize,
+    lineHeight = _ref.lineHeight;
+  var theme = useTheme();
+  var gradient = theme.colors.gradients.aiHorizontal;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var animatedValue = React.useRef(new reactNative.Animated.Value(0));
+  var onLayout = React.useCallback(function (event) {
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      width = _event$nativeEvent$la.width,
+      height = _event$nativeEvent$la.height;
+    setSize(function (prev) {
+      if ((prev === null || prev === void 0 ? void 0 : prev.width) === width && (prev === null || prev === void 0 ? void 0 : prev.height) === height) return prev;
+      return {
+        width: width,
+        height: height
+      };
+    });
+  }, []);
+  React.useEffect(function () {
+    if (!size) return;
+    animatedValue.current.setValue(0);
+    var animation = reactNative.Animated.loop(reactNative.Animated.timing(animatedValue.current, {
+      toValue: 1,
+      duration: ANIMATION_DURATION_MS,
+      easing: reactNative.Easing.linear,
+      useNativeDriver: reactNative.Platform.OS !== 'web'
+    }));
+    animation.start();
+    return function () {
+      return animation.stop();
+    };
+  }, [size]);
+  // Slide left by one full text-width per loop cycle.
+  // Starting at 0 keeps the gradient visible from the first frame.
+  var translateX = size ? animatedValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -size.width]
+  }) : animatedValue.current;
+  return /*#__PURE__*/React__namespace.default.createElement(reactNative.View, null, /*#__PURE__*/React__namespace.default.createElement(MaskedView__default.default, {
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    maskElement: /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+      onLayout: onLayout,
+      style: {
+        backgroundColor: 'transparent'
+      },
+      testID: "animated-gradient-text-mask"
+    }, /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+      intent: "body",
+      style: {
+        fontSize: fontSize,
+        lineHeight: lineHeight
+      }
+    }, children))
+  }, size ? /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+    style: {
+      width: size.width,
+      height: size.height,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.Animated.View, {
+    style: {
+      width: size.width * 2,
+      height: size.height,
+      transform: [{
+        translateX: translateX
+      }]
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(expoLinearGradient.LinearGradient, {
+    start: gradient.start,
+    end: gradient.end,
+    colors: [gradient.colors[0], gradient.colors[1], gradient.colors[2], gradient.colors[1], gradient.colors[0]],
+    locations: [0, 0.25, 0.5, 0.75, 1.0],
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  }))) : /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+    intent: "body",
+    style: {
+      fontSize: fontSize,
+      lineHeight: lineHeight
+    }
+  }, children)), /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+    style: {
+      position: 'absolute',
+      opacity: 0
+    },
+    importantForAccessibility: "yes",
+    accessibilityElementsHidden: false
+  }, /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+    intent: "body",
+    style: {
+      fontSize: fontSize,
+      lineHeight: lineHeight
+    }
+  }, children)));
+};
+
+var TEXT_SIZE_NAMES = {
+  10: 'xsmall',
+  12: 'small',
+  14: 'medium',
+  16: 'large',
+  18: 'xlarge'
+};
+var getTextSizeName = function getTextSizeName(size) {
+  return TEXT_SIZE_NAMES[size];
+};
+var getIconName = function getIconName(state) {
+  switch (state) {
+    case 'idle':
+      return 'circle-ok-outlined';
+    case 'loading':
+      return 'loading';
+    case 'success':
+      return 'circle-check';
+    case 'error':
+      return 'circle-cancel-outlined';
+  }
+};
+var getIconIntent = function getIconIntent(state, intent) {
+  switch (state) {
+    case 'idle':
+      return 'inactive';
+    case 'loading':
+      return intent === 'ai' ? 'ai' : 'primary';
+    case 'success':
+      return 'success';
+    case 'error':
+      return 'danger';
+  }
+};
+var getIconSize = function getIconSize(textSize) {
+  switch (textSize) {
+    case 10:
+      return {
+        size: 'xxxsmall'
+      };
+    case 12:
+      return {
+        size: 'xxxsmall',
+        styleFontSize: 14
+      };
+    case 14:
+      return {
+        size: 'xxxsmall',
+        styleFontSize: 14
+      };
+    case 16:
+      return {
+        size: 'xsmall'
+      };
+    case 18:
+      return {
+        size: 'small'
+      };
+  }
+};
+
+var StyledContainer = index$c(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: theme.__hd__.inlineLoader.space.gap
+  };
+});
+var StyledIconContainer = index$c(reactNative.View)(function (_ref2) {
+  var themeSize = _ref2.themeSize,
+    theme = _ref2.theme;
+  return {
+    height: theme.__hd__.inlineLoader.icon.lineHeights[themeSize],
+    justifyContent: 'center'
+  };
+});
+
+var InlineLoader = function InlineLoader(_ref) {
+  var text = _ref.text,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? 'idle' : _ref$state,
+    _ref$intent = _ref.intent,
+    intent = _ref$intent === void 0 ? 'neutral' : _ref$intent,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 14 : _ref$size,
+    style = _ref.style,
+    testID = _ref.testID;
+  var theme = useTheme();
+  var textSizeName = getTextSizeName(size);
+  var lineHeight = theme.__hd__.inlineLoader.icon.lineHeights[textSizeName];
+  var iconName = getIconName(state);
+  var iconIntent = getIconIntent(state, intent);
+  var _getIconSize = getIconSize(size),
+    iconSize = _getIconSize.size,
+    styleFontSize = _getIconSize.styleFontSize;
+  var iconStyle = styleFontSize ? {
+    fontSize: styleFontSize
+  } : undefined;
+  var isAiLoading = state === 'loading' && intent === 'ai';
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer, {
+    testID: testID,
+    style: style
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer, {
+    themeSize: textSizeName
+  }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    icon: iconName,
+    intent: iconIntent,
+    size: iconSize,
+    spin: state === 'loading',
+    style: iconStyle,
+    accessible: false,
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants"
+  })), isAiLoading ? /*#__PURE__*/React__namespace.default.createElement(AnimatedGradientText, {
+    fontSize: size,
+    lineHeight: lineHeight
+  }, text) : /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+    intent: "body",
+    style: {
+      fontSize: size,
+      lineHeight: lineHeight
+    }
+  }, text));
+};
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AppCue = AppCue;
@@ -42299,6 +42549,7 @@ exports.Icon = Icon;
 exports.Illustration = Illustration;
 exports.IllustrationList = IllustrationList;
 exports.Image = Image;
+exports.InlineLoader = InlineLoader;
 exports.List = List$1;
 exports.LocaleProvider = LocaleProvider;
 exports.MapPin = index$6;

package/package.json

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

package/src/components/Avatar/Avatar.tsx

@@ -26,9 +26,9 @@ export interface AvatarProps extends ViewProps {
    */
   title?: string;
   /**
-   * Intent of the Icon.
+   * Visual intent of the Avatar. Defaults to `'neutral'`.
    */
-  intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
+  intent?: 'neutral' | 'primary' | 'info' | 'danger' | 'success' | 'warning';
   /**
    * Size of the avatar.
    */
@@ -58,7 +58,7 @@ const Avatar = ({
   style,
   title,
   size = 'small',
-  intent = 'primary',
+  intent = 'neutral',
 }: AvatarProps) => {
   const [hasImageError, setHasImageError] = useState(false);
 

package/src/components/Avatar/StyledAvatar.tsx

@@ -12,7 +12,13 @@ type ThemeSize =
   | 'xxxlarge'
   | 'xxxxlarge'
   | 'xxxxxlarge';
-type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+type ThemeIntent =
+  | 'neutral'
+  | 'primary'
+  | 'info'
+  | 'danger'
+  | 'success'
+  | 'warning';
 
 const StyledWrapper = styled(TouchableOpacity)<{
   themeSize: ThemeSize;