@hero-design/rn 8.16.0 → 8.17.0

package/es/index.js

@@ -1,11 +1,12 @@
 import * as reactNative from 'react-native';
 import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, Modal, FlatList, useWindowDimensions, TextInput as TextInput$1, PanResponder, InteractionManager, Keyboard, SectionList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
-import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
+import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, isValidElement, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import RnSlider from '@react-native-community/slider';
 import { RectButton, GestureHandlerRootView, Swipeable as Swipeable$1 } from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
 import PagerView from 'react-native-pager-view';
 import { EventEmitter } from 'events';
 import { WebView } from 'react-native-webview';
@@ -2577,6 +2578,26 @@ var getSelectTheme = function getSelectTheme(theme) {
   };
 };
 
+var getSkeletonTheme = function getSkeletonTheme(theme) {
+  var colors = {
+    lightBackground: theme.colors.neutralGlobalSurface,
+    darkBackground: theme.colors.defaultGlobalSurface,
+    lightGradientStart: theme.colors.neutralGlobalSurface,
+    lightGradientEnd: theme.colors.archivedSurface,
+    darkGradientStart: theme.colors.defaultGlobalSurface,
+    darkGradientEnd: theme.colors.archivedSurface
+  };
+  var radii = {
+    rectangular: 0,
+    circular: theme.radii.rounded,
+    rounded: theme.radii.xlarge
+  };
+  return {
+    colors: colors,
+    radii: radii
+  };
+};
+
 var getSliderTheme = function getSliderTheme(theme) {
   var colors = {
     minimumTrackTint: theme.colors.primary,
@@ -2999,6 +3020,7 @@ var getTheme$1 = function getTheme() {
       richTextEditor: getRichTextEditorTheme(globalTheme),
       sectionHeading: getSectionHeadingTheme(globalTheme),
       select: getSelectTheme(globalTheme),
+      skeleton: getSkeletonTheme(globalTheme),
       slider: getSliderTheme(globalTheme),
       spinner: getSpinnerTheme(globalTheme),
       swipeable: getSwipeableTheme(globalTheme),
@@ -6021,7 +6043,7 @@ var StyledText$3 = index$a(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$q = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$r = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6034,7 +6056,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$q);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
   return /*#__PURE__*/React.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6555,10 +6577,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$p = ["style"];
+var _excluded$q = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$p);
+    otherProps = _objectWithoutProperties(_ref, _excluded$q);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -6664,7 +6686,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$o = ["key"];
+var _excluded$p = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6685,7 +6707,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$o);
+      props = _objectWithoutProperties(_ref2, _excluded$p);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
@@ -6800,7 +6822,7 @@ var Alert = function Alert(_ref2) {
   })) : null);
 };
 
-var StyledContainer$5 = index$a(View)({
+var StyledContainer$6 = index$a(View)({
   alignItems: 'center',
   flexDirection: 'row'
 });
@@ -6842,7 +6864,7 @@ var Attachment = function Attachment(_ref) {
     backgroundHighlighted = _ref$backgroundHighli === void 0 ? false : _ref$backgroundHighli,
     style = _ref.style,
     testID = _ref.testID;
-  return /*#__PURE__*/React.createElement(StyledContainer$5, {
+  return /*#__PURE__*/React.createElement(StyledContainer$6, {
     testID: testID,
     style: style
   }, /*#__PURE__*/React.createElement(StyledContentContainer$1, {
@@ -7082,7 +7104,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$n = ["children", "visible", "intent", "style", "testID"];
+var _excluded$o = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -7091,7 +7113,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$o);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -7124,7 +7146,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$m = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$n = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -7139,7 +7161,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$n);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -7243,7 +7265,7 @@ function omit(keys, obj) {
   return result;
 }
 
-var _excluded$l = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$m = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -7254,7 +7276,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$m);
   var insets = useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -7341,13 +7363,13 @@ var StyledDivider = index$a(View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$k = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$l = ["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$k);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/React.createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7477,7 +7499,7 @@ var StyledLoadingDot = index$a(View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$j = ["count", "size", "testID", "themeVariant"];
+var _excluded$k = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7509,7 +7531,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$j);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$k);
   var progressAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(progressAnimation.current, {
@@ -7939,11 +7961,11 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React.createElement(Divider, null) : null);
 };
 
-var _excluded$i = ["scrollEventThrottle"];
+var _excluded$j = ["scrollEventThrottle"];
 var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   var _ref$scrollEventThrot = _ref.scrollEventThrottle,
     scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
-    props = _objectWithoutProperties(_ref, _excluded$i);
+    props = _objectWithoutProperties(_ref, _excluded$j);
   var _useContext = useContext(BottomSheetContext),
     setInternalShowDivider = _useContext.setInternalShowDivider;
   var onScrollBeginDrag = useCallback(function (e) {
@@ -8258,7 +8280,7 @@ var borderWidths = {
 var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
 var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
 
-var _excluded$h = ["theme"];
+var _excluded$i = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -8285,18 +8307,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$a(View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$h);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$i);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$g = ["children", "style", "testID"];
+var _excluded$h = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$g);
+    otherProps = _objectWithoutProperties(_ref, _excluded$h);
   return /*#__PURE__*/React.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -10622,7 +10644,7 @@ function ContentNavigator(_ref) {
   }));
 }
 
-var StyledContainer$4 = index$a(View)(function (_ref) {
+var StyledContainer$5 = index$a(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     backgroundColor: theme.__hd__.calendar.colors.background
@@ -10805,7 +10827,7 @@ var Calendar = function Calendar(_ref) {
   var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
     return date !== undefined;
   }) || maxDate <= lastDateOfMonth;
-  return /*#__PURE__*/React.createElement(StyledContainer$4, null, /*#__PURE__*/React.createElement(StyledCalendarHeader, null, /*#__PURE__*/React.createElement(ContentNavigator, {
+  return /*#__PURE__*/React.createElement(StyledContainer$5, null, /*#__PURE__*/React.createElement(StyledCalendarHeader, null, /*#__PURE__*/React.createElement(ContentNavigator, {
     value: formatTime('MMMM yyyy', visibleDate),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
@@ -10861,7 +10883,7 @@ var Calendar = function Calendar(_ref) {
   })));
 };
 
-var _excluded$f = ["rounded", "size", "testID", "style"];
+var _excluded$g = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -10869,7 +10891,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$f);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$g);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React.createElement(Image$1, _extends$1({
@@ -11062,12 +11084,12 @@ var Indicator = index$a(View)(function (_ref2) {
   };
 });
 
-var _excluded$e = ["intent", "children"];
+var _excluded$f = ["intent", "children"];
 var DataCard = function DataCard(_ref) {
   var _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'info' : _ref$intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   return /*#__PURE__*/React.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -11085,11 +11107,11 @@ var StyledCard$1 = index$a(View)(function (_ref) {
   });
 });
 
-var _excluded$d = ["intent", "children"];
+var _excluded$e = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$d);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   return /*#__PURE__*/React.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -11277,7 +11299,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }));
 });
 
-var _excluded$c = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination"];
+var _excluded$d = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -11299,7 +11321,7 @@ var Carousel = function Carousel(_ref) {
     shouldShowPagination = _ref$shouldShowPagina === void 0 ? function () {
       return true;
     } : _ref$shouldShowPagina,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$c);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$d);
   var carouselRef = useRef(null);
   var _useStateFromProp = useStateFromProp(selectedItemIndex),
     _useStateFromProp2 = _slicedToArray(_useStateFromProp, 2),
@@ -11459,7 +11481,7 @@ var Checkbox = function Checkbox(_ref) {
   })));
 };
 
-var StyledContainer$3 = index$a(View)(function (_ref) {
+var StyledContainer$4 = index$a(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     width: '100%',
@@ -11611,7 +11633,7 @@ var StyledErrorAndMaxLengthContainer = index$a(View)(function () {
   };
 });
 
-var _excluded$b = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling"];
+var _excluded$c = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling"];
 var getVariant$1 = function getVariant(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -11659,7 +11681,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     renderInputValue = _ref2.renderInputValue,
     _ref2$allowFontScalin = _ref2.allowFontScaling,
     allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$b);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$c);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -11770,7 +11792,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     defaultValue: defaultValue,
     placeholder: isFocused || label === undefined ? nativeProps.placeholder : EMPTY_PLACEHOLDER_VALUE
   });
