@hero-design/rn-work-uikit 1.12.5 → 1.13.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @hero-design/rn-work-uikit
 
+## 1.13.1
+
+### Patch Changes
+
+- Updated dependencies [[`65005affb073e5de21dbe2511a8ef42251aa21ca`](https://github.com/Thinkei/hero-design/commit/65005affb073e5de21dbe2511a8ef42251aa21ca)]:
+  - @hero-design/rn@8.123.0
+
+## 1.13.0
+
+### Minor Changes
+
+- [#4992](https://github.com/Thinkei/hero-design/pull/4992) [`87bd2b334180c9908328a7cdd2e686694dae1d7d`](https://github.com/Thinkei/hero-design/commit/87bd2b334180c9908328a7cdd2e686694dae1d7d) Thanks [@haudao-eh](https://github.com/haudao-eh)! - [Avatar] Add `neutral` intent to Avatar. `neutral` is now the default intent, replacing `primary`.
+
+  **Note:** Any Avatar rendered without an explicit `intent` prop will now
+  display a teal-grey background instead of dark purple. Add `intent="primary"`
+  to preserve the previous appearance.
+
+### Patch Changes
+
+- Updated dependencies [[`87bd2b334180c9908328a7cdd2e686694dae1d7d`](https://github.com/Thinkei/hero-design/commit/87bd2b334180c9908328a7cdd2e686694dae1d7d)]:
+  - @hero-design/rn@8.122.0
+
 ## 1.12.5
 
 ### Patch Changes

package/es/index.js

@@ -5924,6 +5924,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,
@@ -8037,6 +8038,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$1 = 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;
@@ -8098,6 +8116,7 @@ var getTheme$1 = function getTheme() {
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
       floatingIsland: getFloatingIslandTheme(globalTheme),
+      inlineLoader: getInlineLoaderTheme(globalTheme),
       segmentedControl: getSegmentedControlTheme(globalTheme)
     }
   });
@@ -10286,7 +10305,7 @@ var Box = function Box(_ref) {
   }), children);
 };
 
-var StyledContainer$a = index$c(View)(function (_ref) {
+var StyledContainer$b = index$c(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: '100%',
@@ -10675,7 +10694,7 @@ var TextInput$1 = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     defaultValue: defaultValue,
     placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE$1
   });
-  return /*#__PURE__*/React__default.createElement(StyledContainer$a, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$b, {
     style: styleWithoutBackgroundColor,
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID
@@ -14227,7 +14246,7 @@ function ContentNavigator(_ref) {
   }));
 }
 
