@hero-design/rn 8.83.0-test.0 → 8.84.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
   };
 };
@@ -2450,13 +2484,23 @@ var getButtonTheme = function getButtonTheme(theme) {
     "default": theme.space.xxsmall
   };
   var space = {
-    buttonPadding: theme.space.medium,
-    textButtonPadding: theme.space.smallMedium,
-    iconPadding: theme.space.smallMedium,
+    "default": {
+      buttonPadding: theme.space.medium,
+      iconPadding: theme.space.smallMedium,
+      textButtonPadding: theme.space.smallMedium
+    },
+    compact: {
+      buttonPaddingVertical: theme.space.small,
+      buttonPaddingHorizontal: theme.space.medium,
+      iconPadding: theme.space.small
+    },
     utilityPadding: theme.space.small
   };
   var sizes = {
-    iconSize: theme.fontSizes.xxlarge
+    iconSize: {
+      "default": theme.fontSizes.xxlarge,
+      compact: theme.fontSizes.small
+    }
   };
   var radii = {
     "default": theme.radii['5xlarge'],
@@ -3067,6 +3111,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 +3324,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 +3479,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 +4083,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 +4111,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 +8257,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 +8644,7 @@ var StyledText$2 = index$a(Typography.Text)(function (_ref2) {
 
     android: {
       lineHeight: null,
+      // center on android
       marginTop: theme.__hd__.avatar.spaces.titleMarginTopForAndroid[themeSize]
     },
     web: {
@@ -9287,7 +9644,15 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
   }, nativeProps), Array.from(new Array(count), renderLoadingDot, themeVariant));
 };
 
