@hero-design/rn 8.103.6 → 8.104.0

package/es/index.js

@@ -6248,7 +6248,8 @@ var getIconTheme = function getIconTheme(theme) {
     warning: theme.colors.warning,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    muted: theme.colors.mutedOnDefaultGlobalSurface
+    muted: theme.colors.mutedOnDefaultGlobalSurface,
+    inactive: theme.colors.inactiveOnDefaultGlobalSurface
   };
   var sizes = {
     xxxsmall: theme.fontSizes.small,
@@ -7378,6 +7379,85 @@ var getAppCueTheme = function getAppCueTheme(theme) {
   };
 };
 
+var getFilterTriggerTheme = function getFilterTriggerTheme(theme) {
+  var borderWidths = {
+    wrapper: {
+      filled: theme.borderWidths.medium,
+      outlined: theme.borderWidths.medium,
+      ghost: 0
+    }
+  };
+  var colors = {
+    wrapper: {
+      activeBackground: theme.colors.highlightedSurface,
+      inactiveBackground: theme.colors.neutralGlobalSurface,
+      background: {
+        active: {
+          filled: theme.colors.highlightedSurface,
+          outlined: 'transparent',
+          ghost: 'transparent',
+          filledLabeless: theme.colors.neutralGlobalSurface
+        },
+        inactive: {
+          filled: theme.colors.neutralGlobalSurface,
+          outlined: 'transparent',
+          ghost: 'transparent'
+        }
+      },
+      border: {
+        active: {
+          filled: theme.colors.highlightedSurface,
+          outlined: theme.colors.primaryOutline,
+          ghost: 'transparent',
+          filledLabeless: theme.colors.neutralGlobalSurface
+        },
+        inactive: {
+          filled: theme.colors.neutralGlobalSurface,
+          outlined: theme.colors.secondaryOutline,
+          ghost: 'transparent'
+        }
+      }
+    }
+  };
+  var space = {
+    wrapper: {
+      "default": {
+        paddingHorizontal: theme.space.smallMedium,
+        paddingVertical: theme.space.xsmall
+      },
+      labeless: {
+        paddingHorizontal: theme.space.small,
+        paddingVertical: theme.space.xsmall
+      },
+      itemGap: theme.space.xsmall
+    },
+    badge: {
+      labelessRight: theme.space.xxsmall,
+      labelessBottom: theme.space.xxsmall
+    }
+  };
+  var radii = {
+    wrapper: {
+      "default": theme.radii.xxxlarge,
+      labeless: theme.radii.xlarge
+    }
+  };
+  var sizes = {
+    wrapperHeight: scale(36)
+  };
+  var lineHeights = {
+    text: theme.lineHeights.small
+  };
+  return {
+    colors: colors,
+    space: space,
+    radii: radii,
+    borderWidths: borderWidths,
+    sizes: sizes,
+    lineHeights: lineHeights
+  };
+};
+
 var getTheme = 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$2;
