@hero-design/rn 8.122.0 → 8.123.0

package/lib/index.js

@@ -7916,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;
@@ -7977,6 +7994,7 @@ var getTheme = function getTheme() {
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
       floatingIsland: getFloatingIslandTheme(globalTheme),
+      inlineLoader: getInlineLoaderTheme(globalTheme),
       segmentedControl: getSegmentedControlTheme(globalTheme)
     }
   });
@@ -9427,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%',
@@ -9435,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({
@@ -9750,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,
@@ -9765,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, {
@@ -9774,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'
 });
@@ -9816,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, {
@@ -13938,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
@@ -14373,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, {
@@ -14507,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, {
@@ -20655,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%',
@@ -21043,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
@@ -21723,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), {}, {
@@ -21983,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"
@@ -23974,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,
@@ -24018,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))));
@@ -24067,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"
@@ -24083,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"
@@ -24241,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,
@@ -24348,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
@@ -25079,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"],
@@ -25159,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, {
@@ -25186,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, {
@@ -25468,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',
@@ -25540,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)
@@ -27274,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;
@@ -27360,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,
@@ -41335,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,
@@ -41589,7 +41607,7 @@ function SectionListWithFAB(_ref) {
   });
 }
 
-var StyledContainer = index$c(reactNative.View)(function () {
+var StyledContainer$1 = index$c(reactNative.View)(function () {
   return {
     width: '100%'
   };
@@ -41694,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
@@ -41811,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,
@@ -42268,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;
@@ -42300,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.122.0",
+  "version": "8.123.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/InlineLoader/AnimatedGradientText.tsx

@@ -0,0 +1,135 @@
+import MaskedView from '@react-native-masked-view/masked-view';
+import { LinearGradient } from 'expo-linear-gradient';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { LayoutChangeEvent } from 'react-native';
+import { Animated, Easing, Platform, View } from 'react-native';
+import { useTheme } from '../../theme';
+import Typography from '../Typography';
+
+interface AnimatedGradientTextProps {
+  children: string;
+  fontSize: number;
+  lineHeight: number;
+}
+
+const ANIMATION_DURATION_MS = 2000;
+
+const AnimatedGradientText = ({
+  children,
+  fontSize,
+  lineHeight,
+}: AnimatedGradientTextProps) => {
+  const theme = useTheme();
+  const gradient = theme.colors.gradients.aiHorizontal;
+
+  const [size, setSize] = useState<{ width: number; height: number } | null>(
+    null
+  );
+  const animatedValue = useRef(new Animated.Value(0));
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width, height } = event.nativeEvent.layout;
+    setSize((prev) => {
+      if (prev?.width === width && prev?.height === height) return prev;
+      return { width, height };
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!size) return;
+    animatedValue.current.setValue(0);
+    const animation = Animated.loop(
+      Animated.timing(animatedValue.current, {
+        toValue: 1,
+        duration: ANIMATION_DURATION_MS,
+        easing: Easing.linear,
+        useNativeDriver: Platform.OS !== 'web',
+      })
+    );
+    animation.start();
+    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.
+  const translateX = size
+    ? animatedValue.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, -size.width],
+      })
+    : animatedValue.current;
+
+  return (
+    <View>
+      <MaskedView
+        accessibilityElementsHidden
+        importantForAccessibility="no-hide-descendants"
+        maskElement={
+          <View
+            onLayout={onLayout}
+            style={{ backgroundColor: 'transparent' }}
+            testID="animated-gradient-text-mask"
+          >
+            <Typography.Body intent="body" style={{ fontSize, lineHeight }}>
+              {children}
+            </Typography.Body>
+          </View>
+        }
+      >
+        {size ? (
+          <View
+            style={{
+              width: size.width,
+              height: size.height,
+              overflow: 'hidden',
+            }}
+          >
+            {/*
+             * Double the colour pattern so the gradient tiles seamlessly:
+             * [A, B, A, B, A] at equal spacing means the slice at
+             * translateX=0 looks identical to the slice at translateX=-width,
+             * eliminating the jump when the loop restarts.
+             */}
+            <Animated.View
+              style={{
+                width: size.width * 2,
+                height: size.height,
+                transform: [{ translateX }],
+              }}
+            >
+              <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%' }}
+              />
+            </Animated.View>
+          </View>
+        ) : (
+          <Typography.Body intent="body" style={{ fontSize, lineHeight }}>
+            {children}
+          </Typography.Body>
+        )}
+      </MaskedView>
+      {/* Visually hidden but accessible text for screen readers */}
+      <View
+        style={{ position: 'absolute', opacity: 0 }}
+        importantForAccessibility="yes"
+        accessibilityElementsHidden={false}
+      >
+        <Typography.Body intent="body" style={{ fontSize, lineHeight }}>
+          {children}
+        </Typography.Body>
+      </View>
+    </View>
+  );
+};
+
+export default AnimatedGradientText;