-var StyledContainer$9 = index$c(View)(function (_ref) {
+var StyledContainer$a = index$c(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.calendar.colors.background
@@ -14669,7 +14688,7 @@ var CalendarRange = function CalendarRange(_ref) {
       textIntent: isCurrentMonth ? undefined : 'subdued'
     });
   };
-  return /*#__PURE__*/React__default.createElement(StyledContainer$9, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$a, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default.createElement(ContentNavigator, {
     value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__default.createElement(TouchableOpacity, {
@@ -14803,7 +14822,7 @@ var Calendar$1 = function Calendar(_ref) {
     monthPickerVisible = _useState2[0],
     setMonthPickerVisible = _useState2[1];
   var now = new Date();
-  return /*#__PURE__*/React__default.createElement(StyledContainer$9, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$a, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default.createElement(ContentNavigator, {
     value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__default.createElement(TouchableOpacity, {
@@ -15785,7 +15804,7 @@ var StyledContent$1 = index$c(View)(function (_ref) {
     alignSelf: 'center'
   };
 });
-var StyledContainer$8 = index$c(View)(function (_ref2) {
+var StyledContainer$9 = index$c(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     width: '100%',
@@ -15793,7 +15812,7 @@ var StyledContainer$8 = index$c(View)(function (_ref2) {
     backgroundColor: theme.__hd__.appCue.colors.backdropColor
   };
 });
-var StyledIconContainer$1 = index$c(Animated.View)(function (_ref3) {
+var StyledIconContainer$2 = index$c(Animated.View)(function (_ref3) {
   var theme = _ref3.theme,
     themePlacement = _ref3.themePlacement;
   return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
@@ -16109,7 +16128,7 @@ var AppCue = function AppCue(_ref) {
     onPress: function onPress() {
       return setVisible(false);
     }
-  }, /*#__PURE__*/React__default.createElement(StyledContainer$8, null, /*#__PURE__*/React__default.createElement(View, {
+  }, /*#__PURE__*/React__default.createElement(StyledContainer$9, null, /*#__PURE__*/React__default.createElement(View, {
     style: StyleSheet$1.flatten([{
       position: 'absolute',
       top: pos.top,
@@ -16124,7 +16143,7 @@ var AppCue = function AppCue(_ref) {
       maxWidth: maxWidth
     },
     testID: testID && "".concat(testID, "-content")
-  }, renderContent()), /*#__PURE__*/React__default.createElement(StyledIconContainer$1, {
+  }, renderContent()), /*#__PURE__*/React__default.createElement(StyledIconContainer$2, {
     themePlacement: placement,
     testID: testID && "".concat(testID, "-arrow")
   }, /*#__PURE__*/React__default.createElement(Icon, {
@@ -16133,7 +16152,7 @@ var AppCue = function AppCue(_ref) {
   })))))));
 };
 
-var StyledContainer$7 = index$c(View)({
+var StyledContainer$8 = index$c(View)({
   alignItems: 'center',
   flexDirection: 'row'
 });
@@ -16175,7 +16194,7 @@ var Attachment = function Attachment(_ref) {
     backgroundHighlighted = _ref$backgroundHighli === void 0 ? false : _ref$backgroundHighli,
     style = _ref.style,
     testID = _ref.testID;
-  return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$8, {
     testID: testID,
     style: style
   }, /*#__PURE__*/React__default.createElement(StyledContentContainer, {
@@ -16263,7 +16282,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     hasImageError = _useState2[0],
@@ -22756,7 +22775,7 @@ Object.assign(PublicDatePicker, {
 });
 
 var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-var StyledContainer$6 = index$c(View)(function (_ref) {
+var StyledContainer$7 = index$c(View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -23021,7 +23040,7 @@ var Drawer = function Drawer(_ref) {
       return animation.stop();
     };
   }, [visible]);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$6, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
     testID: testID,
     enableShadow: enableShadow,
     pointerEvents: "box-none"
@@ -25015,7 +25034,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,
@@ -25059,7 +25078,7 @@ var ActionItem = function ActionItem(_ref) {
     style: style,
     onPress: onPress,
     testID: testID
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledIcon$3, {
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer$1, null, /*#__PURE__*/React__default.createElement(StyledIcon$3, {
     size: "xsmall",
     icon: icon
   })), /*#__PURE__*/React__default.createElement(StyledActionItemText, null, title))));
@@ -25108,14 +25127,14 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
     animated = _ref.animated,
     active = _ref.active;
   if (animated) {
-    return /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(AnimatedFABIcon, {
+    return /*#__PURE__*/React__default.createElement(StyledIconContainer$1, null, /*#__PURE__*/React__default.createElement(AnimatedFABIcon, {
       active: active,
       icon: icon,
       testID: "animated-fab-icon",
       size: "xsmall"
     }));
   }
-  return /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledFABIcon, {
+  return /*#__PURE__*/React__default.createElement(StyledIconContainer$1, null, /*#__PURE__*/React__default.createElement(StyledFABIcon, {
     size: "xsmall",
     icon: icon,
     testID: "styled-fab-icon"
@@ -25124,7 +25143,7 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
 var IconWithTextContent = function IconWithTextContent(_ref2) {
   var icon = _ref2.icon,
     title = _ref2.title;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer, null, /*#__PURE__*/React__default.createElement(StyledFABIcon, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledIconContainer$1, null, /*#__PURE__*/React__default.createElement(StyledFABIcon, {
     size: "xsmall",
     icon: icon,
     testID: "styled-fab-icon"
@@ -25282,7 +25301,7 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
 });
 FAB$1.displayName = 'FAB';
 
-var StyledContainer$5 = index$c(View)({
+var StyledContainer$6 = index$c(View)({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -25389,7 +25408,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  return /*#__PURE__*/React__default.createElement(StyledContainer$5, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$6, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -26120,7 +26139,7 @@ var HeroDesignProvider = function HeroDesignProvider(_ref) {
   }, /*#__PURE__*/React__default.createElement(Toast.Provider, null, /*#__PURE__*/React__default.createElement(Portal.Provider, null, children))));
 };
 
-var StyledContainer$4 = index$c(View)(function (_ref) {
+var StyledContainer$5 = index$c(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: theme.__hd__.mapPin.sizes["default"],
@@ -26200,7 +26219,7 @@ var MapPinFocussed = function MapPinFocussed(_ref) {
   var style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$l);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$5, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
   }), /*#__PURE__*/React__default.createElement(StyledFocusIcon, {
@@ -26227,7 +26246,7 @@ var MapPin = function MapPin(_ref) {
     icon = _ref.icon,
     nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   var badgeIcon = getBadgeIconName(state);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$5, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
   }), /*#__PURE__*/React__default.createElement(StyledContent, {
@@ -26510,7 +26529,7 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 });
 PinInput.displayName = 'PinInput';
 
-var StyledContainer$3 = index$c(View)(function (_ref) {
+var StyledContainer$4 = index$c(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     flexDirection: 'row',
@@ -26583,7 +26602,7 @@ var ProgressCircle = function ProgressCircle(_ref) {
   return /*#__PURE__*/React__default.createElement(View, _extends$1({}, nativeProps, {
     testID: testID,
     style: style
-  }), /*#__PURE__*/React__default.createElement(StyledContainer$3, null, /*#__PURE__*/React__default.createElement(Svg, {
+  }), /*#__PURE__*/React__default.createElement(StyledContainer$4, null, /*#__PURE__*/React__default.createElement(Svg, {
     width: size,
     height: size,
     viewBox: "0 0 ".concat(size, " ").concat(size)
@@ -27566,7 +27585,7 @@ Object.assign(SingleSelect$1, {
   Multi: MultiSelect$1
 });
 
-var StyledContainer$2 = index$c(Box)(function (_ref) {
+var StyledContainer$3 = index$c(Box)(function (_ref) {
   var theme = _ref.theme,
     themeIntent = _ref.themeIntent,
     themeVariant = _ref.themeVariant;
@@ -27652,7 +27671,7 @@ var Skeleton = function Skeleton(_ref) {
     }
     onLayout === null || onLayout === void 0 || onLayout(e);
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$2, _extends$1({
+  return /*#__PURE__*/React__default.createElement(StyledContainer$3, _extends$1({
     style: style,
     themeVariant: variant,
     themeIntent: intent,
@@ -41438,7 +41457,7 @@ var RichTextEditor$1 = function RichTextEditor(_ref) {
     onBlur === null || onBlur === void 0 || onBlur();
     setIsFocused(false);
   }, [onBlur]);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$a, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$b, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
     themeHasPrefix: false,
@@ -41700,7 +41719,7 @@ function SectionListWithFAB(_ref) {
   });
 }
 
-var StyledContainer$1 = index$c(View)(function () {
+var StyledContainer$2 = index$c(View)(function () {
   return {
     width: '100%'
   };
@@ -41805,7 +41824,7 @@ var SearchTwoLine = function SearchTwoLine(props) {
     _props$variant = props.variant,
     variant = _props$variant === void 0 ? 'basic' : _props$variant,
     accessible = props.accessible;
-  return /*#__PURE__*/React__default.createElement(StyledContainer$1, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$2, {
     style: style,
     testID: testID,
     accessible: accessible
@@ -41922,7 +41941,7 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
     }));
   };
   var shouldShowClearButton = clearable && (state === 'filled' || isFocused) && !isEmptyValue;
-  return /*#__PURE__*/React__default.createElement(StyledContainer$1, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$2, {
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID,
     style: style,
@@ -42379,6 +42398,238 @@ 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 = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var animatedValue = useRef(new Animated.Value(0));
+  var onLayout = 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
+      };
+    });
+  }, []);
+  useEffect(function () {
+    if (!size) return;
+    animatedValue.current.setValue(0);
+    var animation = Animated.loop(Animated.timing(animatedValue.current, {
+      toValue: 1,
+      duration: ANIMATION_DURATION_MS,
+      easing: Easing.linear,
+      useNativeDriver: 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__default.createElement(View, null, /*#__PURE__*/React__default.createElement(MaskedView, {
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    maskElement: /*#__PURE__*/React__default.createElement(View, {
+      onLayout: onLayout,
+      style: {
+        backgroundColor: 'transparent'
+      },
+      testID: "animated-gradient-text-mask"
+    }, /*#__PURE__*/React__default.createElement(Typography.Body, {
+      intent: "body",
+      style: {
+        fontSize: fontSize,
+        lineHeight: lineHeight
+      }
+    }, children))
+  }, size ? /*#__PURE__*/React__default.createElement(View, {
+    style: {
+      width: size.width,
+      height: size.height,
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React__default.createElement(Animated.View, {
+    style: {
+      width: size.width * 2,
+      height: size.height,
+      transform: [{
+        translateX: translateX
+      }]
+    }
+  }, /*#__PURE__*/React__default.createElement(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__default.createElement(Typography.Body, {
+    intent: "body",
+    style: {
+      fontSize: fontSize,
+      lineHeight: lineHeight
+    }
+  }, children)), /*#__PURE__*/React__default.createElement(View, {
+    style: {
+      position: 'absolute',
+      opacity: 0
+    },
+    importantForAccessibility: "yes",
+    accessibilityElementsHidden: false
+  }, /*#__PURE__*/React__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$1 = index$c(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: theme.__hd__.inlineLoader.space.gap
+  };
+});
+var StyledIconContainer = index$c(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__default.createElement(StyledContainer$1, {
+    testID: testID,
+    style: style
+  }, /*#__PURE__*/React__default.createElement(StyledIconContainer, {
+    themeSize: textSizeName
+  }, /*#__PURE__*/React__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__default.createElement(AnimatedGradientText, {
+    fontSize: size,
+    lineHeight: lineHeight
+  }, text) : /*#__PURE__*/React__default.createElement(Typography.Body, {
+    intent: "body",
+    style: {
+      fontSize: size,
+      lineHeight: lineHeight
+    }
+  }, text));
+};
+
 var getZIndexByState = function getZIndexByState(_ref) {
   var themeFocused = _ref.themeFocused,
     themeHasError = _ref.themeHasError;
@@ -55658,4 +55909,4 @@ var index = Object.assign(RichTextEditorWithRef, {
   Base: RichTextEditorInput
 });
 
-export { Accordion, Alert, AppCue, Attachment, index$b as Avatar, Badge, BottomNavigation, BottomSheet, Box, CompoundButton as Button, Calendar, Card, index$a as Carousel, Chart, index$9 as Checkbox, Chip, Collapse, ContentNavigator, index$1 as DatePicker, Divider, index$8 as Drawer, Empty, ErrorComponent as Error, FAB, FilterTrigger, FlatListWithFAB, FloatingIsland, FormGroup, HeroDesignProvider, Icon, Illustration, IllustrationList, Image, List$1 as List, LocaleProvider, index$7 as MapPin, PageControl, PinInput, Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, SegmentedControl, index$2 as Select, Skeleton, Slider, Spinner, Success, index$6 as Swipeable, index$5 as Switch, index$4 as Tabs, Tag, TextInput, WorkThemeProvider as ThemeProvider, WorkThemeSwitcher as ThemeSwitcher, TimePicker, Toast, index$3 as Toolbar, Typography, eBensSystemPalette, ehJobsSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$c as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useWorkTheme as useTheme, walletSystemPalette, withWorkTheme as withTheme, workSystemPalette };
+export { Accordion, Alert, AppCue, Attachment, index$b as Avatar, Badge, BottomNavigation, BottomSheet, Box, CompoundButton as Button, Calendar, Card, index$a as Carousel, Chart, index$9 as Checkbox, Chip, Collapse, ContentNavigator, index$1 as DatePicker, Divider, index$8 as Drawer, Empty, ErrorComponent as Error, FAB, FilterTrigger, FlatListWithFAB, FloatingIsland, FormGroup, HeroDesignProvider, Icon, Illustration, IllustrationList, Image, InlineLoader, List$1 as List, LocaleProvider, index$7 as MapPin, PageControl, PinInput, Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, SegmentedControl, index$2 as Select, Skeleton, Slider, Spinner, Success, index$6 as Swipeable, index$5 as Switch, index$4 as Tabs, Tag, TextInput, WorkThemeProvider as ThemeProvider, WorkThemeSwitcher as ThemeSwitcher, TimePicker, Toast, index$3 as Toolbar, Typography, eBensSystemPalette, ehJobsSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$c as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useWorkTheme as useTheme, walletSystemPalette, withWorkTheme as withTheme, workSystemPalette };

package/lib/index.js

@@ -5954,6 +5954,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,
@@ -8067,6 +8068,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$1 = 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;
@@ -8128,6 +8146,7 @@ var getTheme$1 = function getTheme() {
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
       floatingIsland: getFloatingIslandTheme(globalTheme),
+      inlineLoader: getInlineLoaderTheme(globalTheme),
       segmentedControl: getSegmentedControlTheme(globalTheme)
     }
   });
@@ -10316,7 +10335,7 @@ var Box = function Box(_ref) {
   }), children);
 };
 
-var StyledContainer$a = index$c(reactNative.View)(function (_ref) {
+var StyledContainer$b = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: '100%',
@@ -10705,7 +10724,7 @@ var TextInput$1 = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     defaultValue: defaultValue,
     placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE$1
   });
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$a, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$b, {
     style: styleWithoutBackgroundColor,
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID
@@ -14257,7 +14276,7 @@ function ContentNavigator(_ref) {
   }));
 }
 
-var StyledContainer$9 = index$c(reactNative.View)(function (_ref) {
+var StyledContainer$a = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.calendar.colors.background
@@ -14699,7 +14718,7 @@ var CalendarRange = function CalendarRange(_ref) {
       textIntent: isCurrentMonth ? undefined : 'subdued'
     });
   };
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$a, {
     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, {
@@ -14833,7 +14852,7 @@ var Calendar = function Calendar(_ref) {
     monthPickerVisible = _useState2[0],
     setMonthPickerVisible = _useState2[1];
   var now = new Date();
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$a, {
     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, {
@@ -15815,7 +15834,7 @@ var StyledContent$1 = index$c(reactNative.View)(function (_ref) {
     alignSelf: 'center'
   };
 });
-var StyledContainer$8 = index$c(reactNative.View)(function (_ref2) {
+var StyledContainer$9 = index$c(reactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     width: '100%',
@@ -15823,7 +15842,7 @@ var StyledContainer$8 = 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({
@@ -16139,7 +16158,7 @@ var AppCue = function AppCue(_ref) {
     onPress: function onPress() {
       return setVisible(false);
     }
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledContainer$8, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     style: reactNative.StyleSheet.flatten([{
       position: 'absolute',
       top: pos.top,
@@ -16154,7 +16173,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, {
@@ -16163,7 +16182,7 @@ var AppCue = function AppCue(_ref) {
   })))))));
 };
 
-var StyledContainer$7 = index$c(reactNative.View)({
+var StyledContainer$8 = index$c(reactNative.View)({
   alignItems: 'center',
   flexDirection: 'row'
 });
@@ -16205,7 +16224,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$7, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$8, {
     testID: testID,
     style: style
   }, /*#__PURE__*/React__namespace.default.createElement(StyledContentContainer, {
@@ -16293,7 +16312,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],
@@ -22786,7 +22805,7 @@ Object.assign(PublicDatePicker, {
 });
 
 var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
-var StyledContainer$6 = index$c(reactNative.View)(function (_ref) {
+var StyledContainer$7 = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
@@ -23051,7 +23070,7 @@ var Drawer = function Drawer(_ref) {
       return animation.stop();
     };
   }, [visible]);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$6, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$7, {
     testID: testID,
     enableShadow: enableShadow,
     pointerEvents: "box-none"
@@ -25045,7 +25064,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,
@@ -25089,7 +25108,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))));
@@ -25138,14 +25157,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"
@@ -25154,7 +25173,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"
@@ -25312,7 +25331,7 @@ var FAB$1 = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
 });
 FAB$1.displayName = 'FAB';
 
-var StyledContainer$5 = index$c(reactNative.View)({
+var StyledContainer$6 = index$c(reactNative.View)({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -25419,7 +25438,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$5, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$6, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -26150,7 +26169,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$4 = index$c(reactNative.View)(function (_ref) {
+var StyledContainer$5 = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: theme.__hd__.mapPin.sizes["default"],
@@ -26230,7 +26249,7 @@ var MapPinFocussed = function MapPinFocussed(_ref) {
   var style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$l);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$5, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
   }), /*#__PURE__*/React__namespace.default.createElement(StyledFocusIcon, {
@@ -26257,7 +26276,7 @@ var MapPin = function MapPin(_ref) {
     icon = _ref.icon,
     nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   var badgeIcon = getBadgeIconName(state);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$5, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
   }), /*#__PURE__*/React__namespace.default.createElement(StyledContent, {
@@ -26540,7 +26559,7 @@ var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 });
 PinInput.displayName = 'PinInput';
 
-var StyledContainer$3 = index$c(reactNative.View)(function (_ref) {
+var StyledContainer$4 = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme;
   return {
     flexDirection: 'row',
@@ -26613,7 +26632,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$3, null, /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
+  }), /*#__PURE__*/React__namespace.default.createElement(StyledContainer$4, null, /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
     width: size,
     height: size,
     viewBox: "0 0 ".concat(size, " ").concat(size)
@@ -27596,7 +27615,7 @@ Object.assign(SingleSelect$1, {
   Multi: MultiSelect$1
 });
 
-var StyledContainer$2 = index$c(Box)(function (_ref) {
+var StyledContainer$3 = index$c(Box)(function (_ref) {
   var theme = _ref.theme,
     themeIntent = _ref.themeIntent,
     themeVariant = _ref.themeVariant;
@@ -27682,7 +27701,7 @@ var Skeleton = function Skeleton(_ref) {
     }
     onLayout === null || onLayout === void 0 || onLayout(e);
   }, []);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$2, _extends$1({
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$3, _extends$1({
     style: style,
     themeVariant: variant,
     themeIntent: intent,
@@ -41468,7 +41487,7 @@ var RichTextEditor$1 = function RichTextEditor(_ref) {
     onBlur === null || onBlur === void 0 || onBlur();
     setIsFocused(false);
   }, [onBlur]);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$a, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$b, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(StyledLabelContainerInsideTextInput, {
     themeHasPrefix: false,
@@ -41730,7 +41749,7 @@ function SectionListWithFAB(_ref) {
   });
 }
 
-var StyledContainer$1 = index$c(reactNative.View)(function () {
+var StyledContainer$2 = index$c(reactNative.View)(function () {
   return {
     width: '100%'
   };
@@ -41835,7 +41854,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$1, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$2, {
     style: style,
     testID: testID,
     accessible: accessible
@@ -41952,7 +41971,7 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }));
   };
   var shouldShowClearButton = clearable && (state === 'filled' || isFocused) && !isEmptyValue;
-  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$1, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$2, {
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID,
     style: style,
@@ -42409,6 +42428,238 @@ 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$1 = 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$1, {
+    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));
+};
+
 var getZIndexByState = function getZIndexByState(_ref) {
   var themeFocused = _ref.themeFocused,
     themeHasError = _ref.themeHasError;
@@ -55721,6 +55972,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$7;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.12.5",
+  "version": "1.13.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "8.121.0",
+    "@hero-design/rn": "8.123.0",
     "hero-editor": "^1.17.0"
   },
   "peerDependencies": {