@hero-design/rn-work-uikit 1.6.1 → 1.6.2-alpha.1

package/lib/index.js

@@ -6507,7 +6507,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,
@@ -7324,7 +7325,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
-    muted: theme.colors.mutedOnDefaultGlobalSurface
+    muted: theme.colors.mutedOnDefaultGlobalSurface,
+    inactive: theme.colors.inactiveOnDefaultGlobalSurface
   };
   var fontSizes = {
     xsmall: theme.fontSizes.xsmall,
@@ -7637,6 +7639,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$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$2;
@@ -7669,6 +7750,7 @@ var getTheme$1 = function getTheme() {
       empty: getEmptyTheme(globalTheme),
       error: getErrorTheme(globalTheme),
       fab: getFABTheme(globalTheme),
+      filterTrigger: getFilterTriggerTheme(globalTheme),
       icon: getIconTheme(globalTheme),
       image: getImageTheme(globalTheme),
       list: getListTheme(globalTheme),
@@ -8412,7 +8494,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,
@@ -8510,7 +8593,7 @@ var FONTWEIGHT_MAP$2 = {
   regular: 'regular',
   'semi-bold': 'semiBold'
 };
-var StyledText$3 = index$b(reactNative.Text)(function (_ref) {
+var StyledText$4 = index$b(reactNative.Text)(function (_ref) {
   var themeFontSize = _ref.themeFontSize,
     themeFontWeight = _ref.themeFontWeight,
     themeIntent = _ref.themeIntent,
@@ -8542,7 +8625,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__namespace.default.createElement(StyledText$3, _extends$1({}, nativeProps, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledText$4, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -13728,6 +13811,16 @@ var CalendarRowItem = function CalendarRowItem(_ref) {
   }) : null));
 };
 
+var DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+
+// Sunday first column => 0
+// Sunday last column  => 1
+var WEEK_INDEX_OFFSET = 1;
+var SUNDAY_INDEX = 6;
+
+// Always render 7 rows x 6 items for consistent layout
+var TOTAL_DATES_ITEMS = 7 * 6;
+
 var initArray = function initArray(length, func) {
   return Array.from(Array(length)).map(function (_, index) {
     return func(index);
@@ -13804,6 +13897,74 @@ var setStartOrEndDate = function setStartOrEndDate(_ref2) {
     endDate: undefined
   };
 };
+var shouldUseMonthPicker = function shouldUseMonthPicker(onMonthChange) {
+  return onMonthChange !== noop$2;
+};
+var getCalendarDate = function getCalendarDate(_ref3) {
+  var visibleDate = _ref3.visibleDate,
+    _ref3$markedDates = _ref3.markedDates,
+    markedDates = _ref3$markedDates === void 0 ? [] : _ref3$markedDates,
+    minDate = _ref3.minDate,
+    maxDate = _ref3.maxDate;
+  var currentMonth = visibleDate.getMonth();
+  var currentYear = visibleDate.getFullYear();
+  var parsedMaskedDate = markedDates.reduce(function (current, markedDate) {
+    return _objectSpread2(_objectSpread2({}, current), {}, _defineProperty({}, markedDate.toDateString(), true));
+  }, {});
+  var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
+  var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
+  var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
+
+  // Index of day in week is shifted by 1 due to Sunday is the last column
+  var firstDayWeekIndexOfMonth = firstDateOfMonth.getDay() === 0 ? SUNDAY_INDEX : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
+  var lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
+  var lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
+  var daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, function (index) {
+    var reversedIndex = firstDayWeekIndexOfMonth - index - 1;
+    var count = lastDayIndexOfPreviousMonth - reversedIndex;
+    return getValidDate(new Date(currentYear, currentMonth - 1, count), minDate, maxDate);
+  });
+  var daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, function (index) {
+    return getValidDate(new Date(currentYear, currentMonth, index + 1), minDate, maxDate);
+  });
+  var daysOfNextMonth = initArray(TOTAL_DATES_ITEMS - (daysOfPreviousMonth.length + daysOfCurrentMonth.length), function (index) {
+    return getValidDate(new Date(currentYear, currentMonth + 1, index + 1), minDate, maxDate);
+  });
+  return {
+    firstDateOfMonth: firstDateOfMonth,
+    lastDateOfMonth: lastDateOfMonth,
+    parsedMaskedDate: parsedMaskedDate,
+    daysOfPreviousMonth: daysOfPreviousMonth,
+    daysOfCurrentMonth: daysOfCurrentMonth,
+    daysOfNextMonth: daysOfNextMonth
+  };
+};
+var getCalendarButtonState = function getCalendarButtonState(_ref4) {
+  var visibleDate = _ref4.visibleDate,
+    markedDates = _ref4.markedDates,
+    minDate = _ref4.minDate,
+    maxDate = _ref4.maxDate;
+  var _getCalendarDate = getCalendarDate({
+      visibleDate: visibleDate,
+      markedDates: markedDates,
+      minDate: minDate,
+      maxDate: maxDate
+    }),
+    daysOfPreviousMonth = _getCalendarDate.daysOfPreviousMonth,
+    daysOfNextMonth = _getCalendarDate.daysOfNextMonth,
+    firstDateOfMonth = _getCalendarDate.firstDateOfMonth,
+    lastDateOfMonth = _getCalendarDate.lastDateOfMonth;
+  var disablePrevButton = minDate === undefined ? false : !daysOfPreviousMonth.some(function (date) {
+    return date !== undefined;
+  }) && minDate >= firstDateOfMonth;
+  var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
+    return date !== undefined;
+  }) || maxDate <= lastDateOfMonth;
+  return {
+    disablePrevButton: disablePrevButton,
+    disableNextButton: disableNextButton
+  };
+};
 
 var SelectedDate = function SelectedDate(_ref) {
   var date = _ref.date,
@@ -13839,14 +14000,36 @@ var SelectedDate = function SelectedDate(_ref) {
   }) : null));
 };
 
-var DAYS_OF_WEEK$1 = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-// Sunday first column => 0
-// Sunday last column  => 1
-var WEEK_INDEX_OFFSET$1 = 1;
-var SUNDAY_INDEX$1 = 6;
+var useCalendarLayout = function useCalendarLayout() {
+  var theme = useTheme();
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    contentHeight = _useState2[0],
+    setContentHeight = _useState2[1];
+  var calendarItemHeight = contentHeight - theme.__hd__.calendar.space.iosPickerMarginVertical * 2;
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    contentWidth = _useState4[0],
+    setContentWidth = _useState4[1];
+  var calendarItemWidth = React.useMemo(function () {
+    return contentWidth > 0 ? Math.floor((contentWidth - theme.__hd__.calendar.space.cellPadding) / 7) : undefined;
+  }, [contentWidth, theme]);
+  var onLayout = React.useCallback(function (e) {
+    var _e$nativeEvent$layout = e.nativeEvent.layout,
+      width = _e$nativeEvent$layout.width,
+      height = _e$nativeEvent$layout.height;
+    setContentHeight(height);
+    setContentWidth(width);
+  }, []);
+  return {
+    onLayout: onLayout,
+    contentHeight: contentHeight,
+    calendarItemHeight: calendarItemHeight,
+    contentWidth: contentWidth,
+    calendarItemWidth: calendarItemWidth
+  };
+};
 
-// Always render 7 rows x 6 items for consistent layout
-var TOTAL_DATES_ITEMS$1 = 7 * 6;
 var CalendarRange = function CalendarRange(_ref) {
   var value = _ref.value,
     visibleDate = _ref.visibleDate,
@@ -13869,53 +14052,35 @@ var CalendarRange = function CalendarRange(_ref) {
     monthPickerConfirmLabel = _ref.monthPickerConfirmLabel,
     monthPickerCancelLabel = _ref.monthPickerCancelLabel;
   var theme = useTheme();
-  var currentMonth = visibleDate.getMonth();
-  var currentYear = visibleDate.getFullYear();
-  var now = new Date();
-  var parsedMaskedDate = markedDates.reduce(function (current, markedDate) {
-    return _objectSpread2(_objectSpread2({}, current), {}, _defineProperty({}, markedDate.toDateString(), true));
-  }, {});
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     monthPickerVisible = _useState2[0],
     setMonthPickerVisible = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    contentHeight = _useState4[0],
-    setContentHeight = _useState4[1];
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    contentWidth = _useState6[0],
-    setContentWidth = _useState6[1];
-  var calendarItemWidth = React.useMemo(function () {
-    return contentWidth > 0 ? Math.floor((contentWidth - theme.__hd__.calendar.space.cellPadding) / 7) : undefined;
-  }, [contentWidth, theme]);
-  var useMonthPicker = onMonthChange !== noop$2;
-  var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
-  var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
-  var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
-
-  // Index of day in week is shifted by 1 due to Sunday is the last column
-  var firstDayWeekIndexOfMonth = firstDateOfMonth.getDay() === 0 ? SUNDAY_INDEX$1 : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET$1;
-  var lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
-  var lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
-  var daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, function (index) {
-    var reversedIndex = firstDayWeekIndexOfMonth - index - 1;
-    var count = lastDayIndexOfPreviousMonth - reversedIndex;
-    return getValidDate(new Date(currentYear, currentMonth - 1, count), minDate, maxDate);
-  });
-  var daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, function (index) {
-    return getValidDate(new Date(currentYear, currentMonth, index + 1), minDate, maxDate);
-  });
-  var daysOfNextMonth = initArray(TOTAL_DATES_ITEMS$1 - (daysOfPreviousMonth.length + daysOfCurrentMonth.length), function (index) {
-    return getValidDate(new Date(currentYear, currentMonth + 1, index + 1), minDate, maxDate);
-  });
-  var disablePrevButton = minDate === undefined ? false : !daysOfPreviousMonth.some(function (date) {
-    return date !== undefined;
-  }) && minDate >= firstDateOfMonth;
-  var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
-    return date !== undefined;
-  }) || maxDate <= lastDateOfMonth;
+  var _useCalendarLayout = useCalendarLayout(),
+    onLayout = _useCalendarLayout.onLayout,
+    contentHeight = _useCalendarLayout.contentHeight,
+    contentWidth = _useCalendarLayout.contentWidth,
+    calendarItemWidth = _useCalendarLayout.calendarItemWidth;
+  var _getCalendarDate = getCalendarDate({
+      visibleDate: visibleDate,
+      markedDates: markedDates,
+      minDate: minDate,
+      maxDate: maxDate,
+      onMonthChange: onMonthChange
+    }),
+    parsedMaskedDate = _getCalendarDate.parsedMaskedDate,
+    daysOfPreviousMonth = _getCalendarDate.daysOfPreviousMonth,
+    daysOfCurrentMonth = _getCalendarDate.daysOfCurrentMonth,
+    daysOfNextMonth = _getCalendarDate.daysOfNextMonth;
+  var _getCalendarButtonSta = getCalendarButtonState({
+      visibleDate: visibleDate,
+      minDate: minDate,
+      maxDate: maxDate
+    }),
+    disablePrevButton = _getCalendarButtonSta.disablePrevButton,
+    disableNextButton = _getCalendarButtonSta.disableNextButton;
+  var shouldShowMonthPicker = shouldUseMonthPicker(onMonthChange);
+  var now = new Date();
   var onDateChange = function onDateChange(date) {
     var newDateRange = setStartOrEndDate({
       date: date,
@@ -13963,17 +14128,10 @@ var CalendarRange = function CalendarRange(_ref) {
       textIntent: isCurrentMonth ? undefined : 'subdued'
     });
   };
-  var onLayout = function onLayout(e) {
-    var _e$nativeEvent$layout = e.nativeEvent.layout,
-      width = _e$nativeEvent$layout.width,
-      height = _e$nativeEvent$layout.height;
-    setContentHeight(height);
-    setContentWidth(width);
-  };
   return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__namespace.default.createElement(ContentNavigator, {
-    value: !useMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
+    value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
       testID: "calendar-month-picker",
       onPress: function onPress() {
         onToggleMonthPicker === null || onToggleMonthPicker === void 0 || onToggleMonthPicker(!monthPickerVisible);
@@ -13995,7 +14153,7 @@ var CalendarRange = function CalendarRange(_ref) {
     }))),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
-    onPress: useMonthPicker ? undefined : onTitlePress,
+    onPress: shouldShowMonthPicker ? undefined : onTitlePress,
     previousDisabled: disablePrevButton,
     nextDisabled: disableNextButton,
     fontSize: "large"
@@ -14015,7 +14173,7 @@ var CalendarRange = function CalendarRange(_ref) {
     }
   })) : /*#__PURE__*/React__namespace.default.createElement(Box, {
     onLayout: onLayout
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarRow, null, DAYS_OF_WEEK$1.map(function (day) {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarRow, null, DAYS_OF_WEEK.map(function (day) {
     return /*#__PURE__*/React__namespace.default.createElement(StyledCalendarRowItem, {
       key: day
     }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarDayNameCell, {
@@ -14055,14 +14213,6 @@ var CalendarRange = function CalendarRange(_ref) {
   })));
 };
 
-var DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-// Sunday first column => 0
-// Sunday last column  => 1
-var WEEK_INDEX_OFFSET = 1;
-var SUNDAY_INDEX = 6;
-
-// Always render 7 rows x 6 items for consistent layout
-var TOTAL_DATES_ITEMS = 7 * 6;
 var Calendar = function Calendar(_ref) {
   var value = _ref.value,
     visibleDate = _ref.visibleDate,
@@ -14085,64 +14235,39 @@ var Calendar = function Calendar(_ref) {
     monthPickerConfirmLabel = _ref.monthPickerConfirmLabel,
     monthPickerCancelLabel = _ref.monthPickerCancelLabel;
   var theme = useTheme();
-  var currentMonth = visibleDate.getMonth();
-  var currentYear = visibleDate.getFullYear();
-  var now = new Date();
-  var parsedMaskedDate = markedDates.reduce(function (current, markedDate) {
-    return _objectSpread2(_objectSpread2({}, current), {}, _defineProperty({}, markedDate.toDateString(), true));
-  }, {});
+  var _useCalendarLayout = useCalendarLayout(),
+    onLayout = _useCalendarLayout.onLayout,
+    contentHeight = _useCalendarLayout.contentHeight,
+    contentWidth = _useCalendarLayout.contentWidth,
+    calendarItemWidth = _useCalendarLayout.calendarItemWidth;
+  var _getCalendarDate = getCalendarDate({
+      visibleDate: visibleDate,
+      markedDates: markedDates,
+      minDate: minDate,
+      maxDate: maxDate,
+      onMonthChange: onMonthChange
+    }),
+    parsedMaskedDate = _getCalendarDate.parsedMaskedDate,
+    daysOfPreviousMonth = _getCalendarDate.daysOfPreviousMonth,
+    daysOfCurrentMonth = _getCalendarDate.daysOfCurrentMonth,
+    daysOfNextMonth = _getCalendarDate.daysOfNextMonth;
+  var _getCalendarButtonSta = getCalendarButtonState({
+      visibleDate: visibleDate,
+      minDate: minDate,
+      maxDate: maxDate
+    }),
+    disablePrevButton = _getCalendarButtonSta.disablePrevButton,
+    disableNextButton = _getCalendarButtonSta.disableNextButton;
+  var shouldShowMonthPicker = shouldUseMonthPicker(onMonthChange);
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     monthPickerVisible = _useState2[0],
     setMonthPickerVisible = _useState2[1];
-  var _useState3 = React.useState(0),
-    _useState4 = _slicedToArray(_useState3, 2),
-    contentHeight = _useState4[0],
-    setContentHeight = _useState4[1];
-  var _useState5 = React.useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    contentWidth = _useState6[0],
-    setContentWidth = _useState6[1];
-  var calendarItemWidth = React.useMemo(function () {
-    return contentWidth > 0 ? Math.floor((contentWidth - theme.__hd__.calendar.space.cellPadding) / 7) : undefined;
-  }, [contentWidth, theme]);
-  var useMonthPicker = onMonthChange !== noop$2;
-  var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
-  var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
-  var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
-
-  // Index of day in week is shifted by 1 due to Sunday is the last column
-  var firstDayWeekIndexOfMonth = firstDateOfMonth.getDay() === 0 ? SUNDAY_INDEX : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
-  var lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
-  var lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
-  var daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, function (index) {
-    var reversedIndex = firstDayWeekIndexOfMonth - index - 1;
-    var count = lastDayIndexOfPreviousMonth - reversedIndex;
-    return getValidDate(new Date(currentYear, currentMonth - 1, count), minDate, maxDate);
-  });
-  var daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, function (index) {
-    return getValidDate(new Date(currentYear, currentMonth, index + 1), minDate, maxDate);
-  });
-  var daysOfNextMonth = initArray(TOTAL_DATES_ITEMS - (daysOfPreviousMonth.length + daysOfCurrentMonth.length), function (index) {
-    return getValidDate(new Date(currentYear, currentMonth + 1, index + 1), minDate, maxDate);
-  });
-  var disablePrevButton = minDate === undefined ? false : !daysOfPreviousMonth.some(function (date) {
-    return date !== undefined;
-  }) && minDate >= firstDateOfMonth;
-  var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
-    return date !== undefined;
-  }) || maxDate <= lastDateOfMonth;
-  var onLayout = function onLayout(e) {
-    var _e$nativeEvent$layout = e.nativeEvent.layout,
-      width = _e$nativeEvent$layout.width,
-      height = _e$nativeEvent$layout.height;
-    setContentHeight(height);
-    setContentWidth(width);
-  };
+  var now = new Date();
   return /*#__PURE__*/React__namespace.default.createElement(StyledContainer$9, {
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__namespace.default.createElement(ContentNavigator, {
-    value: !useMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
+    value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
       testID: "calendar-month-picker",
       onPress: function onPress() {
         onToggleMonthPicker === null || onToggleMonthPicker === void 0 || onToggleMonthPicker(!monthPickerVisible);
@@ -14164,7 +14289,7 @@ var Calendar = function Calendar(_ref) {
     }))),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
-    onPress: useMonthPicker ? undefined : onTitlePress,
+    onPress: shouldShowMonthPicker ? undefined : onTitlePress,
     previousDisabled: disablePrevButton,
     nextDisabled: disableNextButton,
     fontSize: "large"
@@ -15548,7 +15673,7 @@ var StyledTextWrapper$1 = index$b(reactNative.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({
@@ -15603,7 +15728,7 @@ var Avatar = function Avatar(_ref) {
     themeIntent: intent,
     themeSize: size,
     style: style
-  }, (source === undefined || hasImageError) && /*#__PURE__*/React__namespace.default.createElement(StyledTextWrapper$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledText$2, {
+  }, (source === undefined || hasImageError) && /*#__PURE__*/React__namespace.default.createElement(StyledTextWrapper$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledText$3, {
     themeSize: size
   }, title)), source !== undefined && /*#__PURE__*/React__namespace.default.createElement(StyledImage$1, {
     resizeMode: "cover",
@@ -15819,7 +15944,7 @@ var StyledView$1 = index$b(reactNative.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 {
@@ -16009,7 +16134,7 @@ var Badge = function Badge(_ref) {
     icon: icon,
     themeSize: size,
     intent: "text-inverted"
-  }) : /*#__PURE__*/React__namespace.default.createElement(StyledText$1, {
+  }) : /*#__PURE__*/React__namespace.default.createElement(StyledText$2, {
     themeSize: size
   }, content));
 };
@@ -24734,7 +24859,7 @@ var StyledContent = index$b(reactNative.View)(function (_ref2) {
     alignItems: 'center'
   };
 });
-var StyledBadge$1 = index$b(reactNative.View)(function (_ref3) {
+var StyledBadge$2 = index$b(reactNative.View)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     right: theme.__hd__.mapPin.space.iconRight,
@@ -24822,7 +24947,7 @@ var MapPin = function MapPin(_ref) {
     icon: icon,
     size: "xsmall",
     testID: testID ? "".concat(testID, "-icon") : undefined
-  })), badgeIcon && /*#__PURE__*/React__namespace.default.createElement(StyledBadge$1, {
+  })), badgeIcon && /*#__PURE__*/React__namespace.default.createElement(StyledBadge$2, {
     testID: testID ? "".concat(testID, "-badge") : undefined
   }, /*#__PURE__*/React__namespace.default.createElement(StyledBadgeIcon, {
     icon: badgeIcon,
@@ -27015,7 +27140,7 @@ var StyledView = index$b(reactNative.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 {
@@ -27041,7 +27166,7 @@ var Tag = function Tag(_ref) {
     themeIntent: intent,
     style: style,
     testID: testID
-  }), typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledText, {
+  }), typeof content === 'string' ? /*#__PURE__*/React__namespace.default.createElement(StyledText$1, {
     themeIntent: intent,
     fontWeight: "semi-bold"
   }, content) : content);
@@ -27134,8 +27259,7 @@ var StyledInputContainer$1 = index$b(reactNative.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(reactNative.TextInput)(function (_ref9) {
@@ -46705,7 +46829,7 @@ var StyledHandlerContainer = index$b(reactNative.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',
@@ -46907,12 +47031,12 @@ var renderBadge = function renderBadge(props) {
   var content = props.content,
     icon = props.icon,
     rest = _objectWithoutProperties(props, _excluded$4);
-  if (content) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge, _extends$1({
+  if (content) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge$1, _extends$1({
     intent: "primary",
     content: content,
     size: "small"
   }, rest));
-  if (icon) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge, _extends$1({
+  if (icon) return /*#__PURE__*/React__namespace.default.createElement(StyledBadge$1, _extends$1({
     intent: "primary",
     icon: icon,
     size: "small"
@@ -47022,6 +47146,122 @@ var FloatingIsland = function FloatingIsland(_ref2) {
   }));
 };
 
+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(reactNative.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__namespace.default.createElement(StyledFilterWrapper, {
+    testID: testID,
+    style: style,
+    themeActive: active,
+    themeVariant: variant,
+    onPress: onPress,
+    themeHasLabel: !!label
+  }, label ? /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(StyledText, {
+    variant: typographyVariant
+  }, label), shouldShowBadge && /*#__PURE__*/React__namespace.default.createElement(Badge$1, {
+    content: filterCount,
+    size: "small"
+  }), suffix && /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    icon: suffix,
+    size: "xxxsmall",
+    intent: iconIntent,
+    testID: "".concat(testID, "-suffix")
+  })) : /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, suffix && /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    icon: suffix,
+    size: "xsmall",
+    intent: iconIntent,
+    testID: "".concat(testID, "-suffix")
+  }), shouldShowBadge && /*#__PURE__*/React__namespace.default.createElement(StyledBadge, {
+    content: filterCount,
+    size: "small",
+    themeHasLabel: !!label
+  })));
+};
+
 var getZIndexByState = function getZIndexByState(_ref) {
   var themeFocused = _ref.themeFocused,
     themeHasError = _ref.themeHasError;
@@ -67159,6 +67399,7 @@ exports.Drawer = index$8;
 exports.Empty = Empty;
 exports.Error = ErrorComponent;
 exports.FAB = FAB;
+exports.FilterTrigger = FilterTrigger;
 exports.FlatListWithFAB = FlatListWithFAB;
 exports.FloatingIsland = FloatingIsland;
 exports.FormGroup = FormGroup;