-  return /*#__PURE__*/React.createElement(StyledContainer$3, {
+  return /*#__PURE__*/React.createElement(StyledContainer$4, {
     style: styleWithoutBackgroundColor,
     pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
     testID: testID
@@ -11988,7 +12010,7 @@ var DatePicker = function DatePicker(props) {
 };
 
 var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-var StyledContainer$2 = index$a(View)(function (_ref) {
+var StyledContainer$3 = index$a(View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -12247,7 +12269,7 @@ var Drawer = function Drawer(_ref) {
       return animation.stop();
     };
   }, [visible]);
-  return /*#__PURE__*/React.createElement(StyledContainer$2, {
+  return /*#__PURE__*/React.createElement(StyledContainer$3, {
     testID: testID,
     enableShadow: enableShadow,
     pointerEvents: "box-none"
@@ -12379,8 +12401,16 @@ var StyledErrorButtonSecondary = index$a(CompoundButton)(function (_ref5) {
     padding: theme.__hd__.error.space.button.padding
   };
 });
-var StyledErrorImage = index$a(Image)(function (_ref6) {
+var StyledErrorImageContainer = index$a(View)(function (_ref6) {
   var theme = _ref6.theme;
+  return {
+    marginBottom: theme.__hd__.error.space.imageMarginBottom,
+    width: theme.__hd__.error.sizes.image,
+    height: theme.__hd__.error.sizes.image
+  };
+});
+var StyledErrorImage = index$a(Image)(function (_ref7) {
+  var theme = _ref7.theme;
   return {
     marginBottom: theme.__hd__.error.space.imageMarginBottom,
     width: theme.__hd__.error.sizes.image,
@@ -12388,8 +12418,8 @@ var StyledErrorImage = index$a(Image)(function (_ref6) {
     resizeMode: 'contain'
   };
 });
-var StyledErrorTitle = index$a(Typography.Text)(function (_ref7) {
-  var theme = _ref7.theme;
+var StyledErrorTitle = index$a(Typography.Text)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     fontFamily: theme.__hd__.error.fonts.title,
     fontSize: theme.__hd__.error.fontSizes.title,
@@ -12398,8 +12428,8 @@ var StyledErrorTitle = index$a(Typography.Text)(function (_ref7) {
     color: theme.__hd__.error.colors.title
   };
 });
-var StyledErrorDescription = index$a(Typography.Text)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     fontFamily: theme.__hd__.error.fonts.description,
     fontSize: theme.__hd__.error.fontSizes.description,
@@ -12408,8 +12438,21 @@ var StyledErrorDescription = index$a(Typography.Text)(function (_ref8) {
   };
 });
 
-var _excluded$a = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
+var _excluded$b = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
   _excluded2 = ["visible", "variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
+var renderImage = function renderImage(image) {
+  if ( /*#__PURE__*/isValidElement(image)) {
+    return /*#__PURE__*/React.cloneElement(image, {
+      testID: 'error-image'
+    });
+  }
+  return /*#__PURE__*/React.createElement(StyledErrorImage, {
+    source: typeof image === 'string' ? {
+      uri: image
+    } : image,
+    testID: "error-image"
+  });
+};
 var ErrorPage = function ErrorPage(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'in-page' : _ref$variant,
@@ -12421,19 +12464,14 @@ var ErrorPage = function ErrorPage(_ref) {
     onCtaPress = _ref.onCtaPress,
     secondaryCtaText = _ref.secondaryCtaText,
     onSecondaryCtaPress = _ref.onSecondaryCtaPress,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$a);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$b);
   var showCta = ctaText && onCtaPress !== undefined;
   var showSecondaryCta = secondaryCtaText && onSecondaryCtaPress !== undefined;
   var showButtonContainer = showCta || showSecondaryCta;
-  return /*#__PURE__*/React.createElement(StyledErrorContainer$1, {
+  return /*#__PURE__*/React.createElement(StyledErrorContainer$1, _extends$1({
     testID: testID,
     themeVariant: variant
-  }, /*#__PURE__*/React.createElement(StyledErrorContent, nativeProps, image && /*#__PURE__*/React.createElement(StyledErrorImage, {
-    source: typeof image === 'string' ? {
-      uri: image
-    } : image,
-    testID: "error-image"
-  }), /*#__PURE__*/React.createElement(StyledErrorTitle, null, title), description && /*#__PURE__*/React.createElement(StyledErrorDescription, null, description)), showButtonContainer && /*#__PURE__*/React.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React.createElement(StyledErrorButtonPrimary, {
+  }, nativeProps), /*#__PURE__*/React.createElement(StyledErrorContent, null, image && /*#__PURE__*/React.createElement(StyledErrorImageContainer, null, renderImage(image)), /*#__PURE__*/React.createElement(StyledErrorTitle, null, title), description && /*#__PURE__*/React.createElement(StyledErrorDescription, null, description)), showButtonContainer && /*#__PURE__*/React.createElement(StyledErrorButtonContainer, null, showCta && /*#__PURE__*/React.createElement(StyledErrorButtonPrimary, {
     variant: "filled",
     text: ctaText,
     onPress: onCtaPress
@@ -12570,11 +12608,11 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
   };
 });
 
-var _excluded$9 = ["active"];
+var _excluded$a = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   var active = _ref.active,
-    iconProps = _objectWithoutProperties(_ref, _excluded$9);
+    iconProps = _objectWithoutProperties(_ref, _excluded$a);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
     var animation = Animated.timing(rotateAnimation.current, {
@@ -12700,7 +12738,7 @@ var ActionItem = function ActionItem(_ref) {
   }), /*#__PURE__*/React.createElement(StyledActionItemText, null, title)));
 };
 
-var StyledContainer$1 = index$a(View)({
+var StyledContainer$2 = index$a(View)({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -12787,7 +12825,7 @@ var ActionGroup = function ActionGroup(_ref2) {
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
-  return /*#__PURE__*/React.createElement(StyledContainer$1, {
+  return /*#__PURE__*/React.createElement(StyledContainer$2, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
@@ -13247,7 +13285,7 @@ var THEME_INTENT_MAP = {
   'archived-inverted': 'archivedInverted'
 };
 
-var StyledContainer = index$a(View)(function (_ref) {
+var StyledContainer$1 = index$a(View)(function (_ref) {
   var theme = _ref.theme;
   return {
     flexDirection: 'row',
@@ -13313,7 +13351,7 @@ var StyledStrokeEnd = index$a(View)(function (_ref6) {
   };
 });
 
-var _excluded$8 = ["value", "renderValue", "intent", "style", "testID"];
+var _excluded$9 = ["value", "renderValue", "intent", "style", "testID"];
 var HalfCircle = function HalfCircle(_ref) {
   var type = _ref.type,
     themeIntent = _ref.themeIntent;
@@ -13334,7 +13372,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
     intent = _ref2$intent === void 0 ? 'primary' : _ref2$intent,
     style = _ref2.style,
     testID = _ref2.testID,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$8);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$9);
   var theme = useTheme$1();
   var radius = theme.__hd__.progress.sizes.circleDiameter / 2;
   var progressAnimatedValue = useRef(new Animated.Value(0));
@@ -13374,7 +13412,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   return /*#__PURE__*/React.createElement(View, _extends$1({}, nativeProps, {
     testID: testID,
     style: style
-  }), /*#__PURE__*/React.createElement(StyledContainer, null, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(HalfCircle, {
+  }), /*#__PURE__*/React.createElement(StyledContainer$1, null, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(HalfCircle, {
     type: "foreground",
     themeIntent: intent
   }), /*#__PURE__*/React.createElement(Animated.View, {
@@ -13451,14 +13489,14 @@ var StyledInner = index$a(Animated.View)(function (_ref2) {
   };
 });
 
-var _excluded$7 = ["value", "intent", "style", "testID"];
+var _excluded$8 = ["value", "intent", "style", "testID"];
 var ProgressBar = function ProgressBar(_ref) {
   var value = _ref.value,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$7);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$8);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     width = _useState2[0],
@@ -13649,14 +13687,14 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
   }, dotProps))));
 };
 
-var _excluded$6 = ["testID", "size", "intent"];
+var _excluded$7 = ["testID", "size", "intent"];
 var Spinner = function Spinner(_ref) {
   var testID = _ref.testID,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$6);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$7);
   return /*#__PURE__*/React.createElement(StyledView$1, nativeProps, /*#__PURE__*/React.createElement(StyledSpinnerContainer, {
     testID: testID
   }, /*#__PURE__*/React.createElement(AnimatedSpinner, {
@@ -13689,7 +13727,7 @@ var SwipeableAction = function SwipeableAction(_ref) {
   }, children);
 };
 
-var _excluded$5 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
+var _excluded$6 = ["children", "state", "onStateChange", "leftActions", "leftActionsWidth", "rightActions", "rightActionsWidth"];
 var renderActions = function renderActions(actions, width, progress, direction) {
   var trans = progress.interpolate({
     inputRange: [0, 1],
@@ -13714,7 +13752,7 @@ var Swipeable = function Swipeable(_ref) {
     leftActionsWidth = _ref.leftActionsWidth,
     rightActions = _ref.rightActions,
     rightActionsWidth = _ref.rightActionsWidth,
-    swipeableProps = _objectWithoutProperties(_ref, _excluded$5);
+    swipeableProps = _objectWithoutProperties(_ref, _excluded$6);
   var _useWindowDimensions = useWindowDimensions(),
     width = _useWindowDimensions.width;
   var swipeableRef = useRef(null);
@@ -14019,7 +14057,7 @@ var StyledSectionList = index$a(SectionList)(function (_ref4) {
   };
 });
 
-var _excluded$4 = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
+var _excluded$5 = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -14028,7 +14066,7 @@ var BaseOptionList = function BaseOptionList(_ref) {
     sections = _ref.sections,
     renderItem = _ref.renderItem,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$4);
+    rest = _objectWithoutProperties(_ref, _excluded$5);
   var theme = useTheme$1();
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -14097,7 +14135,7 @@ var Option$2 = function Option(_ref) {
   return highlighted === true ? /*#__PURE__*/React.createElement(List.Item, props) : /*#__PURE__*/React.createElement(List.BasicItem, props);
 };
 
-var _excluded$3 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$4 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList$1 = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -14108,7 +14146,7 @@ var OptionList$1 = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$3);
+    rest = _objectWithoutProperties(_ref, _excluded$4);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = value.includes(info.item.value);
@@ -14296,7 +14334,7 @@ var StyledOptionList = index$a(BaseOptionList)(function (_ref) {
   };
 });
 
-var _excluded$2 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
+var _excluded$3 = ["keyExtractor", "loading", "onEndReached", "onPress", "onQueryChange", "sections", "renderOption", "value", "sectionListRef"];
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -14307,7 +14345,7 @@ var OptionList = function OptionList(_ref) {
     renderOption = _ref.renderOption,
     value = _ref.value,
     sectionListRef = _ref.sectionListRef,
-    rest = _objectWithoutProperties(_ref, _excluded$2);
+    rest = _objectWithoutProperties(_ref, _excluded$3);
   var renderItem = function renderItem(info) {
     var item = info.item;
     var selected = item.value === value;
@@ -14454,6 +14492,120 @@ var index$4 = Object.assign(SingleSelect, {
   Multi: MultiSelect
 });
 
+var StyledContainer = index$a(Box)(function (_ref) {
+  var theme = _ref.theme,
+    themeIntent = _ref.themeIntent,
+    themeVariant = _ref.themeVariant;
+  return {
+    backgroundColor: themeIntent === 'light' ? theme.__hd__.skeleton.colors.lightBackground : theme.__hd__.skeleton.colors.darkBackground,
+    borderRadius: theme.__hd__.skeleton.radii[themeVariant]
+  };
+});
+var StyledGradientContainer = index$a(Box)(function (_ref2) {
+  var theme = _ref2.theme,
+    themeVariant = _ref2.themeVariant;
+  return {
+    overflow: 'hidden',
+    borderRadius: theme.__hd__.skeleton.radii[themeVariant]
+  };
+});
+
+var _excluded$2 = ["intent", "variant", "style", "onLayout"];
+var AnimatedLinearGradient = Animated.createAnimatedComponent(LinearGradient);
+var gradientPositions = {
+  start: {
+    x: 0,
+    y: 0
+  },
+  end: {
+    x: 1,
+    y: 0
+  }
+};
+var getGradientColors = function getGradientColors(theme, intent) {
+  switch (intent) {
+    case 'light':
+      {
+        return [theme.__hd__.skeleton.colors.lightGradientStart, theme.__hd__.skeleton.colors.lightGradientEnd, theme.__hd__.skeleton.colors.lightGradientStart];
+      }
+    case 'dark':
+      {
+        return [theme.__hd__.skeleton.colors.darkGradientStart, theme.__hd__.skeleton.colors.darkGradientEnd, theme.__hd__.skeleton.colors.darkGradientStart];
+      }
+  }
+};
+var Skeleton = function Skeleton(_ref) {
+  var _StyleSheet$flatten, _StyleSheet$flatten2;
+  var _ref$intent = _ref.intent,
+    intent = _ref$intent === void 0 ? 'light' : _ref$intent,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'rounded' : _ref$variant,
+    style = _ref.style,
+    onLayout = _ref.onLayout,
+    props = _objectWithoutProperties(_ref, _excluded$2);
+  var theme = useTheme();
+  var colors = useMemo(function () {
+    return getGradientColors(theme, intent);
+  }, [theme, intent]);
+  var _useState = useState(Number((_StyleSheet$flatten = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.width) || 0),
+    _useState2 = _slicedToArray(_useState, 2),
+    containerWidth = _useState2[0],
+    setContainerWidth = _useState2[1];
+  var _useState3 = useState(Number((_StyleSheet$flatten2 = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.height) || 0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    containerHeight = _useState4[0],
+    setContainerHeight = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    shouldStartAnimation = _useState6[0],
+    setShouldStartAnimation = _useState6[1];
+  var animatedValue = useRef(new Animated.Value(0)).current;
+  useEffect(function () {
+    if (shouldStartAnimation) {
+      Animated.loop(Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: 1000,
+        easing: Easing.linear,
+        useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android'
+      })).start();
+    }
+  }, [shouldStartAnimation]);
+  var translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-containerWidth, containerWidth]
+  });
+  var onContainerLayout = useCallback(function (e) {
+    var _e$nativeEvent$layout = e.nativeEvent.layout,
+      width = _e$nativeEvent$layout.width,
+      height = _e$nativeEvent$layout.height;
+    setContainerHeight(height);
+    setContainerWidth(width);
+    if (!shouldStartAnimation) {
+      setShouldStartAnimation(true);
+    }
+    onLayout === null || onLayout === void 0 ? void 0 : onLayout(e);
+  }, []);
+  return /*#__PURE__*/React.createElement(StyledContainer, _extends$1({
+    style: style,
+    themeVariant: variant,
+    themeIntent: intent,
+    onLayout: onContainerLayout
+  }, props), /*#__PURE__*/React.createElement(StyledGradientContainer, {
+    themeVariant: variant
+  }, /*#__PURE__*/React.createElement(AnimatedLinearGradient, {
+    start: gradientPositions.start,
+    end: gradientPositions.end,
+    style: {
+      width: containerWidth,
+      height: containerHeight,
+      transform: [{
+        translateX: translateX
+      }]
+    },
+    colors: colors
+  })));
+};
+
 var StyledWrapper$1 = index$a(View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -32037,7 +32189,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
         break;
     }
   }, []);
-  return /*#__PURE__*/React.createElement(StyledContainer$3, {
+  return /*#__PURE__*/React.createElement(StyledContainer$4, {
     testID: testID
   }, /*#__PURE__*/React.createElement(StyledTextInputContainer, null, /*#__PURE__*/React.createElement(StyledBorderBackDrop, {
     themeVariant: variant,
@@ -32096,4 +32248,4 @@ var index = Object.assign(RichTextEditor$1, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, Error$1 as Error, index$6 as FAB, Icon, Image, List, PageControl, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, Card$1 as Card, index$8 as Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, Error$1 as Error, index$6 as FAB, Icon, Image, List, PageControl, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Skeleton, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagDarkSystemPalette, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };