@hero-design/rn 8.83.0-test.0 → 8.83.0

package/es/index.js

@@ -1,7 +1,7 @@
 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';
@@ -2043,15 +2043,25 @@ var getFontSizes = function getFontSizes(baseFontSize) {
   });
   return {
     '7xlarge': scale(fontSizes[10]),
+    // 42
     '6xlarge': scale(fontSizes[9]),
+    //  36
     xxxxxlarge: scale(fontSizes[8]),
+    // 32
     xxxxlarge: scale(fontSizes[7]),
+    //  28
     xxxlarge: scale(fontSizes[6]),
+    //   24
     xxlarge: scale(fontSizes[5]),
+    //    20
     xlarge: scale(fontSizes[4]),
+    //     18
     large: scale(fontSizes[3]),
+    //      16
     medium: scale(fontSizes[2]),
+    //     14
     small: scale(fontSizes[1]),
+    //      12
     xsmall: scale(fontSizes[0]) //     10
   };
 };
@@ -2076,15 +2086,25 @@ var getLineHeights = function getLineHeights(fontSizes) {
 var getSpace = function getSpace(baseSpace) {
   return {
     xxsmall: scale(baseSpace * 0.25),
+    // 2
     xsmall: scale(baseSpace * 0.5),
+    // 4
     small: scale(baseSpace),
+    // 8
     smallMedium: scale(baseSpace) * 1.5,
+    // 12
     medium: scale(baseSpace * 2),
+    // 16
     large: scale(baseSpace * 3),
+    // 24
     xlarge: scale(baseSpace * 4),
+    // 32
     xxlarge: scale(baseSpace * 5),
+    // 40
     xxxlarge: scale(baseSpace * 6),
+    // 48
     xxxxlarge: scale(baseSpace * 7),
+    // 56
     '5xlarge': scale(baseSpace * 8) // 64
   };
 };
@@ -2092,12 +2112,19 @@ var getSpace = function getSpace(baseSpace) {
 var getSizes = function getSizes(baseSize) {
   return _objectSpread2(_objectSpread2({}, getSpace(baseSize)), {}, {
     xxxxxlarge: scale(baseSize * 8),
+    // 64
     '6xlarge': scale(baseSize * 9),
+    // 72
     '7xlarge': scale(baseSize * 10),
+    // 80
     '9xlarge': scale(baseSize * 12),
+    // 96
     '14xlarge': scale(baseSize * 17),
+    // 136
     '15xlarge': scale(baseSize * 18),
+    // 144
     '18xlarge': scale(baseSize * 21),
+    // 168
     '19xlarge': scale(baseSize * 22) // 176
   });
 };
@@ -2105,6 +2132,7 @@ var getSizes = function getSizes(baseSize) {
 var getBorderWidths = function getBorderWidths(baseBorderWidth) {
   return {
     base: baseBorderWidth,
+    // 1
     medium: baseBorderWidth * 2 // 2
   };
 };
@@ -2113,11 +2141,17 @@ var getRadii = function getRadii(baseRadius) {
   return {
     rounded: 999,
     base: baseRadius,
+    // 4
     medium: baseRadius * 2,
+    // 8
     large: baseRadius * 3,
+    // 12
     xlarge: baseRadius * 4,
+    // 16
     xxlarge: baseRadius * 5,
+    // 20
     xxxlarge: baseRadius * 6,
+    // 24
     '5xlarge': baseRadius * 8 // 32
   };
 };
@@ -3067,6 +3101,7 @@ var getProgressTheme = function getProgressTheme(theme) {
     completeness: {
       primary: theme.colors.primary,
       success: theme.colors.success,
+      // should be emerald dark 15
       warning: theme.colors.warning,
       danger: theme.colors.error,
       info: theme.colors.info,
@@ -3279,12 +3314,19 @@ var getSliderTheme = function getSliderTheme(theme) {
     marker: theme.shadows["default"]
   };
   var sizes = {
-    trackHeight: theme.sizes.xsmall
+    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,
     shadows: shadows,
-    sizes: sizes
+    sizes: sizes,
+    radii: radii
   };
 };
 
@@ -3427,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,
@@ -4030,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;
@@ -4038,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),
@@ -8183,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'
@@ -8288,6 +8634,7 @@ var StyledText$2 = index$a(Typography.Text)(function (_ref2) {
 
     android: {
       lineHeight: null,
+      // center on android
       marginTop: theme.__hd__.avatar.spaces.titleMarginTopForAndroid[themeSize]
     },
     web: {
@@ -9431,6 +9778,7 @@ var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
   return _objectSpread2({
     flexShrink: 1,
     lineHeight: theme.__hd__.button.lineHeights.titleOfTextVariant,
+    // align text on Android
     textAlign: 'center'
   }, themeStyling());
 });
@@ -13123,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 {
@@ -13141,7 +13489,7 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
           };
         }
       case 'compact':
-      case 'filled':
+      case 'filter':
         {
           return {
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
@@ -13152,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 {
@@ -13169,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 {
@@ -13229,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,
@@ -13240,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"
@@ -14273,6 +14637,7 @@ var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, he
   return {
     list: uniqSnapPointOffsetValues,
     minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
+    // Furthest from max height
     maxHeightOffset: 0 // Max height
   };
 };
@@ -16600,6 +16965,7 @@ var ProgressCircle = function ProgressCircle(_ref2) {
   });
   var interpolateOpacityRightHalf = progressAnimatedValue.current.interpolate({
     inputRange: [50, 51],
+    // Transition between left and right half
     outputRange: [1, 0],
     extrapolate: 'clamp'
   });
@@ -16724,6 +17090,7 @@ var ProgressBar = function ProgressBar(_ref) {
   });
   var interpolateBorderRadius = progressAnimatedValue.current.interpolate({
     inputRange: [99, 100],
+    // Transition range to remove bother when reached 100%
     outputRange: [999, 0],
     extrapolate: 'clamp'
   });
@@ -16879,6 +17246,17 @@ var Slider$2 = 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,
@@ -16920,23 +17298,28 @@ var Slider$1 = function Slider(_ref) {
     thumbTint = _theme$__hd__$slider$.thumbTint,
     disabledThumbTint = _theme$__hd__$slider$.disabledThumbTint;
   var trackHeight = theme.__hd__.slider.sizes.trackHeight;
-  var trackStyle = useMemo(function () {
-    return {
-      backgroundColor: disabled ? disabledTrackBackground : trackBackground,
+  // Define styles for disabled and enabled states
+  var disabledStyles = {
+    track: {
+      backgroundColor: disabledTrackBackground,
       height: trackHeight
-    };
-  }, [disabled, disabledTrackBackground, trackBackground, trackHeight]);
-  var markerShadow = theme.__hd__.slider.shadows.marker;
-  var makerStyle = useMemo(function () {
-    return _objectSpread2({
-      backgroundColor: disabled ? disabledThumbTint : thumbTint
-    }, markerShadow);
-  }, [disabled, disabledThumbTint, thumbTint, markerShadow]);
-  var selectedStyle = useMemo(function () {
-    return {
-      backgroundColor: disabled ? disabledThumbTint : thumbTint
-    };
-  }, [disabled, disabledThumbTint, thumbTint, markerShadow]);
+    },
+    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();
@@ -16956,6 +17339,13 @@ var Slider$1 = function Slider(_ref) {
       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,
@@ -16976,8 +17366,8 @@ var Slider$1 = function Slider(_ref) {
     enabledTwo: !disabled,
     allowOverlap: allowOverlap,
     trackStyle: trackStyle,
-    markerStyle: makerStyle,
-    selectedStyle: selectedStyle
+    selectedStyle: selectedStyle,
+    customMarker: CustomMarker
   }));
 };
 
@@ -18459,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)({
@@ -18521,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) {
@@ -37505,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 };