@hero-design/rn 8.121.0 → 8.123.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @hero-design/rn
 
+## 8.123.0
+
+### Minor Changes
+
+- [#5000](https://github.com/Thinkei/hero-design/pull/5000) [`65005affb073e5de21dbe2511a8ef42251aa21ca`](https://github.com/Thinkei/hero-design/commit/65005affb073e5de21dbe2511a8ef42251aa21ca) Thanks [@phucdph](https://github.com/phucdph)! - Add `InlineLoader` component for React Native with idle, loading, success, and error states. Supports five text size variants (10–18px), a neutral intent and an AI intent with animated gradient text for the loading state.
+
+## 8.122.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.
+
 ## 8.121.0
 
 ### Minor Changes

package/es/index.js

@@ -5614,6 +5614,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,
@@ -7885,6 +7886,23 @@ var getSegmentedControlTheme = function getSegmentedControlTheme(theme) {
   };
 };
 
+var getInlineLoaderTheme = function getInlineLoaderTheme(theme) {
+  return {
+    space: {
+      gap: theme.space.small
+    },
+    icon: {
+      lineHeights: {
+        xsmall: theme.lineHeights.xsmall,
+        small: theme.lineHeights.small,
+        medium: theme.lineHeights.medium,
+        large: theme.lineHeights.large,
+        xlarge: theme.lineHeights.xlarge
+      }
+    }
+  };
+};
+
 var getTheme = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
   var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$2;
@@ -7946,6 +7964,7 @@ var getTheme = function getTheme() {
       toolbar: getToolbarTheme(globalTheme),
       typography: getTypographyTheme(globalTheme),
       floatingIsland: getFloatingIslandTheme(globalTheme),
+      inlineLoader: getInlineLoaderTheme(globalTheme),
       segmentedControl: getSegmentedControlTheme(globalTheme)
     }
   });
@@ -9396,7 +9415,7 @@ var StyledContent$1 = index$c(View)(function (_ref) {
     alignSelf: 'center'
   };
 });
-var StyledContainer$9 = index$c(View)(function (_ref2) {
+var StyledContainer$a = index$c(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     width: '100%',
@@ -9404,7 +9423,7 @@ var StyledContainer$9 = 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({
@@ -9719,7 +9738,7 @@ var AppCue = function AppCue(_ref) {
     onPress: function onPress() {
       return setVisible(false);
     }
-  }, /*#__PURE__*/React__default.createElement(StyledContainer$9, null, /*#__PURE__*/React__default.createElement(View, {
+  }, /*#__PURE__*/React__default.createElement(StyledContainer$a, null, /*#__PURE__*/React__default.createElement(View, {
     style: StyleSheet$1.flatten([{
       position: 'absolute',
       top: pos.top,
@@ -9734,7 +9753,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, {
@@ -9743,7 +9762,7 @@ var AppCue = function AppCue(_ref) {
   })))))));
 };
 
-var StyledContainer$8 = index$c(View)({
+var StyledContainer$9 = index$c(View)({
   alignItems: 'center',
   flexDirection: 'row'
 });
@@ -9785,7 +9804,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$8, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$9, {
     testID: testID,
     style: style
   }, /*#__PURE__*/React__default.createElement(StyledContentContainer$1, {
@@ -9873,7 +9892,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],
@@ -13907,7 +13926,7 @@ function ContentNavigator(_ref) {
   }));
 }
 
-var StyledContainer$7 = index$c(View)(function (_ref) {
+var StyledContainer$8 = index$c(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.calendar.colors.background
@@ -14342,7 +14361,7 @@ var CalendarRange = function CalendarRange(_ref) {
       textIntent: isCurrentMonth ? undefined : 'subdued'
     });
   };
-  return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$8, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default.createElement(ContentNavigator, {
     value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__default.createElement(TouchableOpacity, {
@@ -14476,7 +14495,7 @@ var Calendar$1 = function Calendar(_ref) {
     monthPickerVisible = _useState2[0],
     setMonthPickerVisible = _useState2[1];
   var now = new Date();
-  return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$8, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default.createElement(ContentNavigator, {
     value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__default.createElement(TouchableOpacity, {
@@ -20624,7 +20643,7 @@ var index$9 = Object.assign(DefaultCheckbox, {
   Inline: InlineCheckbox
 });
 
-var StyledContainer$6 = index$c(View)(function (_ref) {
+var StyledContainer$7 = index$c(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: '100%',
@@ -21012,7 +21031,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     defaultValue: defaultValue,
     placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
   });
-  return /*#__PURE__*/React__default.createElement(StyledContainer$6, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
     style: styleWithoutBackgroundColor,
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID
@@ -21692,7 +21711,7 @@ var index$8 = Object.assign(PublicDatePicker, {
 });
 
 var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-var StyledContainer$5 = index$c(View)(function (_ref) {
+var StyledContainer$6 = index$c(View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -21952,7 +21971,7 @@ var Drawer = function Drawer(_ref) {
       return animation.stop();
     };
   }, [visible]);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$5, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$6, {
     testID: testID,
     enableShadow: enableShadow,
     pointerEvents: "box-none"
@@ -23943,7 +23962,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,
@@ -23987,7 +24006,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))));
@@ -24036,14 +24055,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"
@@ -24052,7 +24071,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"
@@ -24210,7 +24229,7 @@ var FAB$1 = /*#__PURE__*/forwardRef(function (_ref3, ref) {
 });
 FAB$1.displayName = 'FAB';
 
-var StyledContainer$4 = index$c(View)({
+var StyledContainer$5 = index$c(View)({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -24317,7 +24336,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  return /*#__PURE__*/React__default.createElement(StyledContainer$4, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$5, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -25048,7 +25067,7 @@ var HeroDesignProvider = function HeroDesignProvider(_ref) {
   }, /*#__PURE__*/React__default.createElement(Toast.Provider, null, /*#__PURE__*/React__default.createElement(Portal.Provider, null, children))));
 };
 
-var StyledContainer$3 = index$c(View)(function (_ref) {
+var StyledContainer$4 = index$c(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: theme.__hd__.mapPin.sizes["default"],
@@ -25128,7 +25147,7 @@ var MapPinFocussed = function MapPinFocussed(_ref) {
   var style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$o);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$3, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
   }), /*#__PURE__*/React__default.createElement(StyledFocusIcon, {
@@ -25155,7 +25174,7 @@ var MapPin = function MapPin(_ref) {
     icon = _ref.icon,
     nativeProps = _objectWithoutProperties(_ref, _excluded$n);
   var badgeIcon = getBadgeIconName(state);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$3, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$4, _extends$1({}, nativeProps, {
     style: style,
     testID: testID
   }), /*#__PURE__*/React__default.createElement(StyledContent, {
@@ -25437,7 +25456,7 @@ var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 });
 PinInput.displayName = 'PinInput';
 
-var StyledContainer$2 = index$c(View)(function (_ref) {
+var StyledContainer$3 = index$c(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     flexDirection: 'row',
@@ -25509,7 +25528,7 @@ var ProgressCircle = function ProgressCircle(_ref) {
   return /*#__PURE__*/React__default.createElement(View, _extends$1({}, nativeProps, {
     testID: testID,
     style: style
-  }), /*#__PURE__*/React__default.createElement(StyledContainer$2, null, /*#__PURE__*/React__default.createElement(Svg, {
+  }), /*#__PURE__*/React__default.createElement(StyledContainer$3, null, /*#__PURE__*/React__default.createElement(Svg, {
     width: size,
     height: size,
     viewBox: "0 0 ".concat(size, " ").concat(size)
@@ -27243,7 +27262,7 @@ var index$4 = Object.assign(SingleSelect, {
   Multi: MultiSelect
 });
 
-var StyledContainer$1 = index$c(Box)(function (_ref) {
+var StyledContainer$2 = index$c(Box)(function (_ref) {
   var theme = _ref.theme,
     themeIntent = _ref.themeIntent,
     themeVariant = _ref.themeVariant;
@@ -27329,7 +27348,7 @@ var Skeleton = function Skeleton(_ref) {
     }
     onLayout === null || onLayout === void 0 || onLayout(e);
   }, []);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$1, _extends$1({
+  return /*#__PURE__*/React__default.createElement(StyledContainer$2, _extends$1({
     style: style,
     themeVariant: variant,
     themeIntent: intent,
@@ -41304,7 +41323,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
     onBlur === null || onBlur === void 0 || onBlur();
     setIsFocused(false);
   }, [onBlur]);
-  return /*#__PURE__*/React__default.createElement(StyledContainer$6, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledLabelContainerInsideTextInput, {
     themeHasPrefix: false,
@@ -41558,7 +41577,7 @@ function SectionListWithFAB(_ref) {
   });
 }
 
-var StyledContainer = index$c(View)(function () {
+var StyledContainer$1 = index$c(View)(function () {
   return {
     width: '100%'
   };
@@ -41663,7 +41682,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, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$1, {
     style: style,
     testID: testID,
     accessible: accessible
@@ -41780,7 +41799,7 @@ var SearchOneLine = /*#__PURE__*/forwardRef(function (props, ref) {
     }));
   };
   var shouldShowClearButton = clearable && (state === 'filled' || isFocused) && !isEmptyValue;
-  return /*#__PURE__*/React__default.createElement(StyledContainer, {
+  return /*#__PURE__*/React__default.createElement(StyledContainer$1, {
     pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID,
     style: style,
@@ -42237,4 +42256,235 @@ var FilterTrigger = function FilterTrigger(_ref) {
   })));
 };
 
-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$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FilterTrigger, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Illustration, IllustrationList, Image, List$1 as List, LocaleProvider, index$6 as MapPin, PageControl, PinInput, Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, SegmentedControl, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, PublicTimePicker as TimePicker, Toast, index$1 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, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+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 = 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, {
+    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));
+};
+
+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$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FilterTrigger, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Illustration, IllustrationList, Image, InlineLoader, List$1 as List, LocaleProvider, index$6 as MapPin, PageControl, PinInput, Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, SegmentedControl, index$4 as Select, Skeleton, Slider, Spinner, Success, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, PublicTimePicker as TimePicker, Toast, index$1 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, useTheme, walletSystemPalette, withTheme, workSystemPalette };