@@ -7410,6 +7490,7 @@ var getTheme = function getTheme() {
       empty: getEmptyTheme(globalTheme),
       error: getErrorTheme(globalTheme),
       fab: getFABTheme(globalTheme),
+      filterTrigger: getFilterTriggerTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       image: getImageTheme(globalTheme),
       list: getListTheme(globalTheme),
@@ -7615,7 +7696,7 @@ var FONTWEIGHT_MAP$2 = {
   regular: 'regular',
   'semi-bold': 'semiBold'
 };
-var StyledText$3 = index$b(Text$1)(function (_ref) {
+var StyledText$4 = index$b(Text$1)(function (_ref) {
   var themeFontSize = _ref.themeFontSize,
     themeFontWeight = _ref.themeFontWeight,
     themeIntent = _ref.themeIntent,
@@ -7647,7 +7728,7 @@ var Text = function Text(_ref) {
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$O);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
-  return /*#__PURE__*/React__default.createElement(StyledText$3, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__default.createElement(StyledText$4, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -8377,7 +8458,8 @@ var COLOR_INTENTS = {
   warning: 'warning',
   'disabled-text': 'disabledText',
   'text-inverted': 'invertedText',
-  muted: 'muted'
+  muted: 'muted',
+  inactive: 'inactive'
 };
 var StyledHeroIcon = index$b(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,
@@ -9104,7 +9186,7 @@ var StyledTextWrapper$1 = index$b(View)(function () {
     height: '100%'
   };
 });
-var StyledText$2 = index$b(Typography.Body)(function (_ref2) {
+var StyledText$3 = index$b(Typography.Body)(function (_ref2) {
   var themeSize = _ref2.themeSize,
     theme = _ref2.theme;
   return _objectSpread2({
@@ -9159,7 +9241,7 @@ var Avatar = function Avatar(_ref) {
     themeIntent: intent,
     themeSize: size,
     style: style
-  }, (source === undefined || hasImageError) && /*#__PURE__*/React__default.createElement(StyledTextWrapper$1, null, /*#__PURE__*/React__default.createElement(StyledText$2, {
+  }, (source === undefined || hasImageError) && /*#__PURE__*/React__default.createElement(StyledTextWrapper$1, null, /*#__PURE__*/React__default.createElement(StyledText$3, {
     themeSize: size
   }, title)), source !== undefined && /*#__PURE__*/React__default.createElement(StyledImage$1, {
     resizeMode: "cover",
@@ -9684,7 +9766,7 @@ var StyledView$2 = index$b(Animated.View)(function (_ref) {
     borderColor: themeVariant === 'outlined' ? theme.__hd__.badge.colors.border : theme.__hd__.badge.colors[themeIntent]
   };
 });
-var StyledText$1 = index$b(Typography.Caption)(function (_ref2) {
+var StyledText$2 = index$b(Typography.Caption)(function (_ref2) {
   var theme = _ref2.theme,
     themeSize = _ref2.themeSize;
   return {
@@ -9874,7 +9956,7 @@ var Badge = function Badge(_ref) {
     icon: icon,
     themeSize: size,
     intent: "text-inverted"
-  }) : /*#__PURE__*/React__default.createElement(StyledText$1, {
+  }) : /*#__PURE__*/React__default.createElement(StyledText$2, {
     themeSize: size
   }, content));
 };
@@ -20415,6 +20497,30 @@ var useFormatDate = function useFormatDate(_ref) {
   };
 };
 
+var StyledPickerWrapper$1 = index$b(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    height: theme.__hd__.datePicker.sizes.height,
+    alignItems: 'center'
+  };
+});
+var getZIndexByState$2 = function getZIndexByState(_ref2) {
+  var themeHasError = _ref2.themeHasError;
+  if (themeHasError) {
+    return 1;
+  }
+  return 0;
+};
+var StyledTouchableOpacity$2 = index$b(TouchableOpacity)(function (_ref3) {
+  var themeGroupStyleEnabled = _ref3.themeGroupStyleEnabled,
+    themeHasError = _ref3.themeHasError;
+  return _objectSpread2({}, themeGroupStyleEnabled && {
+    zIndex: getZIndexByState$2({
+      themeHasError: themeHasError
+    })
+  });
+});
+
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
     minDate = _ref.minDate,
@@ -20434,7 +20540,10 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     renderSelectedValue = _ref.renderSelectedValue,
     locale = _ref.locale,
-    TextInputComponent = _ref.TextInputComponent;
+    TextInputComponent = _ref.TextInputComponent,
+    inputProps = _ref.inputProps,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -20453,15 +20562,19 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     value: value
   });
   var InputComponent = TextInputComponent || TextInput;
-  return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    },
-    disabled: disabled
+  var onPress = useCallback(function () {
+    setOpen(true);
+  }, []);
+  return /*#__PURE__*/React__default.createElement(StyledTouchableOpacity$2, {
+    onPress: onPress,
+    disabled: disabled,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "date-picker-android-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React__default.createElement(InputComponent, {
+  }, /*#__PURE__*/React__default.createElement(InputComponent, _extends$1({}, inputProps, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -20478,7 +20591,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
         formattedDateString: displayValue
       }, props);
     } : undefined
-  })), /*#__PURE__*/React__default.createElement(AndroidDatePickerDialog, {
+  }))), /*#__PURE__*/React__default.createElement(AndroidDatePickerDialog, {
     open: open,
     onClose: function onClose() {
       return setOpen(false);
@@ -20557,7 +20670,10 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     supportedOrientations = _ref2$supportedOrient === void 0 ? ['portrait'] : _ref2$supportedOrient,
     renderSelectedValue = _ref2.renderSelectedValue,
     locale = _ref2.locale,
-    TextInputComponent = _ref2.TextInputComponent;
+    TextInputComponent = _ref2.TextInputComponent,
+    inputProps = _ref2.inputProps,
+    _ref2$groupStyleEnabl = _ref2.groupStyleEnabled,
+    groupStyleEnabled = _ref2$groupStyleEnabl === void 0 ? false : _ref2$groupStyleEnabl;
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     open = _useState6[0],
@@ -20584,15 +20700,19 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     value: value
   });
   var InputComponent = TextInputComponent || TextInput;
-  return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    },
-    disabled: disabled
+  var onPress = useCallback(function () {
+    setOpen(true);
+  }, []);
+  return /*#__PURE__*/React__default.createElement(StyledTouchableOpacity$2, {
+    onPress: onPress,
+    disabled: disabled,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "date-picker-calendar-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerCalendar"
-  }, /*#__PURE__*/React__default.createElement(InputComponent, {
+  }, /*#__PURE__*/React__default.createElement(InputComponent, _extends$1({}, inputProps, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -20609,7 +20729,7 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
         formattedDateString: displayValue
       }, props);
     } : undefined
-  })), /*#__PURE__*/React__default.createElement(BottomSheet$1, {
+  }))), /*#__PURE__*/React__default.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -20639,14 +20759,6 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
   }))));
 };
 
-var StyledPickerWrapper$1 = index$b(View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    height: theme.__hd__.datePicker.sizes.height,
-    alignItems: 'center'
-  };
-});
-
 var IOSDatePickerDialog = function IOSDatePickerDialog(_ref) {
   var label = _ref.label,
     open = _ref.open,
@@ -20740,7 +20852,10 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     locale = _ref.locale,
     renderSelectedValue = _ref.renderSelectedValue,
-    TextInputComponent = _ref.TextInputComponent;
+    TextInputComponent = _ref.TextInputComponent,
+    inputProps = _ref.inputProps,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -20761,15 +20876,19 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     value: value
   });
   var InputComponent = TextInputComponent || TextInput;
-  return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    },
-    disabled: disabled
+  var onPress = useCallback(function () {
+    setOpen(true);
+  }, []);
+  return /*#__PURE__*/React__default.createElement(StyledTouchableOpacity$2, {
+    onPress: onPress,
+    disabled: disabled,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "date-picker-ios-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React__default.createElement(InputComponent, {
+  }, /*#__PURE__*/React__default.createElement(InputComponent, _extends$1({}, inputProps, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -20786,7 +20905,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
         formattedDateString: displayValue
       }, props);
     } : undefined
-  })), /*#__PURE__*/React__default.createElement(IOSDatePickerDialog, {
+  }))), /*#__PURE__*/React__default.createElement(IOSDatePickerDialog, {
     value: value,
     onChange: onChange,
     open: open,
@@ -23634,7 +23753,7 @@ var StyledContent = index$b(View)(function (_ref2) {
     alignItems: 'center'
   };
 });
-var StyledBadge$1 = index$b(View)(function (_ref3) {
+var StyledBadge$2 = index$b(View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     right: theme.__hd__.mapPin.space.iconRight,
@@ -23722,7 +23841,7 @@ var MapPin = function MapPin(_ref) {
     icon: icon,
     size: "xsmall",
     testID: testID ? "".concat(testID, "-icon") : undefined
-  })), badgeIcon && /*#__PURE__*/React__default.createElement(StyledBadge$1, {
+  })), badgeIcon && /*#__PURE__*/React__default.createElement(StyledBadge$2, {
     testID: testID ? "".concat(testID, "-badge") : undefined
   }, /*#__PURE__*/React__default.createElement(StyledBadgeIcon, {
     icon: badgeIcon,
@@ -24923,18 +25042,18 @@ var StyledSectionList = index$b(SectionList)(function (_ref4) {
     paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
   };
 });
-var getZIndexByState = function getZIndexByState(_ref5) {
+var getZIndexByState$1 = function getZIndexByState(_ref5) {
   var themeHasError = _ref5.themeHasError;
   if (themeHasError) {
     return 1;
   }
   return 0;
 };
-var StyledTouchableOpacity = index$b(TouchableOpacity)(function (_ref6) {
+var StyledTouchableOpacity$1 = index$b(TouchableOpacity)(function (_ref6) {
   var themeGroupStyleEnabled = _ref6.themeGroupStyleEnabled,
     themeHasError = _ref6.themeHasError;
   return _objectSpread2({}, themeGroupStyleEnabled && {
-    zIndex: getZIndexByState({
+    zIndex: getZIndexByState$1({
       themeHasError: themeHasError
     })
   });
@@ -25139,7 +25258,7 @@ function MultiSelect(_ref) {
   }, [open, value]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__default.createElement(StyledTouchableOpacity, {
+  }, /*#__PURE__*/React__default.createElement(StyledTouchableOpacity$1, {
     onPress: onPress,
     themeGroupStyleEnabled: groupStyleEnabled,
     themeHasError: !!error,
@@ -25347,7 +25466,7 @@ var SingleSelect = function SingleSelect(_ref) {
   }, []);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__default.createElement(StyledTouchableOpacity, {
+  }, /*#__PURE__*/React__default.createElement(StyledTouchableOpacity$1, {
     onPress: onPress,
     themeGroupStyleEnabled: groupStyleEnabled,
     themeHasError: !!error,
@@ -26662,7 +26781,7 @@ var StyledView = index$b(View)(function (_ref) {
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding
   };
 });
-var StyledText = index$b(Typography.Caption)(function (_ref2) {
+var StyledText$1 = index$b(Typography.Caption)(function (_ref2) {
   var themeIntent = _ref2.themeIntent,
     theme = _ref2.theme;
   return {
@@ -26688,12 +26807,36 @@ var Tag = function Tag(_ref) {
     themeIntent: intent,
     style: style,
     testID: testID
-  }), typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledText, {
+  }), typeof content === 'string' ? /*#__PURE__*/React__default.createElement(StyledText$1, {
     themeIntent: intent,
     fontWeight: "semi-bold"
   }, content) : content);
 };
 
+var StyledPickerWrapper = index$b(View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    height: theme.__hd__.timePicker.sizes.height,
+    alignItems: 'center'
+  };
+});
+var getZIndexByState = function getZIndexByState(_ref2) {
+  var themeHasError = _ref2.themeHasError;
+  if (themeHasError) {
+    return 1;
+  }
+  return 0;
+};
+var StyledTouchableOpacity = index$b(TouchableOpacity)(function (_ref3) {
+  var themeGroupStyleEnabled = _ref3.themeGroupStyleEnabled,
+    themeHasError = _ref3.themeHasError;
+  return _objectSpread2({}, themeGroupStyleEnabled && {
+    zIndex: getZIndexByState({
+      themeHasError: themeHasError
+    })
+  });
+});
+
 var TimePickerAndroid = function TimePickerAndroid(_ref) {
   var value = _ref.value,
     label = _ref.label,
@@ -26710,7 +26853,10 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
     testID = _ref.testID,
     _ref$showSuffix = _ref.showSuffix,
     showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix,
-    TextInputComponent = _ref.TextInputComponent;
+    TextInputComponent = _ref.TextInputComponent,
+    inputProps = _ref.inputProps,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -26719,15 +26865,19 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var pickerInitValue = value || new Date();
   var InputComponent = TextInputComponent || TextInput;
-  return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    },
-    disabled: disabled
+  var onPress = useCallback(function () {
+    setOpen(true);
+  }, []);
+  return /*#__PURE__*/React__default.createElement(StyledTouchableOpacity, {
+    onPress: onPress,
+    disabled: disabled,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "time-picker-android-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React__default.createElement(InputComponent, {
+  }, /*#__PURE__*/React__default.createElement(InputComponent, _extends$1({}, inputProps, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -26738,7 +26888,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
     helpText: helpText,
     style: style,
     testID: testID
-  })), open ? /*#__PURE__*/React__default.createElement(DateTimePicker, {
+  }))), open ? /*#__PURE__*/React__default.createElement(DateTimePicker, {
     testID: "timePickerAndroid",
     mode: "time",
     value: pickerInitValue,
@@ -26753,14 +26903,6 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }) : null);
 };
 
-var StyledPickerWrapper = index$b(View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    height: theme.__hd__.timePicker.sizes.height,
-    alignItems: 'center'
-  };
-});
-
 var TimePickerIOS = function TimePickerIOS(_ref) {
   var value = _ref.value,
     label = _ref.label,
@@ -26780,7 +26922,10 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix,
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
-    TextInputComponent = _ref.TextInputComponent;
+    TextInputComponent = _ref.TextInputComponent,
+    inputProps = _ref.inputProps,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
   var _useState = useState(value || new Date()),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
@@ -26796,15 +26941,19 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   useEffect(function () {
     setSelectingDate(value || new Date());
   }, [value]);
-  return /*#__PURE__*/React__default.createElement(TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    },
-    disabled: disabled
+  var onPress = useCallback(function () {
+    setOpen(true);
+  }, []);
+  return /*#__PURE__*/React__default.createElement(StyledTouchableOpacity, {
+    onPress: onPress,
+    disabled: disabled,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "time-picker-ios-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React__default.createElement(InputComponent, {
+  }, /*#__PURE__*/React__default.createElement(InputComponent, _extends$1({}, inputProps, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -26815,7 +26964,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style
-  })), /*#__PURE__*/React__default.createElement(BottomSheet$1, {
+  }))), /*#__PURE__*/React__default.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -26949,8 +27098,7 @@ var StyledInputContainer$1 = index$b(View)(function (_ref8) {
     backgroundColor: theme.__hd__.toolbar.colors.inputContainerBackground,
     borderRadius: theme.__hd__.toolbar.radii.messageContainer,
     height: theme.__hd__.toolbar.sizes.messageInputHeight,
-    paddingHorizontal: theme.__hd__.toolbar.space.messageInputPaddingHorizontal,
-    paddingVertical: theme.__hd__.toolbar.space.messageInputPaddingVertical
+    paddingHorizontal: theme.__hd__.toolbar.space.messageInputPaddingHorizontal
   };
 });
 var StyledInput$1 = index$b(TextInput$1)(function (_ref9) {
@@ -46510,7 +46658,7 @@ var StyledHandlerContainer = index$b(View)(function (_ref5) {
     paddingVertical: theme.__hd__.search.space.inputVerticalPadding
   };
 });
-var StyledBadge = index$b(Badge$1)(function (_ref6) {
+var StyledBadge$1 = index$b(Badge$1)(function (_ref6) {
   var theme = _ref6.theme;
   return {
     position: 'absolute',
@@ -46712,12 +46860,12 @@ var renderBadge = function renderBadge(props) {
   var content = props.content,
     icon = props.icon,
     rest = _objectWithoutProperties(props, _excluded$1);
-  if (content) return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({
+  if (content) return /*#__PURE__*/React__default.createElement(StyledBadge$1, _extends$1({
     intent: "primary",
     content: content,
     size: "small"
   }, rest));
-  if (icon) return /*#__PURE__*/React__default.createElement(StyledBadge, _extends$1({
+  if (icon) return /*#__PURE__*/React__default.createElement(StyledBadge$1, _extends$1({
     intent: "primary",
     icon: icon,
     size: "small"
@@ -46827,4 +46975,120 @@ var FloatingIsland = function FloatingIsland(_ref2) {
   }));
 };
 
-export { Accordion, Alert, AppCue, Attachment, index$a as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$9 as Carousel, Chart, Checkbox, Chip, Collapse, ContentNavigator, index$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List$1 as List, LocaleProvider, 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, PublicTimePicker as TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehJobsSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$b as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+var getBackgroundColor = function getBackgroundColor(theme, themeIsActive, themeHasLabel, themeVariant) {
+  var colors = theme.__hd__.filterTrigger.colors;
+  if (themeIsActive && !themeHasLabel && themeVariant === 'filled') {
+    return colors.wrapper.background.active.filledLabeless;
+  }
+  var state = themeIsActive ? 'active' : 'inactive';
+  return colors.wrapper.background[state][themeVariant];
+};
+var getBorderStyles = function getBorderStyles(theme, themeIsActive, themeHasLabel, themeVariant) {
+  var _theme$__hd__$filterT = theme.__hd__.filterTrigger,
+    colors = _theme$__hd__$filterT.colors,
+    borderWidths = _theme$__hd__$filterT.borderWidths,
+    radii = _theme$__hd__$filterT.radii;
+  var borderColor;
+  if (themeIsActive && !themeHasLabel && themeVariant === 'filled') {
+    borderColor = colors.wrapper.border.active.filledLabeless;
+  } else {
+    var state = themeIsActive ? 'active' : 'inactive';
+    borderColor = colors.wrapper.border[state][themeVariant];
+  }
+  return {
+    borderWidth: borderWidths.wrapper[themeVariant],
+    borderColor: borderColor,
+    borderRadius: themeHasLabel ? radii.wrapper["default"] : radii.wrapper.labeless
+  };
+};
+var getSpacingStyles = function getSpacingStyles(theme, themeHasLabel) {
+  var space = theme.__hd__.filterTrigger.space;
+  var paddingConfig = themeHasLabel ? space.wrapper["default"] : space.wrapper.labeless;
+  return {
+    gap: space.wrapper.itemGap,
+    paddingHorizontal: paddingConfig.paddingHorizontal,
+    paddingVertical: paddingConfig.paddingVertical
+  };
+};
+var StyledFilterWrapper = index$b(TouchableOpacity)(function (_ref) {
+  var theme = _ref.theme,
+    themeActive = _ref.themeActive,
+    themeVariant = _ref.themeVariant,
+    themeHasLabel = _ref.themeHasLabel;
+  return _objectSpread2(_objectSpread2({
+    position: 'relative',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'flex-start',
+    height: theme.__hd__.filterTrigger.sizes.wrapperHeight,
+    backgroundColor: getBackgroundColor(theme, themeActive, themeHasLabel, themeVariant)
+  }, getBorderStyles(theme, themeActive, themeHasLabel, themeVariant)), getSpacingStyles(theme, themeHasLabel));
+});
+var StyledBadge = index$b(Badge$1)(function (_ref2) {
+  var theme = _ref2.theme,
+    themeHasLabel = _ref2.themeHasLabel;
+  return _objectSpread2({
+    position: 'absolute'
+  }, themeHasLabel ? {
+    right: 0,
+    bottom: 0
+  } : {
+    right: -theme.__hd__.filterTrigger.space.badge.labelessRight,
+    bottom: -theme.__hd__.filterTrigger.space.badge.labelessBottom
+  });
+});
+var StyledText = index$b(Typography.Body)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    lineHeight: theme.__hd__.filterTrigger.lineHeights.text,
+    textAlignVertical: 'center',
+    includeFontPadding: false
+  };
+});
+
+var FilterTrigger = function FilterTrigger(_ref) {
+  var label = _ref.label,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active,
+    _ref$filterCount = _ref.filterCount,
+    filterCount = _ref$filterCount === void 0 ? 0 : _ref$filterCount,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
+    suffix = _ref.suffix,
+    onPress = _ref.onPress,
+    testID = _ref.testID,
+    style = _ref.style;
+  var shouldShowBadge = filterCount > 0 && active;
+  var iconIntent = active ? 'text' : 'inactive';
+  var typographyVariant = active ? 'small-bold' : 'small';
+  return /*#__PURE__*/React__default.createElement(StyledFilterWrapper, {
+    testID: testID,
+    style: style,
+    themeActive: active,
+    themeVariant: variant,
+    onPress: onPress,
+    themeHasLabel: !!label
+  }, label ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(StyledText, {
+    variant: typographyVariant
+  }, label), shouldShowBadge && /*#__PURE__*/React__default.createElement(Badge$1, {
+    content: filterCount,
+    size: "small"
+  }), suffix && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: suffix,
+    size: "xxxsmall",
+    intent: iconIntent,
+    testID: "".concat(testID, "-suffix")
+  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, suffix && /*#__PURE__*/React__default.createElement(Icon, {
+    icon: suffix,
+    size: "xsmall",
+    intent: iconIntent,
+    testID: "".concat(testID, "-suffix")
+  }), shouldShowBadge && /*#__PURE__*/React__default.createElement(StyledBadge, {
+    content: filterCount,
+    size: "small",
+    themeHasLabel: !!label
+  })));
+};
+
+export { Accordion, Alert, AppCue, Attachment, index$a as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar$1 as Calendar, Card$1 as Card, index$9 as Carousel, Chart, Checkbox, Chip, Collapse, ContentNavigator, index$8 as DatePicker, Divider, index$7 as Drawer, Empty, ErrorComponent as Error, FAB, FilterTrigger, FlatListWithFAB, FloatingIsland, HeroDesignProvider, Icon, Image, List$1 as List, LocaleProvider, 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, PublicTimePicker as TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, ehJobsSystemPalette, ehWorkDarkSystemPalette, ehWorkSystemPalette, getTheme, jobsSystemPalette, scale, index$b as styled, swagDarkSystemPalette, swagLightJobsSystemPalette, swagSystemPalette$1 as swagLightSystemPalette, swagSystemPalette$2 as swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };