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

package/es/index.js

@@ -1,12 +1,13 @@
 import * as reactNative from 'react-native';
-import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, Modal as Modal$1, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, useWindowDimensions, Keyboard, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
+import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, useWindowDimensions, TouchableWithoutFeedback, Modal as Modal$1, Image as Image$1, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, FlatList, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, Keyboard, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
 import * as React from 'react';
-import React__default, { useMemo, useEffect, useCallback, useRef, useState, createContext, useContext, forwardRef, memo, useReducer, useLayoutEffect, useImperativeHandle, isValidElement } from 'react';
+import React__default, { useMemo, useEffect, useCallback, useRef, useLayoutEffect, useState, createContext, useContext, forwardRef, memo, useReducer, useImperativeHandle, isValidElement } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MonthYearPickerViewIOS, MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import RnSlider from '@react-native-community/slider';
+import MultiSlider from '@ptomasroos/react-native-multi-slider';
 import { RectButton, GestureHandlerRootView, Swipeable as Swipeable$1 } from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
 import PagerView from 'react-native-pager-view';
@@ -3304,10 +3305,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
   };
 };
 
@@ -3450,7 +3469,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,
@@ -4053,6 +4073,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;
@@ -4061,6 +4101,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),
@@ -8206,6 +8247,288 @@ var Alert = function Alert(_ref2) {
   })) : null);
 };
 
+var StyledContent$1 = index$a(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(View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    width: '100%',
+    height: '100%',
+    backgroundColor: theme.__hd__.appCue.colors.backdropColor
+  };
+});
+var StyledIconContainer$1 = index$a(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 = useRef(null);
+  var _React$useState = React__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__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__default.useState({
+      width: 0,
+      height: 0
+    }),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    contentSize = _React$useState6[0],
+    setContentSize = _React$useState6[1];
+  var doMeasure = 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);
+    });
+  };
+  useLayoutEffect(function () {
+    doMeasure();
+  }, [doMeasure]);
+  var enhancedTarget = /*#__PURE__*/React__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 = 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__default.createElement(Typography.Body, {
+        intent: "inverted"
+      }, content);
+    }
+    return content;
+  };
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
+    onPress: handleOpen
+  }, /*#__PURE__*/React__default.createElement(View, {
+    collapsable: false,
+    ref: targetContainerRef,
+    style: {
+      alignSelf: 'center'
+    }
+  }, enhancedTarget)), /*#__PURE__*/React__default.createElement(Modal$1, {
+    animationType: "fade",
+    visible: visible,
+    onDismiss: function onDismiss() {
+      return setVisible(false);
+    },
+    transparent: true,
+    presentationStyle: "overFullScreen",
+    statusBarTranslucent: true
+  }, /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
+    testID: testID && "".concat(testID, "-backdrop"),
+    onPress: function onPress() {
+      return setVisible(false);
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledContainer$9, null, /*#__PURE__*/React__default.createElement(View, {
+    style: StyleSheet$1.flatten([{
+      position: 'absolute',
+      top: pos.y,
+      left: pos.x
+    }, style]),
+    onLayout: measureContent,
+    testID: testID
+  }, /*#__PURE__*/React__default.createElement(StyledContent$1, {
+    style: {
+      maxWidth: maxWidth
+    },
+    testID: testID && "".concat(testID, "-content")
+  }, renderContent()), /*#__PURE__*/React__default.createElement(StyledIconContainer$1, {
+    themePlacement: placement,
+    testID: testID && "".concat(testID, "-arrow")
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: "caret-down",
+    size: "small"
+  })))))));
+};
+
 var StyledContainer$8 = index$a(View)({
   alignItems: 'center',
   flexDirection: 'row'
@@ -13148,16 +13471,16 @@ var StyledChipWrapper = index$a(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 {
@@ -13166,7 +13489,7 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
           };
         }
       case 'compact':
-      case 'filled':
+      case 'filter':
         {
           return {
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
@@ -13177,14 +13500,14 @@ var StyledChipWrapper = index$a(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 {
@@ -13194,14 +13517,14 @@ var StyledChipWrapper = index$a(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 {
@@ -13254,10 +13577,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,
@@ -13265,13 +13602,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 = useMemo(function () {
     return getChipLabel(label);
   }, [label]);
   return /*#__PURE__*/React__default.createElement(StyledChipWrapper, _extends$1({
     onPress: onPress,
-    themeVariant: variant,
+    themeVariant: renamedVariant,
     themeSelected: selected
   }, otherProps), icon && /*#__PURE__*/React__default.createElement(Box, {
     marginRight: "small"
@@ -16873,7 +17212,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,
@@ -16907,6 +17246,134 @@ var Slider = function Slider(_ref) {
   });
 };
 
+var StyledMarker = index$a(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__default.useCallback(function (values) {
+    if (onValueChange) {
+      onValueChange({
+        start: values[0],
+        end: values[1]
+      });
+    }
+  }, [onValueChange]);
+  var _useState = useState({
+      width: 0,
+      height: 0
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    layoutSize = _useState2[0],
+    setLayoutSize = _useState2[1];
+  var nativeValue = 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 = useCallback(function () {
+    if (onSlidingStart) {
+      onSlidingStart();
+    }
+  }, [onSlidingStart]);
+  var handleOnValueChangeFinish = useCallback(function (values) {
+    if (onSlidingComplete) {
+      onSlidingComplete({
+        start: values[0],
+        end: values[1]
+      });
+    }
+  }, [onSlidingComplete]);
+  var onLayoutCallback = useCallback(function (event) {
+    setLayoutSize({
+      width: event.nativeEvent.layout.width,
+      height: event.nativeEvent.layout.height
+    });
+  }, []);
+  var CustomMarker = useMemo(function () {
+    return function () {
+      return /*#__PURE__*/React__default.createElement(StyledMarker, {
+        themeDisabled: disabled
+      });
+    };
+  }, [disabled]);
+  return /*#__PURE__*/React__default.createElement(View, {
+    onLayout: onLayoutCallback,
+    style: style,
+    testID: testID,
+    accessibilityState: {
+      disabled: disabled
+    }
+  }, /*#__PURE__*/React__default.createElement(MultiSlider, {
+    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(View)();
 var StyledSpinnerContainer = index$a(View)({
   height: '100%',
@@ -18382,7 +18849,8 @@ var HeaderTabWrapper$1 = index$a(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(View)({
@@ -18444,9 +18912,11 @@ var TabContainer = index$a(View)({
   overflow: 'hidden'
 });
 var HeaderTabWrapper = index$a(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(Animated.View)(function (_ref2) {
@@ -37428,4 +37898,4 @@ var FloatingIsland = function FloatingIsland(_ref2) {
   }));
 };
 
-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, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, 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, swagLightJobsSystemPalette, swagSystemPalette as swagLightSystemPalette, swagSystemPalette$1 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+export { Accordion, Alert, AppCue, 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, Chip, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List, index$6 as MapPin, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, ScrollViewWithFAB, Search, SectionHeading, SectionListWithFAB, index$4 as Select, Skeleton, Slider, Spinner, Success, 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, swagLightJobsSystemPalette, swagSystemPalette as swagLightSystemPalette, swagSystemPalette$1 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };