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

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @hero-design/rn-work-uikit
 
+## 1.12.5
+
+### 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
+
+- 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
+
 ## 1.12.4
 
 ### Patch Changes

package/es/index.js

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import React__default, { useState, useEffect, createContext, useRef, useMemo, useCallback, forwardRef, useContext, useLayoutEffect, memo, useReducer, isValidElement, useImperativeHandle } from 'react';
+import React__default, { useState, useEffect, createContext, useRef, useCallback, useMemo, forwardRef, useContext, useLayoutEffect, memo, useReducer, isValidElement, useImperativeHandle } from 'react';
 import * as reactNative from 'react-native';
 import { Platform, Keyboard, StyleSheet as StyleSheet$1, View, Animated, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableOpacity, Dimensions, Easing, Text as Text$1, TouchableHighlight, ScrollView, Modal as Modal$1, TextInput as TextInput$2, SectionList, UIManager, LayoutAnimation, useWindowDimensions, TouchableWithoutFeedback, Image as Image$1, FlatList, PanResponder, BackHandler, InteractionManager, RefreshControl as RefreshControl$1 } from 'react-native';
 import { createIconSet } from 'react-native-vector-icons';
+import MaskedView from '@react-native-masked-view/masked-view';
+import { LinearGradient } from 'expo-linear-gradient';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import { MonthYearPickerDialogueAndroid, MonthYearPickerViewIOS } from '@hero-design/react-native-month-year-picker';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -10,7 +12,7 @@ import Svg, { G, ForeignObject, Line as Line$1, Path as Path$1, Rect, Mask, Circ
 import RnSlider from '@react-native-community/slider';
 import MultiSlider from '@ptomasroos/react-native-multi-slider';
 import { RectButton, GestureHandlerRootView, Swipeable as Swipeable$1 } from 'react-native-gesture-handler';
-import LinearGradient from 'react-native-linear-gradient';
+import LinearGradient$1 from 'react-native-linear-gradient';
 import PagerView from 'react-native-pager-view';
 import { EventEmitter } from 'events';
 import { WebView } from 'react-native-webview';
@@ -3711,13 +3713,13 @@ var StyledDivider = index$c(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$R = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$T = ["marginHorizontal", "marginVertical", "style", "testID"];
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
     marginVertical = _ref.marginVertical,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$R);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$T);
   return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -5735,6 +5737,77 @@ var getShadows = function getShadows(palette) {
   }
 };
 
+var DIAGONAL_ANGLE = 282;
+var HORIZONTAL_ANGLE = 90;
+var DIAGONAL_LOCATIONS = [0, 0.2931, 0.993];
+var HORIZONTAL_LOCATIONS = [0, 0.25, 0.75];
+
+// Convert CSS gradient angle (degrees) to expo-linear-gradient start/end points.
+// Follows CSS convention: 0° = bottom→top, 90° = left→right,
+// 180° = top→bottom, 270° = right→left.
+var angleToPoints = function angleToPoints(angleDeg) {
+  var rad = (angleDeg - 90) * Math.PI / 180;
+  var x = Math.cos(rad);
+  var y = Math.sin(rad);
+  // Normalize so both components are in [0, 1]
+  var start = {
+    x: Math.round((1 - x) / 2 * 100) / 100,
+    y: Math.round((1 - y) / 2 * 100) / 100
+  };
+  var end = {
+    x: Math.round((1 + x) / 2 * 100) / 100,
+    y: Math.round((1 + y) / 2 * 100) / 100
+  };
+  return {
+    start: start,
+    end: end
+  };
+};
+var getGradients = function getGradients(systemPalette) {
+  var blueMedium = palette$9.blueMedium;
+  var pinkMedium = palette$9.pinkMedium;
+  var brandPrimary = systemPalette.primary;
+  var backgroundFallback = systemPalette.defaultGlobalSurface;
+  return {
+    aiDiagonal: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS
+    }),
+    aiDiagonal8: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.08,
+      backgroundFallback: backgroundFallback
+    }),
+    aiDiagonal16: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.16,
+      backgroundFallback: backgroundFallback
+    }),
+    aiDiagonal24: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.24,
+      backgroundFallback: backgroundFallback
+    }),
+    aiHorizontal: _objectSpread2(_objectSpread2({
+      angle: HORIZONTAL_ANGLE
+    }, angleToPoints(HORIZONTAL_ANGLE)), {}, {
+      colors: [brandPrimary, pinkMedium, brandPrimary],
+      locations: HORIZONTAL_LOCATIONS
+    })
+  };
+};
+
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var fonts = getFonts(scale.font);
   var fontSizes = getFontSizes(scale.fontSize);
@@ -5744,8 +5817,11 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var sizes = getSizes(scale.size);
   var radii = getRadii(scale.radius);
   var shadows = getShadows(systemPalette);
+  var gradients = getGradients(systemPalette);
   return {
-    colors: _objectSpread2({}, systemPalette),
+    colors: _objectSpread2(_objectSpread2({}, systemPalette), {}, {
+      gradients: gradients
+    }),
     fonts: fonts,
     fontSizes: fontSizes,
     lineHeights: lineHeights,
@@ -8084,7 +8160,7 @@ var StyledLoadingDot = index$c(View)(function (_ref) {
   }, themeStyling());
 });
 
-var _excluded$Q = ["count", "size", "testID", "themeVariant"];
+var _excluded$S = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -8116,7 +8192,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$Q);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$S);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -8746,10 +8822,10 @@ var StyledHeroIcon = index$c(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$P = ["style"];
-var AnimatedIcon = function AnimatedIcon(_ref) {
-  var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$P);
+var SpinWrapper = function SpinWrapper(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    testID = _ref.testID;
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -8760,22 +8836,74 @@ var AnimatedIcon = function AnimatedIcon(_ref) {
     }));
     animation.start();
     return function () {
-      animation.stop();
+      return animation.stop();
     };
   }, []);
-  var interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+  var rotate = rotateAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '360deg']
   });
   return /*#__PURE__*/React__default.createElement(Animated.View, {
+    testID: testID,
     style: [{
       transform: [{
-        rotate: interpolatedRotateAnimation
+        rotate: rotate
       }]
     }, style]
+  }, children);
+};
+
+var _excluded$R = ["style"];
+var AnimatedIcon = function AnimatedIcon(_ref) {
+  var style = _ref.style,
+    otherProps = _objectWithoutProperties(_ref, _excluded$R);
+  return /*#__PURE__*/React__default.createElement(SpinWrapper, {
+    style: style
   }, /*#__PURE__*/React__default.createElement(StyledHeroIcon, otherProps));
 };
 
