@hero-design/rn-work-uikit 1.13.0 → 1.13.2-test-dispatch-downstream.0

package/CHANGELOG.md

@@ -1,35 +1,44 @@
 # @hero-design/rn-work-uikit
 
-## 1.13.0
+## 1.13.2-test-dispatch-downstream.0
 
-### Minor Changes
+### Patch Changes
+
+- test
 
-- [#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`.
+- Updated dependencies []:
+  - @hero-design/react-native-month-year-picker@8.45.3-test-dispatch-downstream.0
+  - @hero-design/rn@8.123.1-test-dispatch-downstream.0
 
-  **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.
+## 1.12.4-test-dispatch-downstream.2
 
 ### Patch Changes
 
-- Updated dependencies [[`87bd2b334180c9908328a7cdd2e686694dae1d7d`](https://github.com/Thinkei/hero-design/commit/87bd2b334180c9908328a7cdd2e686694dae1d7d)]:
-  - @hero-design/rn@8.122.0
+- test dispatch workflow
 
-## 1.12.5
+- Updated dependencies []:
+  - @hero-design/react-native-month-year-picker@8.45.3-test-dispatch-downstream.2
+  - @hero-design/rn@8.120.2-test-dispatch-downstream.2
+
+## 1.12.4-test-dispatch-downstream.1
 
 ### Patch Changes
 
-- [#4963](https://github.com/Thinkei/hero-design/pull/4963) [`8921509e3c0271abe2c0df377316fc5ded154a05`](https://github.com/Thinkei/hero-design/commit/8921509e3c0271abe2c0df377316fc5ded154a05) Thanks [@ttkien](https://github.com/ttkien)! - [Icon] add 'ai' intent
+- test
 
-- Updated dependencies [[`4caa323ce232ef982bab8e3845aadc6b493a3804`](https://github.com/Thinkei/hero-design/commit/4caa323ce232ef982bab8e3845aadc6b493a3804), [`8921509e3c0271abe2c0df377316fc5ded154a05`](https://github.com/Thinkei/hero-design/commit/8921509e3c0271abe2c0df377316fc5ded154a05), [`654135e5178e2ab74dc6e9d80edb7bdab60275d7`](https://github.com/Thinkei/hero-design/commit/654135e5178e2ab74dc6e9d80edb7bdab60275d7)]:
-  - @hero-design/rn@8.121.0
+- Updated dependencies []:
+  - @hero-design/react-native-month-year-picker@8.45.3-test-dispatch-downstream.1
+  - @hero-design/rn@8.120.2-test-dispatch-downstream.1
 
-## 1.12.4
+## 1.12.4-test-dispatch-downstream.0
 
 ### Patch Changes
 
-- Updated dependencies [[`78197ad0e210611eedab518bf088e7ee1c872fc3`](https://github.com/Thinkei/hero-design/commit/78197ad0e210611eedab518bf088e7ee1c872fc3)]:
-  - @hero-design/rn@8.120.2
+- bump test version
+
+- Updated dependencies []:
+  - @hero-design/react-native-month-year-picker@8.45.3-test-dispatch-downstream.0
+  - @hero-design/rn@8.120.2-test-dispatch-downstream.0
 
 ## 1.12.3
 

package/es/index.js

@@ -8038,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;
@@ -8099,6 +8116,7 @@ var getTheme$1 = function getTheme() {
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
       floatingIsland: getFloatingIslandTheme(globalTheme),
+      inlineLoader: getInlineLoaderTheme(globalTheme),
       segmentedControl: getSegmentedControlTheme(globalTheme)
     }
   });
@@ -10287,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%',
@@ -10676,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
@@ -14228,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
@@ -14670,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, {
@@ -14804,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, {
@@ -15786,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%',
@@ -15794,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({
@@ -16110,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,
@@ -16125,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, {
@@ -16134,7 +16152,7 @@ var AppCue = function AppCue(_ref) {
   })))))));
 };
 
-var StyledContainer$7 = index$c(View)({
+var StyledContainer$8 = index$c(View)({
   alignItems: 'center',
   flexDirection: 'row'
 });
@@ -16176,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, {
@@ -22757,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), {}, {
@@ -23022,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"
@@ -25016,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,
@@ -25060,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))));
@@ -25109,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"
@@ -25125,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"
@@ -25283,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,
@@ -25390,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
@@ -26121,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"],
@@ -26201,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, {
@@ -26228,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, {
@@ -26511,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',
@@ -26584,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)
@@ -27567,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;
@@ -27653,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,
@@ -41439,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,
@@ -41701,7 +41719,7 @@ function SectionListWithFAB(_ref) {
   });
 }
 
-var StyledContainer$1 = index$c(View)(function () {
+var StyledContainer$2 = index$c(View)(function () {
   return {
     width: '100%'
   };
@@ -41806,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
@@ -41923,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,
@@ -42380,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;
@@ -55659,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

@@ -8068,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;
@@ -8129,6 +8146,7 @@ var getTheme$1 = function getTheme() {
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
       floatingIsland: getFloatingIslandTheme(globalTheme),
+      inlineLoader: getInlineLoaderTheme(globalTheme),
       segmentedControl: getSegmentedControlTheme(globalTheme)
     }
   });
@@ -10317,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%',
@@ -10706,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
@@ -14258,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
@@ -14700,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, {
@@ -14834,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, {
@@ -15816,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%',
@@ -15824,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({
@@ -16140,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,
@@ -16155,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, {
@@ -16164,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'
 });
@@ -16206,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, {
@@ -22787,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), {}, {
@@ -23052,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"
@@ -25046,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,
@@ -25090,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))));
@@ -25139,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"
@@ -25155,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"
@@ -25313,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,
@@ -25420,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
@@ -26151,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"],
@@ -26231,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, {
@@ -26258,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, {
@@ -26541,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',
@@ -26614,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)
@@ -27597,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;
@@ -27683,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,
@@ -41469,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,
@@ -41731,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%'
   };
@@ -41836,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
@@ -41953,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,
@@ -42410,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;
@@ -55722,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.13.0",
+  "version": "1.13.2-test-dispatch-downstream.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,11 +23,11 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "8.122.0",
+    "@hero-design/rn": "8.123.1-test-dispatch-downstream.0",
     "hero-editor": "^1.17.0"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.45.2",
+    "@hero-design/react-native-month-year-picker": "^8.45.3-test-dispatch-downstream.0",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "^8.4.4",
     "@react-native-community/slider": " ^5.0.1",
@@ -55,8 +55,8 @@
     "@eslint/compat": "^1.1.1",
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
-    "@hero-design/eslint-plugin": "9.2.3",
-    "@hero-design/react-native-month-year-picker": "^8.45.2",
+    "@hero-design/eslint-plugin": "9.2.4-test-dispatch-downstream.0",
+    "@hero-design/react-native-month-year-picker": "^8.45.3-test-dispatch-downstream.0",
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "8.4.4",
     "@react-native-community/slider": "^5.0.1",
@@ -80,12 +80,12 @@
     "babel-plugin-module-resolver": "^5.0.2",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
-    "eslint-config-hd": "8.42.5",
+    "eslint-config-hd": "8.42.6-test-dispatch-downstream.0",
     "expo-linear-gradient": "55.0.9",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.42.4",
+    "prettier-config-hd": "8.42.5-test-dispatch-downstream.0",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",