-var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled, loading) {
+var getButtonHeight = function getButtonHeight(themeIsCompact) {
+  switch (themeIsCompact) {
+    case true:
+      return scale(36);
+    default:
+      return scale(60);
+  }
+};
+var genFilledContainerStyles = function genFilledContainerStyles(theme, intent, disabled, loading, compact) {
   var backgroundColorStyling = function backgroundColorStyling() {
     if (!loading && disabled) {
       return {
@@ -9298,17 +9663,23 @@ var genFilledContainerStyles = function genFilledContainerStyles(theme, intent,
       backgroundColor: theme.__hd__.button.colors[intent]
     };
   };
-  return _objectSpread2({
-    height: scale(60),
+  return _objectSpread2(_objectSpread2({
+    height: getButtonHeight(compact),
     flexDirection: 'row',
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
+  }, compact ? {
+    alignSelf: 'flex-start',
+    paddingVertical: theme.__hd__.button.space.compact.buttonPaddingVertical,
+    paddingHorizontal: theme.__hd__.button.space["default"].buttonPadding
+  } : {
     alignSelf: 'stretch',
-    padding: theme.__hd__.button.space.buttonPadding,
+    padding: theme.__hd__.button.space["default"].buttonPadding
+  }), {}, {
     borderRadius: theme.__hd__.button.radii["default"]
   }, backgroundColorStyling());
 };
-var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled, loading) {
+var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent, disabled, loading, compact) {
   var borderColorStyling = function borderColorStyling() {
     if (!loading && disabled) {
       return {
@@ -9319,13 +9690,19 @@ var genOutlineContainerStyles = function genOutlineContainerStyles(theme, intent
       borderColor: theme.__hd__.button.colors[intent]
     };
   };
-  return _objectSpread2({
-    height: scale(60),
+  return _objectSpread2(_objectSpread2({
+    height: getButtonHeight(compact),
     flexDirection: 'row',
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems: 'center'
+  }, compact ? {
+    alignSelf: 'flex-start',
+    paddingVertical: theme.__hd__.button.space.compact.buttonPaddingVertical - theme.__hd__.button.borderWidth["default"],
+    paddingHorizontal: theme.__hd__.button.space["default"].buttonPadding - theme.__hd__.button.borderWidth["default"]
+  } : {
     alignSelf: 'stretch',
-    padding: theme.__hd__.button.space.buttonPadding - theme.__hd__.button.borderWidth["default"],
+    padding: theme.__hd__.button.space["default"].buttonPadding - theme.__hd__.button.borderWidth["default"]
+  }), {}, {
     borderWidth: theme.__hd__.button.borderWidth["default"],
     borderRadius: theme.__hd__.button.radii["default"],
     backgroundColor: 'transparent'
@@ -9352,31 +9729,34 @@ var StyledButtonContainer = index$a(TouchableHighlight)(function (_ref) {
     _ref$loading = _ref.loading,
     loading = _ref$loading === void 0 ? false : _ref$loading,
     themeButtonVariant = _ref.themeButtonVariant,
-    themeInlineText = _ref.themeInlineText,
-    theme = _ref.theme;
+    _ref$themeInlineText = _ref.themeInlineText,
+    themeInlineText = _ref$themeInlineText === void 0 ? false : _ref$themeInlineText,
+    theme = _ref.theme,
+    _ref$themeIsCompact = _ref.themeIsCompact,
+    themeIsCompact = _ref$themeIsCompact === void 0 ? false : _ref$themeIsCompact;
   switch (themeButtonVariant) {
     case 'filled-primary':
-      return genFilledContainerStyles(theme, 'primary', disabled, loading);
+      return genFilledContainerStyles(theme, 'primary', disabled, loading, themeIsCompact);
     case 'filled-secondary':
-      return genFilledContainerStyles(theme, 'secondary', disabled, loading);
+      return genFilledContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'filled-danger':
-      return genFilledContainerStyles(theme, 'danger', disabled, loading);
+      return genFilledContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
     case 'outlined-primary':
-      return genOutlineContainerStyles(theme, 'primary', disabled, loading);
+      return genOutlineContainerStyles(theme, 'primary', disabled, loading, themeIsCompact);
     case 'outlined-secondary':
-      return genOutlineContainerStyles(theme, 'secondary', disabled, loading);
+      return genOutlineContainerStyles(theme, 'secondary', disabled, loading, themeIsCompact);
     case 'outlined-danger':
-      return genOutlineContainerStyles(theme, 'danger', disabled, loading);
+      return genOutlineContainerStyles(theme, 'danger', disabled, loading, themeIsCompact);
     case 'text-primary':
     case 'text-secondary':
     case 'text-danger':
       return {
-        height: themeInlineText ? undefined : scale(60),
+        height: themeInlineText ? undefined : getButtonHeight(themeIsCompact),
         borderRadius: theme.__hd__.button.radii.text,
         flexDirection: 'row',
         justifyContent: 'center',
         alignItems: 'center',
-        padding: themeInlineText ? 0 : theme.__hd__.button.space.textButtonPadding,
+        padding: themeInlineText ? 0 : theme.__hd__.button.space["default"].textButtonPadding,
         borderWidth: 0,
         backgroundColor: loading && !themeInlineText ? theme.__hd__.button.colors.textLoadingBackground : 'transparent'
       };
@@ -9413,6 +9793,7 @@ var StyledButtonText = index$a(Typography.Title)(function (_ref2) {
     textAlign: 'center'
   }, themeStyling());
 });
+var StyledSmallButtonText = StyledButtonText.withComponent(Typography.Body);
 var StyledButtonTitleOfVariantText = index$a(Typography.Body)(function (_ref3) {
   var disabled = _ref3.disabled,
     themeButtonVariant = _ref3.themeButtonVariant,
@@ -9431,20 +9812,22 @@ 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());
 });
 var StyledButtonIconWrapper = index$a(View)(function (_ref4) {
   var themePosition = _ref4.themePosition,
-    theme = _ref4.theme;
+    theme = _ref4.theme,
+    themeIsCompact = _ref4.themeIsCompact;
   switch (themePosition) {
     case 'left':
       return {
-        paddingRight: theme.__hd__.button.space.iconPadding
+        paddingRight: themeIsCompact ? theme.__hd__.button.space.compact.iconPadding : theme.__hd__.button.space["default"].iconPadding
       };
     case 'right':
       return {
-        paddingLeft: theme.__hd__.button.space.iconPadding
+        paddingLeft: themeIsCompact ? theme.__hd__.button.space.compact.iconPadding : theme.__hd__.button.space["default"].iconPadding
       };
   }
 });
@@ -9452,7 +9835,8 @@ var StyledButtonIcon = index$a(Icon)(function (_ref5) {
   var disabled = _ref5.disabled,
     themeButtonVariant = _ref5.themeButtonVariant,
     themeIsPressed = _ref5.themeIsPressed,
-    theme = _ref5.theme;
+    theme = _ref5.theme,
+    themeIsCompact = _ref5.themeIsCompact;
   var themeStyling = function themeStyling() {
     switch (themeButtonVariant) {
       case 'filled-primary':
@@ -9476,7 +9860,7 @@ var StyledButtonIcon = index$a(Icon)(function (_ref5) {
     }
   };
   return _objectSpread2({
-    fontSize: theme.__hd__.button.sizes.iconSize
+    fontSize: themeIsCompact ? theme.__hd__.button.sizes.iconSize.compact : theme.__hd__.button.sizes.iconSize["default"]
   }, themeStyling());
 });
 
@@ -9501,8 +9885,10 @@ var TEXT_VARIANTS = {
 var getThemeVariant = function getThemeVariant(variant, intent) {
   switch (variant) {
     case 'filled':
+    case 'filled-compact':
       return FILLED_VARIANTS[intent];
     case 'outlined':
+    case 'outlined-compact':
       return OUTLINED_VARIANTS[intent];
     case 'text':
       return TEXT_VARIANTS[intent];
@@ -9562,6 +9948,34 @@ var Button = function Button(_ref) {
     isPressed = _useState2[0],
     setIsPressed = _useState2[1];
   useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
+  var isCompactVariant = ['filled-compact', 'outlined-compact'].includes(variant);
+  var isRenderTextVariant = isTextVariant(themeVariant);
+  var renderTextVariantTitle = function renderTextVariantTitle() {
+    if (!isRenderTextVariant) return null;
+    return /*#__PURE__*/React__default.createElement(StyledButtonTitleOfVariantText, {
+      variant: isCompactVariant ? 'small-bold' : 'regular-bold',
+      ellipsizeMode: "tail",
+      numberOfLines: 1,
+      disabled: disabled,
+      themeButtonVariant: themeVariant,
+      themeIsPressed: isPressed
+    }, text);
+  };
+  var renderTitle = function renderTitle() {
+    return isCompactVariant ? /*#__PURE__*/React__default.createElement(StyledSmallButtonText, {
+      variant: "small",
+      ellipsizeMode: "tail",
+      numberOfLines: 1,
+      disabled: disabled,
+      themeButtonVariant: themeVariant
+    }, text) : /*#__PURE__*/React__default.createElement(StyledButtonText, {
+      level: "h5",
+      ellipsizeMode: "tail",
+      numberOfLines: 1,
+      disabled: disabled,
+      themeButtonVariant: themeVariant
+    }, text);
+  };
   return /*#__PURE__*/React__default.createElement(StyledButtonContainer, {
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
@@ -9578,39 +9992,31 @@ var Button = function Button(_ref) {
     },
     onPressOut: function onPressOut() {
       return isInlineText && setIsPressed(false);
-    }
+    },
+    themeIsCompact: isCompactVariant
   }, loading === true ? /*#__PURE__*/React__default.createElement(LoadingIndicator, {
     testID: "".concat(testID, "-loading-indicator"),
     themeVariant: themeVariant
   }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon !== undefined && /*#__PURE__*/React__default.createElement(StyledButtonIconWrapper, {
-    themePosition: "left"
+    themePosition: "left",
+    themeIsCompact: isCompactVariant
   }, isIconName(icon) ? /*#__PURE__*/React__default.createElement(StyledButtonIcon, {
     disabled: disabled,
     icon: icon,
     testID: "".concat(testID, "-left-icon"),
     themeButtonVariant: themeVariant,
-    themeIsPressed: isPressed
-  }) : icon), isTextVariant(themeVariant) ? /*#__PURE__*/React__default.createElement(StyledButtonTitleOfVariantText, {
-    variant: "regular-bold",
-    ellipsizeMode: "tail",
-    numberOfLines: 1,
-    disabled: disabled,
-    themeButtonVariant: themeVariant,
-    themeIsPressed: isPressed
-  }, text) : /*#__PURE__*/React__default.createElement(StyledButtonText, {
-    level: "h5",
-    ellipsizeMode: "tail",
-    numberOfLines: 1,
-    disabled: disabled,
-    themeButtonVariant: themeVariant
-  }, text), rightIcon !== undefined && /*#__PURE__*/React__default.createElement(StyledButtonIconWrapper, {
-    themePosition: "right"
+    themeIsPressed: isPressed,
+    themeIsCompact: isCompactVariant
+  }) : icon), isRenderTextVariant ? renderTextVariantTitle() : renderTitle(), rightIcon !== undefined && /*#__PURE__*/React__default.createElement(StyledButtonIconWrapper, {
+    themePosition: "right",
+    themeIsCompact: isCompactVariant
   }, isIconName(rightIcon) ? /*#__PURE__*/React__default.createElement(StyledButtonIcon, {
     disabled: disabled,
     icon: rightIcon,
     testID: "".concat(testID, "-right-icon"),
     themeButtonVariant: themeVariant,
-    themeIsPressed: isPressed
+    themeIsPressed: isPressed,
+    themeIsCompact: isCompactVariant
   }) : rightIcon)));
 };
 
@@ -9651,7 +10057,7 @@ var ButtonContainer = index$a(TouchableOpacity)(function (_ref) {
 var IconWrapper = index$a(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    paddingRight: theme.__hd__.button.space.iconPadding
+    paddingRight: theme.__hd__.button.space["default"].iconPadding
   };
 });
 var ButtonText = index$a(Typography.Body)({
@@ -13123,16 +13529,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 +13547,7 @@ var StyledChipWrapper = index$a(TouchableOpacity)(function (_ref) {
           };
         }
       case 'compact':
-      case 'filled':
+      case 'filter':
         {
           return {
             borderColor: theme.__hd__.chip.colors.wrapperSelectedBorder
@@ -13152,14 +13558,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 +13575,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 +13635,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 +13660,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 +14695,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 +17023,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 +17148,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 +17304,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 +17356,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 +17397,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 +17424,8 @@ var Slider$1 = function Slider(_ref) {
     enabledTwo: !disabled,
     allowOverlap: allowOverlap,
     trackStyle: trackStyle,
-    markerStyle: makerStyle,
-    selectedStyle: selectedStyle
+    selectedStyle: selectedStyle,
+    customMarker: CustomMarker
   }));
 };
 
@@ -18459,7 +18907,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 +18970,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 +37956,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 };