@hero-design/rn 8.82.2-alpha.2 → 8.83.0

package/lib/index.js

@@ -7,6 +7,7 @@ var reactNativeSafeAreaContext = require('react-native-safe-area-context');
 var reactNativeMonthYearPicker = require('@hero-design/react-native-month-year-picker');
 var DateTimePicker = require('@react-native-community/datetimepicker');
 var RnSlider = require('@react-native-community/slider');
+var MultiSlider = require('@ptomasroos/react-native-multi-slider');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var LinearGradient = require('react-native-linear-gradient');
 var PagerView = require('react-native-pager-view');
@@ -37,6 +38,7 @@ var reactNative__namespace = /*#__PURE__*/_interopNamespaceCompat(reactNative);
 var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);
 var DateTimePicker__default = /*#__PURE__*/_interopDefaultCompat(DateTimePicker);
 var RnSlider__default = /*#__PURE__*/_interopDefaultCompat(RnSlider);
+var MultiSlider__default = /*#__PURE__*/_interopDefaultCompat(MultiSlider);
 var LinearGradient__default = /*#__PURE__*/_interopDefaultCompat(LinearGradient);
 var PagerView__default = /*#__PURE__*/_interopDefaultCompat(PagerView);
 
@@ -3331,10 +3333,28 @@ var getSliderTheme = function getSliderTheme(theme) {
   var colors = {
     minimumTrackTint: theme.colors.primary,
     thumbTint: theme.colors.primary,
-    maximumTrackTint: theme.colors.highlightedSurface
+    maximumTrackTint: theme.colors.highlightedSurface,
+    trackBackground: theme.colors.highlightedSurface,
+    disabledThumbTint: theme.colors.disabledOnDefaultGlobalSurface,
+    disabledTrackBackground: theme.colors.neutralGlobalSurface
+  };
+  var shadows = {
+    marker: theme.shadows["default"]
+  };
+  var sizes = {
+    trackHeight: theme.sizes.xsmall,
+    markerWidth: theme.sizes.large,
+    markerHeight: theme.sizes.large,
+    markerBorderRadius: theme.radii.rounded
+  };
+  var radii = {
+    marker: theme.radii.rounded
   };
   return {
-    colors: colors
+    colors: colors,
+    shadows: shadows,
+    sizes: sizes,
+    radii: radii
   };
 };
 
@@ -3477,7 +3497,8 @@ var getTabsTheme = function getTabsTheme(theme) {
     activeBackground: theme.colors.decorativePrimarySurface,
     headerBottom: theme.colors.secondaryOutline,
     indicator: theme.colors.primary,
-    text: theme.colors.onDefaultGlobalSurface
+    text: theme.colors.onDefaultGlobalSurface,
+    headerBackground: theme.colors.defaultGlobalSurface
   };
   var space = {
     flatListHorizontalPadding: theme.space.small,
@@ -4080,6 +4101,26 @@ var getFloatingIslandTheme = function getFloatingIslandTheme(theme) {
   };
 };
 
+var getAppCueTheme = function getAppCueTheme(theme) {
+  var colors = {
+    background: theme.colors.darkGlobalSurface,
+    backdropColor: 'rgba(0, 0, 0, 0.5)'
+  };
+  var space = {
+    padding: theme.space.medium,
+    offset: theme.space.small,
+    arrowOffset: theme.space.smallMedium
+  };
+  var radii = {
+    container: theme.radii.large
+  };
+  return {
+    colors: colors,
+    space: space,
+    radii: radii
+  };
+};
+
 var getTheme$1 = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
   var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$1;
@@ -4088,6 +4129,7 @@ var getTheme$1 = function getTheme() {
     __hd__: {
       accordion: getAccordionTheme(globalTheme),
       alert: getAlertTheme(globalTheme),
+      appCue: getAppCueTheme(globalTheme),
       attachment: getAttachmentTheme(globalTheme),
       avatar: getAvatarTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),
@@ -8233,6 +8275,288 @@ var Alert = function Alert(_ref2) {
   })) : null);
 };
 
+var StyledContent$1 = index$a(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    padding: theme.__hd__.appCue.space.padding,
+    backgroundColor: theme.__hd__.appCue.colors.background,
+    borderRadius: theme.__hd__.appCue.radii.container,
+    alignSelf: 'center'
+  };
+});
+var StyledContainer$9 = index$a(reactNative.View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: '100%',
+    height: '100%',
+    backgroundColor: theme.__hd__.appCue.colors.backdropColor
+  };
+});
+var StyledIconContainer$1 = index$a(reactNative.Animated.View)(function (_ref3) {
+  var theme = _ref3.theme,
+    themePlacement = _ref3.themePlacement;
+  return _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({
+    position: 'absolute',
+    color: theme.__hd__.appCue.colors.background,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  }, themePlacement === 'top' && {
+    bottom: -theme.__hd__.appCue.space.arrowOffset,
+    width: '100%'
+  }), themePlacement === 'bottom' && {
+    top: -theme.__hd__.appCue.space.arrowOffset,
+    transform: [{
+      rotate: '180deg'
+    }],
+    width: '100%'
+  }), themePlacement === 'right' && {
+    left: -theme.__hd__.appCue.space.arrowOffset,
+    transform: [{
+      rotate: '90deg'
+    }],
+    height: '100%'
+  }), themePlacement === 'left' && {
+    right: -theme.__hd__.appCue.space.arrowOffset,
+    transform: [{
+      rotate: '-90deg'
+    }],
+    height: '100%'
+  });
+});
+
+/**
+ * Calculates the position of an element based on its placement relative to a reference position.
+ *
+ * @param {Object} params - The parameters for calculating the position.
+ * @param {Object} params.position - The position and size of target element.
+ * @param {number} params.position.pageX - The X coordinate of the target position.
+ * @param {number} params.position.pageY - The Y coordinate of the target position.
+ * @param {number} params.position.width - The width of the reference element.
+ * @param {number} params.position.height - The height of the reference element.
+ * @param {Object} params.contentSize - The size of the App Cue content.
+ * @param {number} params.contentSize.width - The width of the content.
+ * @param {number} params.contentSize.height - The height of the content.
+ * @param {Placement} params.placement - The placement of the content relative to the reference position ('top', 'bottom', 'right', 'left').
+ * @param {number} params.offset - The offset distance to display an arrow.
+ *
+ * @returns {Object} The calculated position of the App Cue.
+ * @returns {number} return.x - The X coordinate of the App Cue.
+ * @returns {number} return.y - The Y coordinate of the App Cue.
+ */
+var calculatePosition = function calculatePosition(_ref) {
+  var placement = _ref.placement,
+    position = _ref.position,
+    contentSize = _ref.contentSize,
+    offset = _ref.offset;
+  switch (placement) {
+    case 'top':
+      {
+        return {
+          // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
+          x: position.pageX + (position.width - contentSize.width) / 2,
+          // The Y coordinate is calculated by subtracting the height of the content and the offset from the Y coordinate of the target element
+          y: position.pageY - contentSize.height - offset
+        };
+      }
+    case 'bottom':
+      {
+        return {
+          // The X coordinate is calculated by adding the half of the width of the target element to the X coordinate of the target element.
+          x: position.pageX + (position.width - contentSize.width) / 2,
+          // The Y coordinate is calculated by adding the height of the target element and the offset to the Y coordinate of the target element.
+          y: position.pageY + position.height + offset
+        };
+      }
+    case 'right':
+      {
+        return {
+          // The X coordinate is calculated by adding the width of the target element and the offset to the X coordinate of the target element.
+          x: position.pageX + position.width + offset,
+          // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
+          y: position.pageY + (position.height - contentSize.height) / 2
+        };
+      }
+    case 'left':
+      {
+        return {
+          // The X coordinate is calculated by subtracting the width of the content and the offset from the X coordinate of the target element.
+          x: position.pageX - contentSize.width - offset,
+          // The Y coordinate is calculated by adding half of the height of the target element to the Y coordinate of the target element.
+          y: position.pageY + (position.height - contentSize.height) / 2
+        };
+      }
+  }
+};
+/**
+ * Calculates the maximum width of the content based on its position, offset, placement, and window width.
+ *
+ * @param {Object} params - The parameters for the calculation.
+ * @param {Object} params.position - The position and dimensions of the target element.
+ * @param {number} params.position.pageX - The X coordinate of the target element.
+ * @param {number} params.position.pageY - The Y coordinate of the target element.
+ * @param {number} params.position.width - The width of the target element.
+ * @param {number} params.position.height - The height of the target element.
+ * @param {number} params.offset - The offset value to display an arrow.
+ * @param {Placement} params.placement - The placement of the content relative to the element.
+ * @param {number} params.windowWidth - The width of the window.
+ *
+ * @returns {number | undefined} The maximum width of the content.
+ */
+var calulateContentMaxWidth = function calulateContentMaxWidth(_ref2) {
+  var position = _ref2.position,
+    offset = _ref2.offset,
+    placement = _ref2.placement,
+    windowWidth = _ref2.windowWidth;
+  switch (placement) {
+    case 'top':
+      {
+        return undefined;
+      }
+    case 'bottom':
+      {
+        return undefined;
+      }
+    case 'right':
+      {
+        return windowWidth - position.pageX - position.width - offset;
+      }
+    case 'left':
+      {
+        return position.pageX - offset;
+      }
+  }
+};
+
+var AppCue = function AppCue(_ref) {
+  var target = _ref.target,
+    content = _ref.content,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'top' : _ref$placement,
+    style = _ref.style,
+    testID = _ref.testID;
+  var targetContainerRef = React.useRef(null);
+  var _React$useState = React__namespace.default.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    visible = _React$useState2[0],
+    setVisible = _React$useState2[1];
+  var theme = useTheme();
+  var offset = theme.__hd__.appCue.space.offset;
+  var _React$useState3 = React__namespace.default.useState({
+      pageX: 0,
+      pageY: 0,
+      width: 0,
+      height: 0
+    }),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    position = _React$useState4[0],
+    setPosition = _React$useState4[1];
+  var _React$useState5 = React__namespace.default.useState({
+      width: 0,
+      height: 0
+    }),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    contentSize = _React$useState6[0],
+    setContentSize = _React$useState6[1];
+  var doMeasure = React.useCallback(function (cb) {
+    var _targetContainerRef$c;
+    (_targetContainerRef$c = targetContainerRef.current) === null || _targetContainerRef$c === void 0 || _targetContainerRef$c.measure(function (_, __, width, height, pageX, pageY) {
+      setPosition({
+        pageX: pageX,
+        pageY: pageY,
+        width: width,
+        height: height
+      });
+      cb === null || cb === void 0 || cb();
+    });
+  }, []);
+  var handleOpen = function handleOpen() {
+    doMeasure(function () {
+      return setVisible(true);
+    });
+  };
+  React.useLayoutEffect(function () {
+    doMeasure();
+  }, [doMeasure]);
+  var enhancedTarget = /*#__PURE__*/React__namespace.default.cloneElement(target, {
+    onPress: function onPress() {
+      var _target$props, _target$props$onPress;
+      handleOpen();
+      (_target$props = target.props) === null || _target$props === void 0 || (_target$props$onPress = _target$props.onPress) === null || _target$props$onPress === void 0 || _target$props$onPress.call(_target$props);
+    }
+  }, target.props.children);
+  var measureContent = function measureContent(event) {
+    setContentSize({
+      width: event.nativeEvent.layout.width,
+      height: event.nativeEvent.layout.height
+    });
+  };
+  var pos = calculatePosition({
+    position: position,
+    contentSize: contentSize,
+    placement: placement,
+    offset: offset
+  });
+  var _useWindowDimensions = reactNative.useWindowDimensions(),
+    windowWidth = _useWindowDimensions.width;
+  var maxWidth = calulateContentMaxWidth({
+    position: position,
+    offset: offset,
+    placement: placement,
+    windowWidth: windowWidth
+  });
+  var renderContent = function renderContent() {
+    if (typeof content === 'string') {
+      return /*#__PURE__*/React__namespace.default.createElement(Typography.Body, {
+        intent: "inverted"
+      }, content);
+    }
+    return content;
+  };
+  return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableWithoutFeedback, {
+    onPress: handleOpen
+  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+    collapsable: false,
+    ref: targetContainerRef,
+    style: {
+      alignSelf: 'center'
+    }
+  }, enhancedTarget)), /*#__PURE__*/React__namespace.default.createElement(reactNative.Modal, {
+    animationType: "fade",
+    visible: visible,
+    onDismiss: function onDismiss() {
+      return setVisible(false);
+    },
+    transparent: true,
+    presentationStyle: "overFullScreen",
+    statusBarTranslucent: true
+  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableWithoutFeedback, {
+    testID: testID && "".concat(testID, "-backdrop"),
+    onPress: function onPress() {
+      return setVisible(false);
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+    style: reactNative.StyleSheet.flatten([{
+      position: 'absolute',
+      top: pos.y,
+      left: pos.x
+    }, style]),
+    onLayout: measureContent,
+    testID: testID
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledContent$1, {
+    style: {
+      maxWidth: maxWidth
+    },
+    testID: testID && "".concat(testID, "-content")
+  }, renderContent()), /*#__PURE__*/React__namespace.default.createElement(StyledIconContainer$1, {
+    themePlacement: placement,
+    testID: testID && "".concat(testID, "-arrow")
+  }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    icon: "caret-down",
+    size: "small"
+  })))))));
+};
+
 var StyledContainer$8 = index$a(reactNative.View)({
   alignItems: 'center',
   flexDirection: 'row'
@@ -13175,16 +13499,16 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
   var getShadowStyles = function getShadowStyles() {
     switch (themeVariant) {
       case 'compact':
-      case 'filled':
+      case 'filter':
         return _objectSpread2({}, theme.__hd__.chip.shadows.filledWrapper);
-      case 'outlined':
+      case 'selection':
       case 'compact-outlined':
         return undefined;
     }
   };
   var getBorderStyles = function getBorderStyles() {
     switch (themeVariant) {
-      case 'outlined':
+      case 'selection':
       case 'compact-outlined':
         {
           return {
@@ -13193,7 +13517,7 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
           };
         }
       case 'compact':
-      case 'filled':
+      case 'filter':
         {
           return {
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
@@ -13204,14 +13528,14 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
   var getBackgroundStyles = function getBackgroundStyles() {
     if (themeSelected) {
       switch (themeVariant) {
-        case 'outlined':
+        case 'selection':
         case 'compact-outlined':
           {
             return {
               backgroundColor: themeSelected ? theme.__hd__.chip.colors.outlinedSelectedBackground : theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
-        case 'filled':
+        case 'filter':
         case 'compact':
           {
             return {
@@ -13221,14 +13545,14 @@ var StyledChipWrapper = index$a(reactNative.TouchableOpacity)(function (_ref) {
       }
     } else {
       switch (themeVariant) {
-        case 'outlined':
+        case 'selection':
         case 'compact-outlined':
           {
             return {
               backgroundColor: theme.__hd__.chip.colors.outlinedDefaultBackground
             };
           }
-        case 'filled':
+        case 'filter':
         case 'compact':
           {
             return {
@@ -13281,10 +13605,24 @@ var getChipLabel = function getChipLabel(label) {
   }
   return label;
 };
+var getChipVariant = function getChipVariant() {
+  var variant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'selection';
+  switch (variant) {
+    case 'selection':
+    case 'filter':
+    case 'compact':
+    case 'compact-outlined':
+      return variant;
+    case 'outlined':
+      return 'selection';
+    case 'filled':
+      return 'filter';
+  }
+};
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
+    variant = _ref$variant === void 0 ? 'selection' : _ref$variant,
     _ref$selected = _ref.selected,
     selected = _ref$selected === void 0 ? false : _ref$selected,
     icon = _ref.icon,
@@ -13292,13 +13630,15 @@ var Chip = function Chip(_ref) {
     _ref$showSelectedIcon = _ref.showSelectedIcon,
     showSelectedIcon = _ref$showSelectedIcon === void 0 ? true : _ref$showSelectedIcon,
     otherProps = _objectWithoutProperties(_ref, _excluded$s);
-  var shouldShowSelectedIcon = (variant === 'outlined' || variant === 'compact-outlined') && selected && showSelectedIcon;
+  useDeprecation('Chip variant `outlined` and `filled` are deprecated.', variant === 'outlined' || variant === 'filled');
+  var renamedVariant = getChipVariant(variant);
+  var shouldShowSelectedIcon = (renamedVariant === 'selection' || renamedVariant === 'compact-outlined') && selected && showSelectedIcon;
   var chipLabel = React.useMemo(function () {
     return getChipLabel(label);
   }, [label]);
   return /*#__PURE__*/React__namespace.default.createElement(StyledChipWrapper, _extends$1({
     onPress: onPress,
-    themeVariant: variant,
+    themeVariant: renamedVariant,
     themeSelected: selected
   }, otherProps), icon && /*#__PURE__*/React__namespace.default.createElement(Box, {
     marginRight: "small"
@@ -16900,7 +17240,7 @@ var Progress = {
   Step: ProgressStep
 };
 
-var Slider = function Slider(_ref) {
+var Slider$2 = function Slider(_ref) {
   var _ref$minimumValue = _ref.minimumValue,
     minimumValue = _ref$minimumValue === void 0 ? 0 : _ref$minimumValue,
     _ref$maximumValue = _ref.maximumValue,
@@ -16934,6 +17274,134 @@ var Slider = function Slider(_ref) {
   });
 };
 
+var StyledMarker = index$a(reactNative.View)(function (_ref) {
+  var themeDisabled = _ref.themeDisabled,
+    theme = _ref.theme;
+  return _objectSpread2({
+    height: theme.__hd__.slider.sizes.markerHeight,
+    width: theme.__hd__.slider.sizes.markerWidth,
+    borderRadius: theme.__hd__.slider.radii.marker,
+    backgroundColor: themeDisabled ? theme.__hd__.slider.colors.disabledThumbTint : theme.__hd__.slider.colors.thumbTint
+  }, theme.__hd__.slider.shadows.marker);
+});
+
+var Slider$1 = function Slider(_ref) {
+  var minimumValue = _ref.minimumValue,
+    maximumValue = _ref.maximumValue,
+    _ref$step = _ref.step,
+    step = _ref$step === void 0 ? 1 : _ref$step,
+    value = _ref.value,
+    onValueChange = _ref.onValueChange,
+    onSlidingStart = _ref.onSlidingStart,
+    onSlidingComplete = _ref.onSlidingComplete,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    style = _ref.style,
+    testID = _ref.testID,
+    _ref$allowOverlap = _ref.allowOverlap,
+    allowOverlap = _ref$allowOverlap === void 0 ? false : _ref$allowOverlap;
+  var theme = useTheme();
+  var handleTwoWaySliderChange = React__namespace.default.useCallback(function (values) {
+    if (onValueChange) {
+      onValueChange({
+        start: values[0],
+        end: values[1]
+      });
+    }
+  }, [onValueChange]);
+  var _useState = React.useState({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    layoutSize = _useState2[0],
+    setLayoutSize = _useState2[1];
+  var nativeValue = React.useMemo(function () {
+    var _value$start, _value$end;
+    return [(_value$start = value === null || value === void 0 ? void 0 : value.start) !== null && _value$start !== void 0 ? _value$start : minimumValue, (_value$end = value === null || value === void 0 ? void 0 : value.end) !== null && _value$end !== void 0 ? _value$end : maximumValue];
+  }, [value === null || value === void 0 ? void 0 : value.start, value === null || value === void 0 ? void 0 : value.end, minimumValue, maximumValue]);
+  var _theme$__hd__$slider$ = theme.__hd__.slider.colors,
+    trackBackground = _theme$__hd__$slider$.trackBackground,
+    disabledTrackBackground = _theme$__hd__$slider$.disabledTrackBackground,
+    thumbTint = _theme$__hd__$slider$.thumbTint,
+    disabledThumbTint = _theme$__hd__$slider$.disabledThumbTint;
+  var trackHeight = theme.__hd__.slider.sizes.trackHeight;
+  // Define styles for disabled and enabled states
+  var disabledStyles = {
+    track: {
+      backgroundColor: disabledTrackBackground,
+      height: trackHeight
+    },
+    selected: {
+      backgroundColor: disabledThumbTint
+    }
+  };
+  var enabledStyles = {
+    track: {
+      backgroundColor: trackBackground,
+      height: trackHeight
+    },
+    selected: {
+      backgroundColor: thumbTint
+    }
+  };
+  // Use styles based on the `disabled` state
+  var trackStyle = disabled ? disabledStyles.track : enabledStyles.track;
+  var selectedStyle = disabled ? disabledStyles.selected : enabledStyles.selected;
+  var handleOnValueChangeStart = React.useCallback(function () {
+    if (onSlidingStart) {
+      onSlidingStart();
+    }
+  }, [onSlidingStart]);
+  var handleOnValueChangeFinish = React.useCallback(function (values) {
+    if (onSlidingComplete) {
+      onSlidingComplete({
+        start: values[0],
+        end: values[1]
+      });
+    }
+  }, [onSlidingComplete]);
+  var onLayoutCallback = React.useCallback(function (event) {
+    setLayoutSize({
+      width: event.nativeEvent.layout.width,
+      height: event.nativeEvent.layout.height
+    });
+  }, []);
+  var CustomMarker = React.useMemo(function () {
+    return function () {
+      return /*#__PURE__*/React__namespace.default.createElement(StyledMarker, {
+        themeDisabled: disabled
+      });
+    };
+  }, [disabled]);
+  return /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+    onLayout: onLayoutCallback,
+    style: style,
+    testID: testID,
+    accessibilityState: {
+      disabled: disabled
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(MultiSlider__default.default, {
+    values: nativeValue,
+    onValuesChange: handleTwoWaySliderChange,
+    onValuesChangeStart: handleOnValueChangeStart,
+    onValuesChangeFinish: handleOnValueChangeFinish,
+    sliderLength: layoutSize.width,
+    min: minimumValue,
+    max: maximumValue,
+    step: step,
+    enabledOne: !disabled,
+    enabledTwo: !disabled,
+    allowOverlap: allowOverlap,
+    trackStyle: trackStyle,
+    selectedStyle: selectedStyle,
+    customMarker: CustomMarker
+  }));
+};
+
+var Slider = Slider$2;
+Slider.Range = Slider$1;
+
 var StyledView$1 = index$a(reactNative.View)();
 var StyledSpinnerContainer = index$a(reactNative.View)({
   height: '100%',
@@ -18409,7 +18877,8 @@ var HeaderTabWrapper$1 = index$a(reactNative.View)(function (_ref) {
   return {
     paddingHorizontal: Math.max(themeInsets.left, themeInsets.right),
     borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
-    borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom
+    borderBottomWidth: theme.__hd__.tabs.borderWidths.headerBottom,
+    backgroundColor: theme.__hd__.tabs.colors.headerBackground
   };
 });
 var HeaderTab = index$a(reactNative.View)({
@@ -18471,9 +18940,11 @@ var TabContainer = index$a(reactNative.View)({
   overflow: 'hidden'
 });
 var HeaderTabWrapper = index$a(reactNative.View)(function (_ref) {
-  var themeInsets = _ref.themeInsets;
+  var themeInsets = _ref.themeInsets,
+    theme = _ref.theme;
   return {
-    paddingHorizontal: Math.max(themeInsets.left, themeInsets.right)
+    paddingHorizontal: Math.max(themeInsets.left, themeInsets.right),
+    backgroundColor: theme.__hd__.tabs.colors.headerBackground
   };
 });
 var HeaderTabItem = index$a(reactNative.Animated.View)(function (_ref2) {
@@ -37457,6 +37928,7 @@ var FloatingIsland = function FloatingIsland(_ref2) {
 
 exports.Accordion = Accordion;
 exports.Alert = Alert;
+exports.AppCue = AppCue;
 exports.Attachment = Attachment;
 exports.Avatar = index$9;
 exports.Badge = Badge$1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.82.2-alpha.2",
+  "version": "8.83.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,13 +22,14 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.45.1",
+    "@hero-design/colors": "8.45.2",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.9.21",
     "nanoid": "^5.0.9"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.10",
+    "@hero-design/react-native-month-year-picker": "^8.42.11",
+    "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "react": "18.2.0",
@@ -51,7 +52,8 @@
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.8.0",
     "@hero-design/eslint-plugin": "9.2.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.10",
+    "@hero-design/react-native-month-year-picker": "^8.42.11",
+    "@ptomasroos/react-native-multi-slider": "^2.2.2",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "@rollup/plugin-babel": "^6.0.4",