@hero-design/rn 8.140.0 → 8.141.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.141.0
+
+### Minor Changes
+
+- [#5569](https://github.com/Thinkei/hero-design/pull/5569) [`08e26bb`](https://github.com/Thinkei/hero-design/commit/08e26bb64cb2de40cda008482afc9992e5de1e29) Thanks [@dathuynh-eh](https://github.com/dathuynh-eh)! - [Confetti] Add Confetti component with ConfettiProvider and useConfetti hook for celebratory burst animations
+
 ## 8.140.0
 
 ### Minor Changes

package/es/index.js

@@ -1,7 +1,7 @@
 import * as reactNative from 'react-native';
-import { StyleSheet as StyleSheet$1, Platform, Dimensions, Keyboard, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Pressable, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, SectionList as SectionList$1, PixelRatio, RefreshControl as RefreshControl$1 } from 'react-native';
+import { StyleSheet as StyleSheet$1, Platform, Dimensions, Keyboard, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, AccessibilityInfo, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Pressable, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, SectionList as SectionList$1, PixelRatio, RefreshControl as RefreshControl$1 } from 'react-native';
 import * as React from 'react';
-import React__default, { useState, useEffect, useMemo, useCallback, useRef, useLayoutEffect, createContext, forwardRef, useContext, memo, useReducer, isValidElement, useImperativeHandle } from 'react';
+import React__default, { useState, useEffect, useMemo, useCallback, useRef, createContext, useContext, useLayoutEffect, forwardRef, memo, useReducer, isValidElement, useImperativeHandle } from 'react';
 import MaskedView from '@react-native-masked-view/masked-view';
 import { LinearGradient } from 'expo-linear-gradient';
 import { createIconSet } from 'react-native-vector-icons';
@@ -3324,7 +3324,7 @@ function interleave(vals) {
 // this is done so we don't create a new
 // handleInterpolation function on every css call
 
-var styles;
+var styles$1;
 var generated = {};
 var buffer = '';
 var lastType;
@@ -3347,7 +3347,7 @@ function handleInterpolation(interpolation, i, arr) {
   if (lastType === 'string' && (isRnStyle || isIrrelevant)) {
     var converted = convertStyles(buffer);
     if (converted !== undefined) {
-      styles.push(converted);
+      styles$1.push(converted);
     }
     buffer = '';
   }
@@ -3359,13 +3359,13 @@ function handleInterpolation(interpolation, i, arr) {
     if (arr.length - 1 === i) {
       var _converted = convertStyles(buffer);
       if (_converted !== undefined) {
-        styles.push(_converted);
+        styles$1.push(_converted);
       }
       buffer = '';
     }
   }
   if (isRnStyle) {
-    styles.push(interpolation);
+    styles$1.push(interpolation);
   }
   if (Array.isArray(interpolation)) {
     interpolation.forEach(handleInterpolation, this);
@@ -3381,7 +3381,7 @@ function createCss(StyleSheet) {
     // this is done so we don't create a new
     // handleInterpolation function on every css call
 
-    styles = [];
+    styles$1 = [];
     buffer = '';
     lastType = undefined;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -3397,10 +3397,10 @@ function createCss(StyleSheet) {
     } finally {
       buffer = prevBuffer;
     }
-    var hash = JSON.stringify(styles);
+    var hash = JSON.stringify(styles$1);
     if (!generated[hash]) {
       var styleSheet = StyleSheet.create({
-        generated: StyleSheet.flatten(styles)
+        generated: StyleSheet.flatten(styles$1)
       });
       generated[hash] = styleSheet.generated;
     }
@@ -9387,6 +9387,274 @@ var Accordion = function Accordion(_ref) {
   }));
 };
 
+function reflectX(rawX, width) {
+  var period = 2 * width;
+  var modX = (rawX % period + period) % period;
+  return modX < width ? modX : period - modX;
+}
+/**
+ * Pre-computes the reflectX triangle-wave as interpolation keyframes.
+ * Run once in JS before animation starts; native driver handles per-frame lerp.
+ */
+function computeXKeyframes(initialX, xVel, durationSeconds, width) {
+  if (xVel === 0) {
+    return {
+      inputRange: [0, 1],
+      outputRange: [initialX, initialX]
+    };
+  }
+  var rawEnd = initialX + xVel * durationSeconds;
+  var rawMin = Math.min(initialX, rawEnd);
+  var rawMax = Math.max(initialX, rawEnd);
+  var nMin = Math.ceil(rawMin / width);
+  var nMax = Math.floor(rawMax / width);
+  var times = [0];
+  for (var n = nMin; n <= nMax; n += 1) {
+    var t = (n * width - initialX) / xVel;
+    if (t > 0 && t < durationSeconds) times.push(t);
+  }
+  times.push(durationSeconds);
+  times.sort(function (a, b) {
+    return a - b;
+  });
+  return {
+    inputRange: times.map(function (t) {
+      return t / durationSeconds;
+    }),
+    outputRange: times.map(function (t) {
+      return reflectX(initialX + xVel * t, width);
+    })
+  };
+}
+
+var CONFETTI_MIN_SIZE = 4;
+var CONFETTI_MAX_SIZE = 20;
+var BATCH_SIZE = 10;
+var BATCH_DELAY_MS = 300;
+var FADE_OUT_MS = 500;
+var Y_START_OFFSET = -60;
+var styles = StyleSheet$1.create({
+  container: _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
+    overflow: 'hidden'
+  }),
+  piece: {
+    position: 'absolute',
+    left: 0,
+    top: 0
+  }
+});
+function randomBetween(min, max) {
+  return Math.random() * (max - min) + min;
+}
+var ConfettiPiece = function ConfettiPiece(_ref) {
+  var angleVel = _ref.angleVel,
+    color = _ref.color,
+    containerWidth = _ref.containerWidth,
+    delay = _ref.delay,
+    duration = _ref.duration,
+    initialX = _ref.initialX,
+    onFinish = _ref.onFinish,
+    size = _ref.size,
+    xVel = _ref.xVel,
+    yVel = _ref.yVel;
+  var progress = useRef(new Animated.Value(0)).current;
+  var durationSeconds = duration / 1000;
+  var xKeyframes = useMemo(function () {
+    return computeXKeyframes(initialX, xVel, durationSeconds, containerWidth);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var translateX = progress.interpolate({
+    inputRange: xKeyframes.inputRange,
+    outputRange: xKeyframes.outputRange
+  });
+  var translateY = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [Y_START_OFFSET, Y_START_OFFSET + yVel * durationSeconds]
+  });
+  var rotate = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0rad', "".concat(angleVel * durationSeconds, "rad")]
+  });
+  useEffect(function () {
+    Animated.sequence([Animated.delay(delay), Animated.timing(progress, {
+      toValue: 1,
+      duration: duration,
+      useNativeDriver: true
+    })]).start(function (_ref2) {
+      var finished = _ref2.finished;
+      if (finished) onFinish();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React__default.createElement(Animated.View, {
+    style: [styles.piece, {
+      width: size,
+      height: size / 2,
+      backgroundColor: color
+    }, {
+      transform: [{
+        translateX: translateX
+      }, {
+        translateY: translateY
+      }, {
+        rotate: rotate
+      }]
+    }]
+  });
+};
+var Confetti$2 = function Confetti(_ref3) {
+  var _pieces$current;
+  var colorsProp = _ref3.colors,
+    _ref3$numberOfPieces = _ref3.numberOfPieces,
+    numberOfPieces = _ref3$numberOfPieces === void 0 ? 80 : _ref3$numberOfPieces,
+    _ref3$duration = _ref3.duration,
+    duration = _ref3$duration === void 0 ? 3000 : _ref3$duration,
+    onFinish = _ref3.onFinish,
+    run = _ref3.run,
+    testID = _ref3.testID;
+  var theme = useTheme();
+  var _useWindowDimensions = useWindowDimensions(),
+    screenHeight = _useWindowDimensions.height;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isReducedMotion = _useState2[0],
+    setIsReducedMotion = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isVisible = _useState4[0],
+    setIsVisible = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    containerWidth = _useState6[0],
+    setContainerWidth = _useState6[1];
+  var containerOpacity = useRef(new Animated.Value(0)).current;
+  var finishedCount = useRef(0);
+  var pieces = useRef(null);
+  useEffect(function () {
+    AccessibilityInfo.isReduceMotionEnabled().then(setIsReducedMotion);
+    var sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setIsReducedMotion);
+    return function () {
+      return sub.remove();
+    };
+  }, []);
+  useEffect(function () {
+    if (run && !isReducedMotion && containerWidth > 0) {
+      var durationSeconds = duration / 1000;
+      var yVelMin = (screenHeight + 80) / durationSeconds;
+      var yVelMax = yVelMin * 1.5;
+      var colors = colorsProp !== null && colorsProp !== void 0 ? colorsProp : [theme.colors.primary, theme.colors.secondary];
+      pieces.current = Array.from({
+        length: numberOfPieces
+      }, function (_, i) {
+        return {
+          color: colors[i % colors.length],
+          size: Math.round(randomBetween(CONFETTI_MIN_SIZE, CONFETTI_MAX_SIZE)),
+          initialX: randomBetween(containerWidth * 0.2, containerWidth * 0.8),
+          xVel: randomBetween(-200, 200),
+          yVel: randomBetween(yVelMin, yVelMax),
+          angleVel: randomBetween(-Math.PI * 1.5, Math.PI * 1.5),
+          delay: Math.floor(i / BATCH_SIZE) * BATCH_DELAY_MS
+        };
+      });
+      finishedCount.current = 0;
+      containerOpacity.setValue(1);
+      setIsVisible(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [run, containerWidth]);
+  var handlePieceFinish = useCallback(function () {
+    finishedCount.current += 1;
+    if (finishedCount.current >= numberOfPieces) {
+      Animated.timing(containerOpacity, {
+        toValue: 0,
+        duration: FADE_OUT_MS,
+        useNativeDriver: true
+      }).start(function (_ref4) {
+        var finished = _ref4.finished;
+        if (finished) {
+          setIsVisible(false);
+          onFinish === null || onFinish === void 0 || onFinish();
+        }
+      });
+    }
+  }, [containerOpacity, numberOfPieces, onFinish]);
+  var handleLayout = useCallback(function (_ref5) {
+    var nativeEvent = _ref5.nativeEvent;
+    var width = nativeEvent.layout.width;
+    if (width > 0) setContainerWidth(width);
+  }, []);
+  if (isReducedMotion) {
+    return null;
+  }
+  // Always render the container (when not in reduced motion) so onLayout fires and we know the real width.
+  // Visibility is controlled via opacity to avoid losing the measurement.
+  return /*#__PURE__*/React__default.createElement(Animated.View, {
+    pointerEvents: "none",
+    onLayout: handleLayout,
+    style: [styles.container, {
+      opacity: isVisible ? containerOpacity : 0
+    }],
+    testID: isVisible ? testID : undefined
+  }, isVisible && ((_pieces$current = pieces.current) === null || _pieces$current === void 0 ? void 0 : _pieces$current.map(function (piece, id) {
+    return /*#__PURE__*/React__default.createElement(ConfettiPiece, _extends$1({
+      key: id
+    }, piece, {
+      containerWidth: containerWidth,
+      duration: duration,
+      onFinish: handlePieceFinish
+    }));
+  })));
+};
+
+var ConfettiContext = /*#__PURE__*/createContext(null);
+var ConfettiProvider = function ConfettiProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    run = _useState2[0],
+    setRun = _useState2[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    callConfig = _useState4[0],
+    setCallConfig = _useState4[1];
+  var onFinishedRef = useRef(undefined);
+  var showConfetti = useCallback(function (config, onFinished) {
+    setCallConfig(config);
+    onFinishedRef.current = onFinished;
+    setRun(true);
+  }, []);
+  var handleFinish = useCallback(function () {
+    var _onFinishedRef$curren;
+    setRun(false);
+    (_onFinishedRef$curren = onFinishedRef.current) === null || _onFinishedRef$curren === void 0 || _onFinishedRef$curren.call(onFinishedRef, true);
+  }, []);
+  var contextValue = useMemo(function () {
+    return {
+      showConfetti: showConfetti
+    };
+  }, [showConfetti]);
+  return /*#__PURE__*/React__default.createElement(ConfettiContext.Provider, {
+    value: contextValue
+  }, children, /*#__PURE__*/React__default.createElement(Confetti$2, _extends$1({
+    run: run,
+    onFinish: handleFinish
+  }, callConfig)));
+};
+
+var useConfetti = function useConfetti() {
+  var context = useContext(ConfettiContext);
+  if (!context) {
+    throw new Error('useConfetti must be used within a Confetti.Provider');
+  }
+  return context;
+};
+
+var Confetti$1 = Object.assign(Confetti$2, {
+  Provider: ConfettiProvider,
+  useConfetti: useConfetti
+});
+
 var Container$1 = index$c(View)(function (_ref) {
   var theme = _ref.theme,
     _ref$themeVariant = _ref.themeVariant,
@@ -23108,6 +23376,7 @@ var Confetti = function Confetti(_ref) {
     strokeWidth: "0.4"
   })));
 };
+Confetti.displayName = 'ConfettiIllustration';
 
 var Connections = function Connections(_ref) {
   var stroke = _ref.stroke,
@@ -43577,4 +43846,4 @@ var InlineLoader = function InlineLoader(_ref) {
   }, 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, SectionList, 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, ehJobsShadowPalette, ehJobsSystemPalette, ehWorkDarkShadowPalette, ehWorkDarkSystemPalette, ehWorkShadowPalette, 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 };
+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, Confetti$1 as Confetti, 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, SectionList, 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, ehJobsShadowPalette, ehJobsSystemPalette, ehWorkDarkShadowPalette, ehWorkDarkSystemPalette, ehWorkShadowPalette, 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 };

package/lib/index.js

@@ -3353,7 +3353,7 @@ function interleave(vals) {
 // this is done so we don't create a new
 // handleInterpolation function on every css call
 
-var styles;
+var styles$1;
 var generated = {};
 var buffer = '';
 var lastType;
@@ -3376,7 +3376,7 @@ function handleInterpolation(interpolation, i, arr) {
   if (lastType === 'string' && (isRnStyle || isIrrelevant)) {
     var converted = convertStyles(buffer);
     if (converted !== undefined) {
-      styles.push(converted);
+      styles$1.push(converted);
     }
     buffer = '';
   }
@@ -3388,13 +3388,13 @@ function handleInterpolation(interpolation, i, arr) {
     if (arr.length - 1 === i) {
       var _converted = convertStyles(buffer);
       if (_converted !== undefined) {
-        styles.push(_converted);
+        styles$1.push(_converted);
       }
       buffer = '';
     }
   }
   if (isRnStyle) {
-    styles.push(interpolation);
+    styles$1.push(interpolation);
   }
   if (Array.isArray(interpolation)) {
     interpolation.forEach(handleInterpolation, this);
@@ -3410,7 +3410,7 @@ function createCss(StyleSheet) {
     // this is done so we don't create a new
     // handleInterpolation function on every css call
 
-    styles = [];
+    styles$1 = [];
     buffer = '';
     lastType = undefined;
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
@@ -3426,10 +3426,10 @@ function createCss(StyleSheet) {
     } finally {
       buffer = prevBuffer;
     }
-    var hash = JSON.stringify(styles);
+    var hash = JSON.stringify(styles$1);
     if (!generated[hash]) {
       var styleSheet = StyleSheet.create({
-        generated: StyleSheet.flatten(styles)
+        generated: StyleSheet.flatten(styles$1)
       });
       generated[hash] = styleSheet.generated;
     }
@@ -9416,6 +9416,274 @@ var Accordion = function Accordion(_ref) {
   }));
 };
 
+function reflectX(rawX, width) {
+  var period = 2 * width;
+  var modX = (rawX % period + period) % period;
+  return modX < width ? modX : period - modX;
+}
+/**
+ * Pre-computes the reflectX triangle-wave as interpolation keyframes.
+ * Run once in JS before animation starts; native driver handles per-frame lerp.
+ */
+function computeXKeyframes(initialX, xVel, durationSeconds, width) {
+  if (xVel === 0) {
+    return {
+      inputRange: [0, 1],
+      outputRange: [initialX, initialX]
+    };
+  }
+  var rawEnd = initialX + xVel * durationSeconds;
+  var rawMin = Math.min(initialX, rawEnd);
+  var rawMax = Math.max(initialX, rawEnd);
+  var nMin = Math.ceil(rawMin / width);
+  var nMax = Math.floor(rawMax / width);
+  var times = [0];
+  for (var n = nMin; n <= nMax; n += 1) {
+    var t = (n * width - initialX) / xVel;
+    if (t > 0 && t < durationSeconds) times.push(t);
+  }
+  times.push(durationSeconds);
+  times.sort(function (a, b) {
+    return a - b;
+  });
+  return {
+    inputRange: times.map(function (t) {
+      return t / durationSeconds;
+    }),
+    outputRange: times.map(function (t) {
+      return reflectX(initialX + xVel * t, width);
+    })
+  };
+}
+
+var CONFETTI_MIN_SIZE = 4;
+var CONFETTI_MAX_SIZE = 20;
+var BATCH_SIZE = 10;
+var BATCH_DELAY_MS = 300;
+var FADE_OUT_MS = 500;
+var Y_START_OFFSET = -60;
+var styles = reactNative.StyleSheet.create({
+  container: _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
+    overflow: 'hidden'
+  }),
+  piece: {
+    position: 'absolute',
+    left: 0,
+    top: 0
+  }
+});
+function randomBetween(min, max) {
+  return Math.random() * (max - min) + min;
+}
+var ConfettiPiece = function ConfettiPiece(_ref) {
+  var angleVel = _ref.angleVel,
+    color = _ref.color,
+    containerWidth = _ref.containerWidth,
+    delay = _ref.delay,
+    duration = _ref.duration,
+    initialX = _ref.initialX,
+    onFinish = _ref.onFinish,
+    size = _ref.size,
+    xVel = _ref.xVel,
+    yVel = _ref.yVel;
+  var progress = React.useRef(new reactNative.Animated.Value(0)).current;
+  var durationSeconds = duration / 1000;
+  var xKeyframes = React.useMemo(function () {
+    return computeXKeyframes(initialX, xVel, durationSeconds, containerWidth);
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var translateX = progress.interpolate({
+    inputRange: xKeyframes.inputRange,
+    outputRange: xKeyframes.outputRange
+  });
+  var translateY = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [Y_START_OFFSET, Y_START_OFFSET + yVel * durationSeconds]
+  });
+  var rotate = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0rad', "".concat(angleVel * durationSeconds, "rad")]
+  });
+  React.useEffect(function () {
+    reactNative.Animated.sequence([reactNative.Animated.delay(delay), reactNative.Animated.timing(progress, {
+      toValue: 1,
+      duration: duration,
+      useNativeDriver: true
+    })]).start(function (_ref2) {
+      var finished = _ref2.finished;
+      if (finished) onFinish();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(reactNative.Animated.View, {
+    style: [styles.piece, {
+      width: size,
+      height: size / 2,
+      backgroundColor: color
+    }, {
+      transform: [{
+        translateX: translateX
+      }, {
+        translateY: translateY
+      }, {
+        rotate: rotate
+      }]
+    }]
+  });
+};
+var Confetti$2 = function Confetti(_ref3) {
+  var _pieces$current;
+  var colorsProp = _ref3.colors,
+    _ref3$numberOfPieces = _ref3.numberOfPieces,
+    numberOfPieces = _ref3$numberOfPieces === void 0 ? 80 : _ref3$numberOfPieces,
+    _ref3$duration = _ref3.duration,
+    duration = _ref3$duration === void 0 ? 3000 : _ref3$duration,
+    onFinish = _ref3.onFinish,
+    run = _ref3.run,
+    testID = _ref3.testID;
+  var theme = useTheme();
+  var _useWindowDimensions = reactNative.useWindowDimensions(),
+    screenHeight = _useWindowDimensions.height;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isReducedMotion = _useState2[0],
+    setIsReducedMotion = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isVisible = _useState4[0],
+    setIsVisible = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    containerWidth = _useState6[0],
+    setContainerWidth = _useState6[1];
+  var containerOpacity = React.useRef(new reactNative.Animated.Value(0)).current;
+  var finishedCount = React.useRef(0);
+  var pieces = React.useRef(null);
+  React.useEffect(function () {
+    reactNative.AccessibilityInfo.isReduceMotionEnabled().then(setIsReducedMotion);
+    var sub = reactNative.AccessibilityInfo.addEventListener('reduceMotionChanged', setIsReducedMotion);
+    return function () {
+      return sub.remove();
+    };
+  }, []);
+  React.useEffect(function () {
+    if (run && !isReducedMotion && containerWidth > 0) {
+      var durationSeconds = duration / 1000;
+      var yVelMin = (screenHeight + 80) / durationSeconds;
+      var yVelMax = yVelMin * 1.5;
+      var colors = colorsProp !== null && colorsProp !== void 0 ? colorsProp : [theme.colors.primary, theme.colors.secondary];
+      pieces.current = Array.from({
+        length: numberOfPieces
+      }, function (_, i) {
+        return {
+          color: colors[i % colors.length],
+          size: Math.round(randomBetween(CONFETTI_MIN_SIZE, CONFETTI_MAX_SIZE)),
+          initialX: randomBetween(containerWidth * 0.2, containerWidth * 0.8),
+          xVel: randomBetween(-200, 200),
+          yVel: randomBetween(yVelMin, yVelMax),
+          angleVel: randomBetween(-Math.PI * 1.5, Math.PI * 1.5),
+          delay: Math.floor(i / BATCH_SIZE) * BATCH_DELAY_MS
+        };
+      });
+      finishedCount.current = 0;
+      containerOpacity.setValue(1);
+      setIsVisible(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [run, containerWidth]);
+  var handlePieceFinish = React.useCallback(function () {
+    finishedCount.current += 1;
+    if (finishedCount.current >= numberOfPieces) {
+      reactNative.Animated.timing(containerOpacity, {
+        toValue: 0,
+        duration: FADE_OUT_MS,
+        useNativeDriver: true
+      }).start(function (_ref4) {
+        var finished = _ref4.finished;
+        if (finished) {
+          setIsVisible(false);
+          onFinish === null || onFinish === void 0 || onFinish();
+        }
+      });
+    }
+  }, [containerOpacity, numberOfPieces, onFinish]);
+  var handleLayout = React.useCallback(function (_ref5) {
+    var nativeEvent = _ref5.nativeEvent;
+    var width = nativeEvent.layout.width;
+    if (width > 0) setContainerWidth(width);
+  }, []);
+  if (isReducedMotion) {
+    return null;
+  }
+  // Always render the container (when not in reduced motion) so onLayout fires and we know the real width.
+  // Visibility is controlled via opacity to avoid losing the measurement.
+  return /*#__PURE__*/React__namespace.default.createElement(reactNative.Animated.View, {
+    pointerEvents: "none",
+    onLayout: handleLayout,
+    style: [styles.container, {
+      opacity: isVisible ? containerOpacity : 0
+    }],
+    testID: isVisible ? testID : undefined
+  }, isVisible && ((_pieces$current = pieces.current) === null || _pieces$current === void 0 ? void 0 : _pieces$current.map(function (piece, id) {
+    return /*#__PURE__*/React__namespace.default.createElement(ConfettiPiece, _extends$1({
+      key: id
+    }, piece, {
+      containerWidth: containerWidth,
+      duration: duration,
+      onFinish: handlePieceFinish
+    }));
+  })));
+};
+
+var ConfettiContext = /*#__PURE__*/React.createContext(null);
+var ConfettiProvider = function ConfettiProvider(_ref) {
+  var children = _ref.children;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    run = _useState2[0],
+    setRun = _useState2[1];
+  var _useState3 = React.useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    callConfig = _useState4[0],
+    setCallConfig = _useState4[1];
+  var onFinishedRef = React.useRef(undefined);
+  var showConfetti = React.useCallback(function (config, onFinished) {
+    setCallConfig(config);
+    onFinishedRef.current = onFinished;
+    setRun(true);
+  }, []);
+  var handleFinish = React.useCallback(function () {
+    var _onFinishedRef$curren;
+    setRun(false);
+    (_onFinishedRef$curren = onFinishedRef.current) === null || _onFinishedRef$curren === void 0 || _onFinishedRef$curren.call(onFinishedRef, true);
+  }, []);
+  var contextValue = React.useMemo(function () {
+    return {
+      showConfetti: showConfetti
+    };
+  }, [showConfetti]);
+  return /*#__PURE__*/React__namespace.default.createElement(ConfettiContext.Provider, {
+    value: contextValue
+  }, children, /*#__PURE__*/React__namespace.default.createElement(Confetti$2, _extends$1({
+    run: run,
+    onFinish: handleFinish
+  }, callConfig)));
+};
+
+var useConfetti = function useConfetti() {
+  var context = React.useContext(ConfettiContext);
+  if (!context) {
+    throw new Error('useConfetti must be used within a Confetti.Provider');
+  }
+  return context;
+};
+
+var Confetti$1 = Object.assign(Confetti$2, {
+  Provider: ConfettiProvider,
+  useConfetti: useConfetti
+});
+
 var Container$1 = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     _ref$themeVariant = _ref.themeVariant,
@@ -23137,6 +23405,7 @@ var Confetti = function Confetti(_ref) {
     strokeWidth: "0.4"
   })));
 };
+Confetti.displayName = 'ConfettiIllustration';
 
 var Connections = function Connections(_ref) {
   var stroke = _ref.stroke,
@@ -43623,6 +43892,7 @@ exports.Chart = Chart;
 exports.Checkbox = index$9;
 exports.Chip = Chip;
 exports.Collapse = Collapse;
+exports.Confetti = Confetti$1;
 exports.ContentNavigator = ContentNavigator;
 exports.DatePicker = index$8;
 exports.Divider = Divider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.140.0",
+  "version": "8.141.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Confetti/Confetti.tsx

@@ -0,0 +1,239 @@
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  StyleSheet,
+  useWindowDimensions,
+} from 'react-native';
+import type { LayoutChangeEvent } from 'react-native';
+
+import { useTheme } from '../../theme';
+import { computeXKeyframes } from './computeXKeyframes';
+
+const CONFETTI_MIN_SIZE = 4;
+const CONFETTI_MAX_SIZE = 20;
+const BATCH_SIZE = 10;
+const BATCH_DELAY_MS = 300;
+const FADE_OUT_MS = 500;
+const Y_START_OFFSET = -60;
+
+const styles = StyleSheet.create({
+  container: {
+    ...StyleSheet.absoluteFillObject,
+    overflow: 'hidden',
+  },
+  piece: {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+  },
+});
+
+function randomBetween(min: number, max: number): number {
+  return Math.random() * (max - min) + min;
+}
+
+type PieceConfig = {
+  color: string;
+  size: number;
+  initialX: number;
+  xVel: number;
+  yVel: number;
+  angleVel: number;
+  delay: number;
+};
+
+type ConfettiPieceProps = PieceConfig & {
+  containerWidth: number;
+  duration: number;
+  onFinish: () => void;
+};
+
+const ConfettiPiece = ({
+  angleVel,
+  color,
+  containerWidth,
+  delay,
+  duration,
+  initialX,
+  onFinish,
+  size,
+  xVel,
+  yVel,
+}: ConfettiPieceProps) => {
+  const progress = useRef(new Animated.Value(0)).current;
+  const durationSeconds = duration / 1000;
+
+  const xKeyframes = useMemo(
+    () => computeXKeyframes(initialX, xVel, durationSeconds, containerWidth),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const translateX = progress.interpolate({
+    inputRange: xKeyframes.inputRange,
+    outputRange: xKeyframes.outputRange,
+  });
+
+  const translateY = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [Y_START_OFFSET, Y_START_OFFSET + yVel * durationSeconds],
+  });
+
+  const rotate = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0rad', `${angleVel * durationSeconds}rad`],
+  });
+
+  useEffect(() => {
+    Animated.sequence([
+      Animated.delay(delay),
+      Animated.timing(progress, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true,
+      }),
+    ]).start(({ finished }) => {
+      if (finished) onFinish();
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Animated.View
+      style={[
+        styles.piece,
+        { width: size, height: size / 2, backgroundColor: color },
+        { transform: [{ translateX }, { translateY }, { rotate }] },
+      ]}
+    />
+  );
+};
+
+export type ShowConfettiConfig = {
+  /** Animation duration in milliseconds.
+   * @default 3000
+   */
+  duration?: number;
+  /** Number of confetti pieces to render.
+   * @default 80
+   */
+  numberOfPieces?: number;
+  /** Colors for confetti pieces. Defaults to theme primary and secondary colors. */
+  colors?: string[];
+};
+
+export type ConfettiProps = ShowConfettiConfig & {
+  /** Triggers the confetti burst animation when set to true */
+  run: boolean;
+  /** Called after all pieces have finished animating and faded out */
+  onFinish?: () => void;
+  testID?: string;
+};
+
+const Confetti = ({
+  colors: colorsProp,
+  numberOfPieces = 80,
+  duration = 3000,
+  onFinish,
+  run,
+  testID,
+}: ConfettiProps) => {
+  const theme = useTheme();
+  const { height: screenHeight } = useWindowDimensions();
+  const [isReducedMotion, setIsReducedMotion] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const containerOpacity = useRef(new Animated.Value(0)).current;
+  const finishedCount = useRef(0);
+  const pieces = useRef<PieceConfig[] | null>(null);
+
+  useEffect(() => {
+    AccessibilityInfo.isReduceMotionEnabled().then(setIsReducedMotion);
+    const sub = AccessibilityInfo.addEventListener(
+      'reduceMotionChanged',
+      setIsReducedMotion
+    );
+    return () => sub.remove();
+  }, []);
+
+  useEffect(() => {
+    if (run && !isReducedMotion && containerWidth > 0) {
+      const durationSeconds = duration / 1000;
+      const yVelMin = (screenHeight + 80) / durationSeconds;
+      const yVelMax = yVelMin * 1.5;
+      const colors = colorsProp ?? [
+        theme.colors.primary,
+        theme.colors.secondary,
+      ];
+      pieces.current = Array.from({ length: numberOfPieces }, (_, i) => ({
+        color: colors[i % colors.length],
+        size: Math.round(randomBetween(CONFETTI_MIN_SIZE, CONFETTI_MAX_SIZE)),
+        initialX: randomBetween(containerWidth * 0.2, containerWidth * 0.8),
+        xVel: randomBetween(-200, 200),
+        yVel: randomBetween(yVelMin, yVelMax),
+        angleVel: randomBetween(-Math.PI * 1.5, Math.PI * 1.5),
+        delay: Math.floor(i / BATCH_SIZE) * BATCH_DELAY_MS,
+      }));
+      finishedCount.current = 0;
+      containerOpacity.setValue(1);
+      setIsVisible(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [run, containerWidth]);
+
+  const handlePieceFinish = useCallback(() => {
+    finishedCount.current += 1;
+    if (finishedCount.current >= numberOfPieces) {
+      Animated.timing(containerOpacity, {
+        toValue: 0,
+        duration: FADE_OUT_MS,
+        useNativeDriver: true,
+      }).start(({ finished }) => {
+        if (finished) {
+          setIsVisible(false);
+          onFinish?.();
+        }
+      });
+    }
+  }, [containerOpacity, numberOfPieces, onFinish]);
+
+  const handleLayout = useCallback(({ nativeEvent }: LayoutChangeEvent) => {
+    const { width } = nativeEvent.layout;
+    if (width > 0) setContainerWidth(width);
+  }, []);
+
+  if (isReducedMotion) {
+    return null;
+  }
+
+  // Always render the container (when not in reduced motion) so onLayout fires and we know the real width.
+  // Visibility is controlled via opacity to avoid losing the measurement.
+  return (
+    <Animated.View
+      pointerEvents="none"
+      onLayout={handleLayout}
+      style={[styles.container, { opacity: isVisible ? containerOpacity : 0 }]}
+      testID={isVisible ? testID : undefined}
+    >
+      {isVisible &&
+        pieces.current?.map((piece, id) => (
+          <ConfettiPiece
+            key={id}
+            {...piece}
+            containerWidth={containerWidth}
+            duration={duration}
+            onFinish={handlePieceFinish}
+          />
+        ))}
+    </Animated.View>
+  );
+};
+
+export default Confetti;

package/src/components/Confetti/ConfettiProvider.tsx

@@ -0,0 +1,61 @@
+import React, {
+  createContext,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import type { PropsWithChildren } from 'react';
+
+import Confetti from './Confetti';
+import type { ShowConfettiConfig } from './Confetti';
+
+type ConfettiContextValue = {
+  showConfetti: (
+    config?: ShowConfettiConfig,
+    onFinished?: (isFinished: boolean) => void
+  ) => void;
+};
+
+export const ConfettiContext = createContext<ConfettiContextValue | null>(null);
+
+const ConfettiProvider = ({ children }: PropsWithChildren) => {
+  const [run, setRun] = useState(false);
+  const [callConfig, setCallConfig] = useState<
+    ShowConfettiConfig | undefined
+  >();
+  const onFinishedRef = useRef<((isFinished: boolean) => void) | undefined>(
+    undefined
+  );
+
+  const showConfetti = useCallback(
+    (
+      config?: ShowConfettiConfig,
+      onFinished?: (isFinished: boolean) => void
+    ) => {
+      setCallConfig(config);
+      onFinishedRef.current = onFinished;
+      setRun(true);
+    },
+    []
+  );
+
+  const handleFinish = useCallback(() => {
+    setRun(false);
+    onFinishedRef.current?.(true);
+  }, []);
+
+  const contextValue = useMemo<ConfettiContextValue>(
+    () => ({ showConfetti }),
+    [showConfetti]
+  );
+
+  return (
+    <ConfettiContext.Provider value={contextValue}>
+      {children}
+      <Confetti run={run} onFinish={handleFinish} {...callConfig} />
+    </ConfettiContext.Provider>
+  );
+};
+
+export default ConfettiProvider;

package/src/components/Confetti/computeXKeyframes.ts

@@ -0,0 +1,38 @@
+export function reflectX(rawX: number, width: number): number {
+  const period = 2 * width;
+  const modX = ((rawX % period) + period) % period;
+  return modX < width ? modX : period - modX;
+}
+
+/**
+ * Pre-computes the reflectX triangle-wave as interpolation keyframes.
+ * Run once in JS before animation starts; native driver handles per-frame lerp.
+ */
+export function computeXKeyframes(
+  initialX: number,
+  xVel: number,
+  durationSeconds: number,
+  width: number
+): { inputRange: number[]; outputRange: number[] } {
+  if (xVel === 0) {
+    return { inputRange: [0, 1], outputRange: [initialX, initialX] };
+  }
+  const rawEnd = initialX + xVel * durationSeconds;
+  const rawMin = Math.min(initialX, rawEnd);
+  const rawMax = Math.max(initialX, rawEnd);
+  const nMin = Math.ceil(rawMin / width);
+  const nMax = Math.floor(rawMax / width);
+
+  const times: number[] = [0];
+  for (let n = nMin; n <= nMax; n += 1) {
+    const t = (n * width - initialX) / xVel;
+    if (t > 0 && t < durationSeconds) times.push(t);
+  }
+  times.push(durationSeconds);
+  times.sort((a, b) => a - b);
+
+  return {
+    inputRange: times.map((t) => t / durationSeconds),
+    outputRange: times.map((t) => reflectX(initialX + xVel * t, width)),
+  };
+}

package/src/components/Confetti/index.tsx

@@ -0,0 +1,12 @@
+import ConfettiComponent from './Confetti';
+import ConfettiProvider from './ConfettiProvider';
+import useConfetti from './useConfetti';
+
+export type { ConfettiProps, ShowConfettiConfig } from './Confetti';
+
+const Confetti = Object.assign(ConfettiComponent, {
+  Provider: ConfettiProvider,
+  useConfetti,
+});
+
+export default Confetti;

package/src/components/Confetti/useConfetti.ts

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+
+import { ConfettiContext } from './ConfettiProvider';
+
+const useConfetti = () => {
+  const context = useContext(ConfettiContext);
+  if (!context) {
+    throw new Error('useConfetti must be used within a Confetti.Provider');
+  }
+  return context;
+};
+
+export default useConfetti;

package/src/components/Illustration/assets/Confetti.tsx

@@ -82,4 +82,6 @@ const Confetti = ({
   );
 };
 
+Confetti.displayName = 'ConfettiIllustration';
+
 export default Confetti;

package/src/index.ts

@@ -24,6 +24,8 @@ import type { ShadowPalette } from './theme';
 import { scale } from './utils/scale';
 
 import Accordion from './components/Accordion';
+import Confetti from './components/Confetti';
+import type { ConfettiProps } from './components/Confetti';
 import Alert from './components/Alert';
 import AppCue from './components/AppCue';
 import Attachment from './components/Attachment';
@@ -183,6 +185,8 @@ export {
   FilterTrigger,
   InlineLoader,
   type InlineLoaderProps,
+  Confetti,
+  type ConfettiProps,
   styled,
 };
 

package/types/components/Confetti/Confetti.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export type ShowConfettiConfig = {
+    /** Animation duration in milliseconds.
+     * @default 3000
+     */
+    duration?: number;
+    /** Number of confetti pieces to render.
+     * @default 80
+     */
+    numberOfPieces?: number;
+    /** Colors for confetti pieces. Defaults to theme primary and secondary colors. */
+    colors?: string[];
+};
+export type ConfettiProps = ShowConfettiConfig & {
+    /** Triggers the confetti burst animation when set to true */
+    run: boolean;
+    /** Called after all pieces have finished animating and faded out */
+    onFinish?: () => void;
+    testID?: string;
+};
+declare const Confetti: ({ colors: colorsProp, numberOfPieces, duration, onFinish, run, testID, }: ConfettiProps) => React.JSX.Element | null;
+export default Confetti;

package/types/components/Confetti/ConfettiProvider.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { PropsWithChildren } from 'react';
+import type { ShowConfettiConfig } from './Confetti';
+type ConfettiContextValue = {
+    showConfetti: (config?: ShowConfettiConfig, onFinished?: (isFinished: boolean) => void) => void;
+};
+export declare const ConfettiContext: React.Context<ConfettiContextValue | null>;
+declare const ConfettiProvider: ({ children }: PropsWithChildren) => React.JSX.Element;
+export default ConfettiProvider;

package/types/components/Confetti/computeXKeyframes.d.ts

@@ -0,0 +1,9 @@
+export declare function reflectX(rawX: number, width: number): number;
+/**
+ * Pre-computes the reflectX triangle-wave as interpolation keyframes.
+ * Run once in JS before animation starts; native driver handles per-frame lerp.
+ */
+export declare function computeXKeyframes(initialX: number, xVel: number, durationSeconds: number, width: number): {
+    inputRange: number[];
+    outputRange: number[];
+};

package/types/components/Confetti/index.d.ts

@@ -0,0 +1,8 @@
+export type { ConfettiProps, ShowConfettiConfig } from './Confetti';
+declare const Confetti: (({ colors: colorsProp, numberOfPieces, duration, onFinish, run, testID, }: import("./Confetti").ConfettiProps) => import("react").JSX.Element | null) & {
+    Provider: ({ children }: import("react").PropsWithChildren) => import("react").JSX.Element;
+    useConfetti: () => {
+        showConfetti: (config?: import("./Confetti").ShowConfettiConfig, onFinished?: (isFinished: boolean) => void) => void;
+    };
+};
+export default Confetti;

package/types/components/Confetti/useConfetti.d.ts

@@ -0,0 +1,4 @@
+declare const useConfetti: () => {
+    showConfetti: (config?: import("./Confetti").ShowConfettiConfig, onFinished?: (isFinished: boolean) => void) => void;
+};
+export default useConfetti;

package/types/components/Illustration/assets/Confetti.d.ts

@@ -1,4 +1,7 @@
 import React from 'react';
 import type { IllustrationSvgProps } from '../types';
-declare const Confetti: ({ stroke, fill, testID, width, height, }: IllustrationSvgProps) => React.JSX.Element;
+declare const Confetti: {
+    ({ stroke, fill, testID, width, height, }: IllustrationSvgProps): React.JSX.Element;
+    displayName: string;
+};
 export default Confetti;

package/types/components/Illustration/illustrations.d.ts

@@ -11,7 +11,10 @@ export declare const Illustrations: {
     readonly search: ({ stroke, fill, testID, width, height, }: import("./types").IllustrationSvgProps) => import("react").JSX.Element;
     readonly star: ({ stroke, fill, testID, width, height, }: import("./types").IllustrationSvgProps) => import("react").JSX.Element;
     readonly user: ({ stroke, fill, testID, width, height, }: import("./types").IllustrationSvgProps) => import("react").JSX.Element;
-    readonly confetti: ({ stroke, fill, testID, width, height, }: import("./types").IllustrationSvgProps) => import("react").JSX.Element;
+    readonly confetti: {
+        ({ stroke, fill, testID, width, height, }: import("./types").IllustrationSvgProps): import("react").JSX.Element;
+        displayName: string;
+    };
     readonly error: ({ stroke, fill, testID, width, height, }: import("./types").IllustrationSvgProps) => import("react").JSX.Element;
     readonly info: ({ stroke, fill, testID, width, height, }: import("./types").IllustrationSvgProps) => import("react").JSX.Element;
     readonly success: ({ stroke, fill, testID, width, height, }: import("./types").IllustrationSvgProps) => import("react").JSX.Element;

package/types/index.d.ts

@@ -3,6 +3,8 @@ import theme, { getTheme, ThemeProvider, useTheme, swagSystemPalette, swagLightS
 import type { ShadowPalette } from './theme';
 import { scale } from './utils/scale';
 import Accordion from './components/Accordion';
+import Confetti from './components/Confetti';
+import type { ConfettiProps } from './components/Confetti';
 import Alert from './components/Alert';
 import AppCue from './components/AppCue';
 import Attachment from './components/Attachment';
@@ -63,6 +65,6 @@ import FloatingIsland from './components/FloatingIsland';
 import LocaleProvider from './components/LocaleProvider';
 import FilterTrigger from './components/FilterTrigger';
 import InlineLoader, { type InlineLoaderProps } from './components/InlineLoader';
-export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, ehJobsSystemPalette, ehWorkShadowPalette, ehJobsShadowPalette, ehWorkDarkShadowPalette, Accordion, Alert, AppCue, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Chart, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Illustration, type IllustrationName, IllustrationList, Image, HeroDesignProvider, MapPin, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, Search, SegmentedControl, ScrollViewWithFAB, SectionHeading, SectionList, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FloatingIsland, LocaleProvider, FilterTrigger, InlineLoader, type InlineLoaderProps, styled, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, ThemeSwitcher, withTheme, swagSystemPalette, swagLightSystemPalette, swagLightJobsSystemPalette, swagDarkSystemPalette, workSystemPalette, jobsSystemPalette, walletSystemPalette, eBensSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, ehJobsSystemPalette, ehWorkShadowPalette, ehJobsShadowPalette, ehWorkDarkShadowPalette, Accordion, Alert, AppCue, Attachment, Avatar, useAvatarColors, Badge, BottomNavigation, BottomSheet, Box, Button, Calendar, Card, Chart, Carousel, Chip, Collapse, Checkbox, ContentNavigator, DatePicker, Divider, Drawer, Empty, Error, FAB, FlatListWithFAB, Icon, Illustration, type IllustrationName, IllustrationList, Image, HeroDesignProvider, MapPin, List, PinInput, Progress, Portal, PageControl, Skeleton, Slider, Spinner, Swipeable, Radio, Search, SegmentedControl, ScrollViewWithFAB, SectionHeading, SectionList, SectionListWithFAB, Select, Success, Switch, Tabs, Tag, TextInput, TimePicker, Toast, Toolbar, Typography, Rate, RefreshControl, RichTextEditor, FloatingIsland, LocaleProvider, FilterTrigger, InlineLoader, type InlineLoaderProps, Confetti, type ConfettiProps, styled, };
 export * from './types';
 export type { ShadowPalette };