+var _excluded$Q = ["name", "themeSize", "testID", "style"];
+var GradientIcon = function GradientIcon(_ref) {
+  var name = _ref.name,
+    themeSize = _ref.themeSize,
+    testID = _ref.testID,
+    style = _ref.style,
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$Q);
+  var theme = useTheme();
+  var gradient = theme.colors.gradients.aiDiagonal;
+  var size = theme.__hd__.icon.sizes[themeSize];
+  return /*#__PURE__*/React__default.createElement(MaskedView, _extends$1({
+    testID: testID,
+    style: [{
+      width: size,
+      height: size
+    }, style]
+  }, accessibilityProps, {
+    maskElement: /*#__PURE__*/React__default.createElement(View, {
+      style: {
+        backgroundColor: 'transparent',
+        width: size,
+        height: size,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/React__default.createElement(StyledHeroIcon, {
+      name: name,
+      themeIntent: "text",
+      themeSize: themeSize
+    }))
+  }), /*#__PURE__*/React__default.createElement(LinearGradient, {
+    start: gradient.start,
+    end: gradient.end,
+    colors: gradient.colors,
+    locations: gradient.locations,
+    style: {
+      width: size,
+      height: size
+    }
+  }));
+};
+
 var Icon = function Icon(_ref) {
   var icon = _ref.icon,
     style = _ref.style,
@@ -8811,6 +8939,20 @@ var Icon = function Icon(_ref) {
     accessibilityViewIsModal: accessibilityViewIsModal,
     accessibilityActions: accessibilityActions
   };
+  if (intent === 'ai') {
+    var gradientIcon = /*#__PURE__*/React__default.createElement(GradientIcon, _extends$1({
+      name: icon,
+      themeSize: size,
+      testID: testID,
+      style: spin ? undefined : style
+    }, accessibilityProps));
+    if (spin) {
+      return /*#__PURE__*/React__default.createElement(SpinWrapper, {
+        style: style
+      }, gradientIcon);
+    }
+    return gradientIcon;
+  }
   return spin ? /*#__PURE__*/React__default.createElement(AnimatedIcon, _extends$1({
     name: icon,
     themeIntent: intent,
@@ -8849,7 +8991,7 @@ var StyledText$4 = index$c(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$O = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$P = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 /**
  * @deprecated Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.
  */
@@ -8865,7 +9007,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$O);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$P);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React__default.createElement(StyledText$4, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -8898,7 +9040,79 @@ var StyledCaption = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$N = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle"];
+var ACCESSIBILITY_KEYS = ['accessible', 'accessibilityActions', 'accessibilityLabel', 'accessibilityRole', 'accessibilityState', 'accessibilityHint', 'accessibilityValue', 'onAccessibilityAction',
+// Android
+'accessibilityLabelledBy', 'accessibilityLiveRegion', 'importantForAccessibility',
+// iOS
+'accessibilityElementsHidden', 'accessibilityLanguage', 'accessibilityIgnoresInvertColors', 'accessibilityViewIsModal', 'onAccessibilityEscape', 'onAccessibilityTap', 'onMagicTap', 'accessibilityIgnoresInvertColors'];
+var pickAccessibilityProps = function pickAccessibilityProps(props) {
+  return ACCESSIBILITY_KEYS.filter(function (key) {
+    return key in props;
+  }).reduce(function (acc, key) {
+    return Object.assign(acc, _defineProperty({}, key, props[key]));
+  }, {});
+};
+
+var _excluded$O = ["children"];
+var GradientText = function GradientText(_ref) {
+  var children = _ref.children,
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$O);
+  var theme = useTheme();
+  var gradient = theme.colors.gradients.aiDiagonal;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var onLayout = useCallback(function (event) {
+    var _event$nativeEvent$la = event.nativeEvent.layout,
+      width = _event$nativeEvent$la.width,
+      height = _event$nativeEvent$la.height;
+    setSize(function (prevSize) {
+      if (prevSize && prevSize.width === width && prevSize.height === height) {
+        return prevSize;
+      }
+      return {
+        width: width,
+        height: height
+      };
+    });
+  }, []);
+  return /*#__PURE__*/React__default.createElement(View, accessibilityProps, /*#__PURE__*/React__default.createElement(MaskedView, {
+    style: {
+      alignSelf: 'stretch'
+    },
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    maskElement: /*#__PURE__*/React__default.createElement(View, {
+      onLayout: onLayout,
+      style: {
+        backgroundColor: 'transparent'
+      },
+      testID: "gradient-text-mask"
+    }, children)
+  }, size ? /*#__PURE__*/React__default.createElement(LinearGradient, {
+    start: gradient.start,
+    end: gradient.end,
+    colors: gradient.colors,
+    locations: gradient.locations,
+    style: {
+      width: size.width,
+      height: size.height
+    }
+  }) :
+  // Render children as fallback until layout is measured, so text
+  // is visible immediately rather than blank on the first frame.
+  children), /*#__PURE__*/React__default.createElement(View, {
+    style: {
+      position: 'absolute',
+      opacity: 0
+    },
+    importantForAccessibility: "yes",
+    accessibilityElementsHidden: false
+  }, children));
+};
+
+var _excluded$N = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -8909,13 +9123,22 @@ var Caption = function Caption(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
+    style = _ref.style,
+    testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$N);
-  return /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var StyledLabel$2 = index$c(Text$1)(function (_ref) {
@@ -8934,7 +9157,7 @@ var StyledLabel$2 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$M = ["children", "intent", "allowFontScaling", "fontStyle"];
+var _excluded$M = ["children", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8943,12 +9166,21 @@ var Label = function Label(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
+    style = _ref.style,
+    testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$M);
-  return /*#__PURE__*/React__default.createElement(StyledLabel$2, _extends$1({}, nativeProps, {
-    themeIntent: intent,
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__default.createElement(StyledLabel$2, _extends$1({}, nativeProps, {
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var StyledTitle$1 = index$c(Text$1)(function (_ref) {
@@ -8966,7 +9198,7 @@ var StyledTitle$1 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$L = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle"];
+var _excluded$L = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle", "style", "testID"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8979,14 +9211,23 @@ var Title = function Title(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
+    style = _ref.style,
+    testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$L);
-  return /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var FONTWEIGHT_MAP = {
@@ -9018,7 +9259,7 @@ var StyledBody$2 = index$c(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$K = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle"];
+var _excluded$K = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle", "style", "testID"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -9031,14 +9272,23 @@ var Body = function Body(_ref) {
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
+    style = _ref.style,
+    testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$K);
-  return /*#__PURE__*/React__default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeVariant: variant,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var Typography = {
@@ -27335,7 +27585,7 @@ var StyledGradientContainer = index$c(Box)(function (_ref2) {
 });
 
 var _excluded$e = ["intent", "variant", "style", "onLayout"];
-var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient$1);
 var gradientPositions = {
   start: {
     x: 0,

package/jest.config.js

@@ -13,7 +13,7 @@ module.exports = {
     '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
   },
   transformIgnorePatterns: [
-    'node_modules/(?!(react-native|@react-native|react-native-vector-icons|react-native-gesture-handler|react-native-webview|react-native-svg|react-native-linear-gradient|@react-native-community|@ptomasroos|react-native-pager-view|@hero-design|d3|d3-.*|internmap|delaunator|robust-predicates|nanoid)/)',
+    'node_modules/(?!(react-native|@react-native|react-native-vector-icons|react-native-gesture-handler|react-native-webview|react-native-svg|@react-native-masked-view|expo-linear-gradient|react-native-linear-gradient|@react-native-community|@ptomasroos|react-native-pager-view|@hero-design|d3|d3-.*|internmap|delaunator|robust-predicates|nanoid)/)',
   ],
   testMatch: [
     '<rootDir>/src/**/__tests__/**/*.(ts|tsx|js)',
@@ -72,5 +72,11 @@ module.exports = {
     ),
 
     // All mocks are now handled in setup.tsx files
+
+    // Redirect native-only packages to stubs so they don't load requireNativeComponent
+    '^@react-native-masked-view/masked-view$':
+      '<rootDir>/testUtils/mocks/masked-view.js',
+    '^expo-linear-gradient$':
+      '<rootDir>/testUtils/mocks/expo-linear-gradient.js',
   },
 };

package/lib/index.js

@@ -3,6 +3,8 @@
 var React = require('react');
 var reactNative = require('react-native');
 var reactNativeVectorIcons = require('react-native-vector-icons');
+var MaskedView = require('@react-native-masked-view/masked-view');
+var expoLinearGradient = require('expo-linear-gradient');
 var DateTimePicker = require('@react-native-community/datetimepicker');
 var reactNativeMonthYearPicker = require('@hero-design/react-native-month-year-picker');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
@@ -37,6 +39,7 @@ function _interopNamespaceCompat(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
 var reactNative__namespace = /*#__PURE__*/_interopNamespaceCompat(reactNative);
+var MaskedView__default = /*#__PURE__*/_interopDefaultCompat(MaskedView);
 var DateTimePicker__default = /*#__PURE__*/_interopDefaultCompat(DateTimePicker);
 var Svg__default = /*#__PURE__*/_interopDefaultCompat(Svg);
 var RnSlider__default = /*#__PURE__*/_interopDefaultCompat(RnSlider);
@@ -3740,13 +3743,13 @@ var StyledDivider = index$c(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$R = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$T = ["marginHorizontal", "marginVertical", "style", "testID"];
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
     marginVertical = _ref.marginVertical,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$R);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$T);
   return /*#__PURE__*/React__namespace.default.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -5764,6 +5767,77 @@ var getShadows = function getShadows(palette) {
   }
 };
 
+var DIAGONAL_ANGLE = 282;
+var HORIZONTAL_ANGLE = 90;
+var DIAGONAL_LOCATIONS = [0, 0.2931, 0.993];
+var HORIZONTAL_LOCATIONS = [0, 0.25, 0.75];
+
+// Convert CSS gradient angle (degrees) to expo-linear-gradient start/end points.
+// Follows CSS convention: 0° = bottom→top, 90° = left→right,
+// 180° = top→bottom, 270° = right→left.
+var angleToPoints = function angleToPoints(angleDeg) {
+  var rad = (angleDeg - 90) * Math.PI / 180;
+  var x = Math.cos(rad);
+  var y = Math.sin(rad);
+  // Normalize so both components are in [0, 1]
+  var start = {
+    x: Math.round((1 - x) / 2 * 100) / 100,
+    y: Math.round((1 - y) / 2 * 100) / 100
+  };
+  var end = {
+    x: Math.round((1 + x) / 2 * 100) / 100,
+    y: Math.round((1 + y) / 2 * 100) / 100
+  };
+  return {
+    start: start,
+    end: end
+  };
+};
+var getGradients = function getGradients(systemPalette) {
+  var blueMedium = palette$9.blueMedium;
+  var pinkMedium = palette$9.pinkMedium;
+  var brandPrimary = systemPalette.primary;
+  var backgroundFallback = systemPalette.defaultGlobalSurface;
+  return {
+    aiDiagonal: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS
+    }),
+    aiDiagonal8: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.08,
+      backgroundFallback: backgroundFallback
+    }),
+    aiDiagonal16: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.16,
+      backgroundFallback: backgroundFallback
+    }),
+    aiDiagonal24: _objectSpread2(_objectSpread2({
+      angle: DIAGONAL_ANGLE
+    }, angleToPoints(DIAGONAL_ANGLE)), {}, {
+      colors: [blueMedium, brandPrimary, pinkMedium],
+      locations: DIAGONAL_LOCATIONS,
+      opacity: 0.24,
+      backgroundFallback: backgroundFallback
+    }),
+    aiHorizontal: _objectSpread2(_objectSpread2({
+      angle: HORIZONTAL_ANGLE
+    }, angleToPoints(HORIZONTAL_ANGLE)), {}, {
+      colors: [brandPrimary, pinkMedium, brandPrimary],
+      locations: HORIZONTAL_LOCATIONS
+    })
+  };
+};
+
 var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var fonts = getFonts(scale.font);
   var fontSizes = getFontSizes(scale.fontSize);
@@ -5773,8 +5847,11 @@ var getGlobalTheme = function getGlobalTheme(scale, systemPalette) {
   var sizes = getSizes(scale.size);
   var radii = getRadii(scale.radius);
   var shadows = getShadows(systemPalette);
+  var gradients = getGradients(systemPalette);
   return {
-    colors: _objectSpread2({}, systemPalette),
+    colors: _objectSpread2(_objectSpread2({}, systemPalette), {}, {
+      gradients: gradients
+    }),
     fonts: fonts,
     fontSizes: fontSizes,
     lineHeights: lineHeights,
@@ -8113,7 +8190,7 @@ var StyledLoadingDot = index$c(reactNative.View)(function (_ref) {
   }, themeStyling());
 });
 
-var _excluded$Q = ["count", "size", "testID", "themeVariant"];
+var _excluded$S = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -8145,7 +8222,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$Q);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$S);
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -8775,10 +8852,10 @@ var StyledHeroIcon = index$c(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$P = ["style"];
-var AnimatedIcon = function AnimatedIcon(_ref) {
-  var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$P);
+var SpinWrapper = function SpinWrapper(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    testID = _ref.testID;
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -8789,22 +8866,74 @@ var AnimatedIcon = function AnimatedIcon(_ref) {
     }));
     animation.start();
     return function () {
-      animation.stop();
+      return animation.stop();
     };
   }, []);
-  var interpolatedRotateAnimation = rotateAnimation.current.interpolate({
+  var rotate = rotateAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: ['0deg', '360deg']
   });
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.Animated.View, {
+    testID: testID,
     style: [{
       transform: [{
-        rotate: interpolatedRotateAnimation
+        rotate: rotate
       }]
     }, style]
+  }, children);
+};
+
+var _excluded$R = ["style"];
+var AnimatedIcon = function AnimatedIcon(_ref) {
+  var style = _ref.style,
+    otherProps = _objectWithoutProperties(_ref, _excluded$R);
+  return /*#__PURE__*/React__namespace.default.createElement(SpinWrapper, {
+    style: style
   }, /*#__PURE__*/React__namespace.default.createElement(StyledHeroIcon, otherProps));
 };
 
+var _excluded$Q = ["name", "themeSize", "testID", "style"];
+var GradientIcon = function GradientIcon(_ref) {
+  var name = _ref.name,
+    themeSize = _ref.themeSize,
+    testID = _ref.testID,
+    style = _ref.style,
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$Q);
+  var theme = useTheme();
+  var gradient = theme.colors.gradients.aiDiagonal;
+  var size = theme.__hd__.icon.sizes[themeSize];
+  return /*#__PURE__*/React__namespace.default.createElement(MaskedView__default.default, _extends$1({
+    testID: testID,
+    style: [{
+      width: size,
+      height: size
+    }, style]
+  }, accessibilityProps, {
+    maskElement: /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+      style: {
+        backgroundColor: 'transparent',
+        width: size,
+        height: size,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
+    }, /*#__PURE__*/React__namespace.default.createElement(StyledHeroIcon, {
+      name: name,
+      themeIntent: "text",
+      themeSize: themeSize
+    }))
+  }), /*#__PURE__*/React__namespace.default.createElement(expoLinearGradient.LinearGradient, {
+    start: gradient.start,
+    end: gradient.end,
+    colors: gradient.colors,
+    locations: gradient.locations,
+    style: {
+      width: size,
+      height: size
+    }
+  }));
+};
+
 var Icon = function Icon(_ref) {
   var icon = _ref.icon,
     style = _ref.style,
@@ -8840,6 +8969,20 @@ var Icon = function Icon(_ref) {
     accessibilityViewIsModal: accessibilityViewIsModal,
     accessibilityActions: accessibilityActions
   };
+  if (intent === 'ai') {
+    var gradientIcon = /*#__PURE__*/React__namespace.default.createElement(GradientIcon, _extends$1({
+      name: icon,
+      themeSize: size,
+      testID: testID,
+      style: spin ? undefined : style
+    }, accessibilityProps));
+    if (spin) {
+      return /*#__PURE__*/React__namespace.default.createElement(SpinWrapper, {
+        style: style
+      }, gradientIcon);
+    }
+    return gradientIcon;
+  }
   return spin ? /*#__PURE__*/React__namespace.default.createElement(AnimatedIcon, _extends$1({
     name: icon,
     themeIntent: intent,
@@ -8878,7 +9021,7 @@ var StyledText$4 = index$c(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$O = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$P = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 /**
  * @deprecated Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.
  */
@@ -8894,7 +9037,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$O);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$P);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React__namespace.default.createElement(StyledText$4, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -8927,7 +9070,79 @@ var StyledCaption = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$N = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle"];
+var ACCESSIBILITY_KEYS = ['accessible', 'accessibilityActions', 'accessibilityLabel', 'accessibilityRole', 'accessibilityState', 'accessibilityHint', 'accessibilityValue', 'onAccessibilityAction',
+// Android
+'accessibilityLabelledBy', 'accessibilityLiveRegion', 'importantForAccessibility',
+// iOS
+'accessibilityElementsHidden', 'accessibilityLanguage', 'accessibilityIgnoresInvertColors', 'accessibilityViewIsModal', 'onAccessibilityEscape', 'onAccessibilityTap', 'onMagicTap', 'accessibilityIgnoresInvertColors'];
+var pickAccessibilityProps = function pickAccessibilityProps(props) {
+  return ACCESSIBILITY_KEYS.filter(function (key) {
+    return key in props;
+  }).reduce(function (acc, key) {
+    return Object.assign(acc, _defineProperty({}, key, props[key]));
+  }, {});
+};
+
+var _excluded$O = ["children"];
+var GradientText = function GradientText(_ref) {
+  var children = _ref.children,
+    accessibilityProps = _objectWithoutProperties(_ref, _excluded$O);
+  var theme = useTheme();
+  var gradient = theme.colors.gradients.aiDiagonal;
+  var _useState = React.useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  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 (prevSize) {
+      if (prevSize && prevSize.width === width && prevSize.height === height) {
+        return prevSize;
+      }
+      return {
+        width: width,
+        height: height
+      };
+    });
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(reactNative.View, accessibilityProps, /*#__PURE__*/React__namespace.default.createElement(MaskedView__default.default, {
+    style: {
+      alignSelf: 'stretch'
+    },
+    accessibilityElementsHidden: true,
+    importantForAccessibility: "no-hide-descendants",
+    maskElement: /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+      onLayout: onLayout,
+      style: {
+        backgroundColor: 'transparent'
+      },
+      testID: "gradient-text-mask"
+    }, children)
+  }, size ? /*#__PURE__*/React__namespace.default.createElement(expoLinearGradient.LinearGradient, {
+    start: gradient.start,
+    end: gradient.end,
+    colors: gradient.colors,
+    locations: gradient.locations,
+    style: {
+      width: size.width,
+      height: size.height
+    }
+  }) :
+  // Render children as fallback until layout is measured, so text
+  // is visible immediately rather than blank on the first frame.
+  children), /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+    style: {
+      position: 'absolute',
+      opacity: 0
+    },
+    importantForAccessibility: "yes",
+    accessibilityElementsHidden: false
+  }, children));
+};
+
+var _excluded$N = ["children", "fontWeight", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -8938,13 +9153,22 @@ var Caption = function Caption(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
+    style = _ref.style,
+    testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$N);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledCaption, _extends$1({}, nativeProps, {
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__namespace.default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__namespace.default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var StyledLabel$2 = index$c(reactNative.Text)(function (_ref) {
@@ -8963,7 +9187,7 @@ var StyledLabel$2 = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$M = ["children", "intent", "allowFontScaling", "fontStyle"];
+var _excluded$M = ["children", "intent", "allowFontScaling", "fontStyle", "style", "testID"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -8972,12 +9196,21 @@ var Label = function Label(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
+    style = _ref.style,
+    testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$M);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledLabel$2, _extends$1({}, nativeProps, {
-    themeIntent: intent,
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__namespace.default.createElement(StyledLabel$2, _extends$1({}, nativeProps, {
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__namespace.default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var StyledTitle$1 = index$c(reactNative.Text)(function (_ref) {
@@ -8995,7 +9228,7 @@ var StyledTitle$1 = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$L = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle"];
+var _excluded$L = ["children", "intent", "allowFontScaling", "level", "typeface", "fontStyle", "style", "testID"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -9008,14 +9241,23 @@ var Title = function Title(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
+    style = _ref.style,
+    testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$L);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__namespace.default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__namespace.default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var FONTWEIGHT_MAP = {
@@ -9047,7 +9289,7 @@ var StyledBody$2 = index$c(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$K = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle"];
+var _excluded$K = ["children", "intent", "allowFontScaling", "typeface", "variant", "fontStyle", "style", "testID"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -9060,14 +9302,23 @@ var Body = function Body(_ref) {
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
     _ref$fontStyle = _ref.fontStyle,
     fontStyle = _ref$fontStyle === void 0 ? 'normal' : _ref$fontStyle,
+    style = _ref.style,
+    testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$K);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
+  var isAi = intent === 'ai';
+  var styledText = /*#__PURE__*/React__namespace.default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
-    themeIntent: intent,
+    themeIntent: isAi ? 'body' : intent,
     themeVariant: variant,
     themeIsItalic: fontStyle === 'italic',
-    allowFontScaling: allowFontScaling
+    allowFontScaling: allowFontScaling,
+    style: style,
+    testID: testID
   }), children);
+  if (isAi) {
+    return /*#__PURE__*/React__namespace.default.createElement(GradientText, pickAccessibilityProps(nativeProps), styledText);
+  }
+  return styledText;
 };
 
 var Typography = {

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.12.4",
+  "version": "1.12.5",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
-  "react-native": "src/index.ts",
   "types": "types/index.d.ts",
+  "react-native": "src/index.ts",
   "description": "EH Work specific UI components built on top of @hero-design/rn",
   "scripts": {
     "lint": "eslint src --quiet",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "8.120.2",
+    "@hero-design/rn": "8.121.0",
     "hero-editor": "^1.17.0"
   },
   "peerDependencies": {
@@ -31,6 +31,8 @@
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "^8.4.4",
     "@react-native-community/slider": " ^5.0.1",
+    "@react-native-masked-view/masked-view": "^0.3.2",
+    "expo-linear-gradient": ">=14.0.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-gesture-handler": "~2.28.0",
@@ -58,6 +60,7 @@
     "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "8.4.4",
     "@react-native-community/slider": "^5.0.1",
+    "@react-native-masked-view/masked-view": "0.3.2",
     "@react-native/babel-preset": "0.81.5",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
@@ -78,6 +81,7 @@
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
     "eslint-config-hd": "8.42.5",
+    "expo-linear-gradient": "55.0.9",
     "jest": "^29.2.1",
     "jest-environment-jsdom": "^29.2.1",
     "jest-junit": "^16.0.0",

package/rollup.config.mjs

@@ -37,6 +37,7 @@ export default [
     external: [
       'react',
       'react-native',
+      'expo-linear-gradient',
       'react-native-safe-area-context',
       'react-native-svg',
       '@react-native-community/datetimepicker',
@@ -48,6 +49,7 @@ export default [
       'react-native-linear-gradient',
       '@hero-design/react-native-month-year-picker',
       '@ptomasroos/react-native-multi-slider',
+      '@react-native-masked-view/masked-view'
     ],
     plugins: [
       alias({

package/testUtils/mocks/expo-linear-gradient.js

@@ -0,0 +1,7 @@
+const React = require('react');
+const { View } = require('react-native');
+
+const LinearGradient = ({ children, style }) =>
+  React.createElement(View, { style }, children);
+
+module.exports = { LinearGradient };

package/testUtils/mocks/masked-view.js

@@ -0,0 +1,7 @@
+const React = require('react');
+const { View } = require('react-native');
+
+const MaskedView = ({ maskElement, children, style, testID }) =>
+  React.createElement(View, { style, testID }, maskElement, children);
+
+module.exports = { __esModule: true, default: MaskedView };

package/testUtils/setup.tsx

@@ -420,4 +420,38 @@ jest.mock(
   { virtual: true }
 );
 
+jest.mock('@react-native-masked-view/masked-view', () => {
+  const React = jest.requireActual('react');
+  const { View } = jest.requireActual('react-native');
+
+  return {
+    default: ({
+      maskElement,
+      children,
+      style,
+      testID,
+    }: {
+      maskElement: React.ReactNode;
+      children: React.ReactNode;
+      style?: object;
+      testID?: string;
+    }) => React.createElement(View, { style, testID }, maskElement, children),
+  };
+});
+
+jest.mock('expo-linear-gradient', () => {
+  const React = jest.requireActual('react');
+  const { View } = jest.requireActual('react-native');
+
+  return {
+    LinearGradient: ({
+      children,
+      style,
+    }: {
+      children?: React.ReactNode;
+      style?: object;
+    }) => React.createElement(View, { style }, children),
+  };
+});
+
 export {};