@hero-design/rn 8.52.2-rc2.0 → 8.54.0

package/es/index.js

@@ -1,13 +1,13 @@
 import * as reactNative from 'react-native';
-import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, Image as Image$1, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, BackHandler, FlatList, useWindowDimensions, TextInput as TextInput$1, PanResponder, Modal as Modal$1, InteractionManager, Keyboard, SectionList, TouchableWithoutFeedback, RefreshControl as RefreshControl$1 } 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, useWindowDimensions, TextInput as TextInput$1, PanResponder, BackHandler, InteractionManager, Keyboard, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
 import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, memo, useReducer, useLayoutEffect, useImperativeHandle, isValidElement } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MonthYearPickerViewIOS, MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import RnSlider from '@react-native-community/slider';
 import { RectButton, GestureHandlerRootView, Swipeable as Swipeable$1 } from 'react-native-gesture-handler';
 import LinearGradient from 'react-native-linear-gradient';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import PagerView from 'react-native-pager-view';
 import { EventEmitter } from 'events';
 import { WebView } from 'react-native-webview';
@@ -2170,6 +2170,15 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     archived: theme.colors.onArchivedSurface,
     text: theme.colors.onDarkGlobalSurface
   };
+  var fonts = {
+    "default": theme.fonts.neutral.semiBold
+  };
+  var fontSizes = {
+    "default": theme.fontSizes.small
+  };
+  var lineHeights = {
+    "default": theme.lineHeights.small
+  };
   var sizes = {
     height: theme.fontSizes.small + theme.sizes.small,
     minWidth: theme.fontSizes.small + theme.sizes.small,
@@ -2183,6 +2192,37 @@ var getBadgeTheme = function getBadgeTheme(theme) {
   };
   return {
     colors: colors,
+    fonts: fonts,
+    fontSizes: fontSizes,
+    sizes: sizes,
+    space: space,
+    lineHeights: lineHeights
+  };
+};
+
+var getBottomNavigationTheme = function getBottomNavigationTheme(theme) {
+  var colors = {
+    shadow: theme.colors.primary,
+    background: theme.colors.defaultGlobalSurface
+  };
+  var sizes = {
+    height: theme.sizes['6xlarge']
+  };
+  var shadows = {
+    offset: {
+      width: 0,
+      height: 3
+    },
+    opacity: 0.27,
+    radius: 4.65,
+    elevation: 10
+  };
+  var space = {
+    titleMarginTop: theme.space.xsmall
+  };
+  return {
+    colors: colors,
+    shadows: shadows,
     sizes: sizes,
     space: space
   };
@@ -2226,6 +2266,15 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
 };
 
 var getButtonTheme = function getButtonTheme(theme) {
+  var fonts = {
+    "default": theme.fonts.neutral.semiBold,
+    utility: theme.fonts.neutral.regular
+  };
+  var fontSize = {
+    "default": theme.fontSizes.xlarge,
+    utility: theme.fontSizes.large,
+    textVariant: theme.fontSizes.large
+  };
   var borderWidth = {
     "default": theme.space.xxsmall
   };
@@ -2272,6 +2321,8 @@ var getButtonTheme = function getButtonTheme(theme) {
   return {
     lineHeights: lineHeights,
     borderWidth: borderWidth,
+    fonts: fonts,
+    fontSize: fontSize,
     sizes: sizes,
     radii: radii,
     colors: colors,
@@ -2347,8 +2398,20 @@ var getCarouselTheme = function getCarouselTheme(theme) {
     pageControlPaddingVertical: theme.space.small,
     pageControlWrapperHeight: scale(48)
   };
+  var fontSizes = {
+    heading: theme.fontSizes['xxxxxlarge']
+  };
+  var fonts = {
+    heading: theme.fonts.playful.semiBold
+  };
+  var lineHeights = {
+    heading: theme.lineHeights['6xlarge']
+  };
   return {
-    space: space
+    space: space,
+    fonts: fonts,
+    fontSizes: fontSizes,
+    lineHeights: lineHeights
   };
 };
 
@@ -2532,10 +2595,20 @@ var getEmptyTheme = function getEmptyTheme(theme) {
     subduedText: theme.colors.mutedOnDefaultGlobalSurface,
     invertedSubduedText: theme.colors.onDarkGlobalSurface
   };
+  var fontSizes = {
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge
+  };
+  var fonts = {
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular
+  };
   return {
+    fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
-    space: space
+    space: space,
+    fonts: fonts
   };
 };
 
@@ -2560,10 +2633,25 @@ var getErrorTheme = function getErrorTheme(theme) {
     fullScreenBackground: theme.colors.decorativePrimarySurface,
     inPageBackground: theme.colors.neutralGlobalSurface
   };
+  var fontSizes = {
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge
+  };
+  var fonts = {
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular
+  };
+  var lineHeight = {
+    title: theme.lineHeights.xxxlarge,
+    description: theme.lineHeights.xlarge
+  };
   return {
+    fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
-    space: space
+    space: space,
+    fonts: fonts,
+    lineHeight: lineHeight
   };
 };
 
@@ -2620,10 +2708,10 @@ var getFABTheme = function getFABTheme(theme) {
   };
   return {
     radii: radii,
-    colors: colors,
-    sizes: sizes,
     fonts: fonts,
     fontSizes: fontSizes,
+    colors: colors,
+    sizes: sizes,
     lineHeights: lineHeights,
     shadows: shadows,
     space: space
@@ -2748,6 +2836,18 @@ var getPinInputTheme = function getPinInputTheme(theme) {
     error: theme.colors.onErrorSurface,
     disabled: theme.colors.disabledOnDefaultGlobalSurface
   };
+  var fonts = {
+    cellText: theme.fonts.neutral.semiBold,
+    errorMessage: theme.fonts.neutral.regular
+  };
+  var fontSizes = {
+    cellText: theme.fontSizes.xxxxlarge,
+    errorMessage: theme.fontSizes.small
+  };
+  var lineHeights = {
+    cellText: theme.lineHeights.xxxxlarge,
+    errorMessage: theme.fontSizes.small
+  };
   var sizes = {
     cellWidth: theme.sizes.xxlarge,
     cellHeight: theme.sizes.xxxlarge,
@@ -2763,7 +2863,10 @@ var getPinInputTheme = function getPinInputTheme(theme) {
   };
   return {
     borderWidths: borderWidths,
+    lineHeights: lineHeights,
     colors: colors,
+    fonts: fonts,
+    fontSizes: fontSizes,
     sizes: sizes,
     space: space,
     radii: radii
@@ -3022,10 +3125,20 @@ var getSuccessTheme = function getSuccessTheme(theme) {
     fullScreenBackground: theme.colors.decorativePrimarySurface,
     inPageBackground: theme.colors.neutralGlobalSurface
   };
+  var fontSizes = {
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge
+  };
+  var fonts = {
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular
+  };
   return {
+    fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
-    space: space
+    space: space,
+    fonts: fonts
   };
 };
 
@@ -3146,6 +3259,15 @@ var getTagTheme = function getTagTheme(theme) {
     archivedBackground: theme.colors.archivedSurface,
     text: theme.colors.onDefaultGlobalSurface
   };
+  var fonts = {
+    "default": theme.fonts.neutral.semiBold
+  };
+  var fontSizes = {
+    "default": theme.fontSizes.small
+  };
+  var lineHeights = {
+    "default": theme.lineHeights.small
+  };
   var space = {
     horizontalPadding: theme.space.small,
     verticalPadding: theme.space.xsmall
@@ -3156,8 +3278,11 @@ var getTagTheme = function getTagTheme(theme) {
   return {
     borderWidths: borderWidths,
     colors: colors,
+    fonts: fonts,
+    fontSizes: fontSizes,
     space: space,
-    radii: radii
+    radii: radii,
+    lineHeights: lineHeights
   };
 };
 
@@ -3221,7 +3346,12 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     text: theme.fonts.neutral.regular
   };
   var fontSizes = {
-    text: theme.fontSizes.large
+    text: theme.fontSizes.large,
+    labelInsideTextInput: theme.fontSizes.large,
+    error: theme.fontSizes.small,
+    maxLength: theme.fontSizes.small,
+    asteriskLabel: theme.fontSizes.large,
+    topLabel: theme.fontSizes.small
   };
   var borderWidths = {
     container: {
@@ -3523,6 +3653,7 @@ var getTheme$1 = function getTheme() {
       attachment: getAttachmentTheme(globalTheme),
       avatar: getAvatarTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),
+      bottomNavigation: getBottomNavigationTheme(globalTheme),
       bottomSheet: getBottomSheetTheme(globalTheme),
       button: getButtonTheme(globalTheme),
       calendar: getCalendarTheme(globalTheme),
@@ -6566,7 +6697,7 @@ var StyledText$3 = index$a(Text$1)(function (_ref) {
   });
 });
 
-var _excluded$z = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$A = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6579,7 +6710,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$z);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$A);
   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.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -6609,7 +6740,7 @@ var StyledCaption = index$a(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$y = ["children", "fontWeight", "intent", "allowFontScaling"];
+var _excluded$z = ["children", "fontWeight", "intent", "allowFontScaling"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -6618,7 +6749,7 @@ var Caption = function Caption(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$z);
   return /*#__PURE__*/React.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -6637,14 +6768,14 @@ var StyledLabel$1 = index$a(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$x = ["children", "intent", "allowFontScaling"];
+var _excluded$y = ["children", "intent", "allowFontScaling"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$x);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$y);
   return /*#__PURE__*/React.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
@@ -6665,7 +6796,7 @@ var StyledTitle$1 = index$a(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$w = ["children", "intent", "allowFontScaling", "level", "typeface"];
+var _excluded$x = ["children", "intent", "allowFontScaling", "level", "typeface"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -6676,7 +6807,7 @@ var Title = function Title(_ref) {
     level = _ref$level === void 0 ? 'h1' : _ref$level,
     _ref$typeface = _ref.typeface,
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$x);
   return /*#__PURE__*/React.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -6711,7 +6842,7 @@ var StyledBody = index$a(Text$1)(function (_ref) {
   };
 });
 
-var _excluded$v = ["children", "intent", "allowFontScaling", "typeface", "variant"];
+var _excluded$w = ["children", "intent", "allowFontScaling", "typeface", "variant"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -6722,7 +6853,7 @@ var Body = function Body(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$w);
   return /*#__PURE__*/React.createElement(StyledBody, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
@@ -6740,7 +6871,7 @@ var Typography = {
 };
 
 // 🔴 DO NOT EDIT — This file is generated automatically.
-var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bolt', 'bookmark-added', 'bookmark', 'box-check', 'box', 'bpay', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'caret-down-small', 'caret-down', 'caret-left-small', 'caret-left', 'caret-right-small', 'caret-right', 'caret-up-small', 'caret-up', 'check-radio', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock-3', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'double-buildings', 'edit-template', 'envelope', 'exclude', 'expand-content', 'expense', 'eye-circle', 'eye-invisible', 'eye', 'face-meh', 'face-sad', 'face-smiley', 'feed', 'feedbacks', 'file-certified', 'file-clone', 'file-copy', 'file-csv', 'file-dispose', 'file-doc', 'file-excel', 'file-export', 'file-lock', 'file-pdf', 'file-powerpoint', 'file-search', 'file-secured', 'file-sheets', 'file-slide', 'file-verified', 'file-word', 'file', 'filter', 'folder-user', 'folder', 'format-bold', 'format-heading1', 'format-heading2', 'format-italic', 'format-list-bulleted', 'format-list-numbered', 'format-underlined', 'funnel-filter', 'global-dollar', 'globe', 'graduation-cap', 'graph', 'happy-sun', 'health-bag', 'heart', 'home', 'image', 'import', 'incident-siren', 'instapay', 'list', 'loading-2', 'loading', 'location-on', 'location', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'money-notes', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'near-me', 'node', 'open-folder', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane-up', 'plane', 'play-circle', 'print', 'raising-hands', 'reply-arrow', 'reply', 'reschedule', 'rostering', 'save', 'schedule-send', 'schedule', 'search-person', 'send', 'speaker-active', 'speaker', 'star-award', 'star-badge', 'star-circle', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'surfing', 'survey', 'swag-pillar-benefit', 'swag-pillar-career', 'swag-pillar-money', 'swag-pillar-work', 'swag', 'swipe-right', 'switch', 'tag', 'target', 'teams', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'wallet', 'warning', 'activate-outlined', 'add-credit-card-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'ai-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'application-outlined', 'arrow-down', 'arrow-downwards', 'arrow-left', 'arrow-leftwards', 'arrow-right', 'arrow-rightwards', 'arrow-up', 'arrow-upwards', 'article-outlined', 'at-sign', 'auto-graph-outlined', 'beer-outlined', 'bell-active-outlined', 'bell-outlined', 'bell-slash-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bolt-outlined', 'book-outlined', 'bookmark-added-outlined', 'bookmark-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'call-outlined', 'call-split-outlined', 'camera-outlined', 'cancel', 'car-forward-outlined', 'charging-station-outlined', 'chat-bubble-outlined', 'chat-unread-outlined', 'checkmark', 'circle-add-outlined', 'circle-cancel-outlined', 'circle-down-outlined', 'circle-info-outlined', 'circle-left-outlined', 'circle-ok-outlined', 'circle-question-outlined', 'circle-remove-outlined', 'circle-right-outlined', 'circle-up-outlined', 'circle-warning-outlined', 'clock-2-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'coin-super-outlined', 'comment-outlined', 'contacts-outlined', 'contacts-user-outlined', 'credit-card-outlined', 'cup-outlined', 'dentistry-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-box-outlined', 'dollar-card-outlined', 'dollar-coin-shine-outlined', 'dollar-credit-card-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-box-outlined', 'download-outlined', 'edit-template-outlined', 'email-outlined', 'enter-arrow', 'envelope-outlined', 'expense-approval-outlined', 'expense-outlined', 'explore-outlined', 'extension-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'fastfood-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-dollar-certified-outlined', 'file-dollar-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-statutory-outlined', 'file-verified-outlined', 'filter-outlined', 'folder-outlined', 'folder-user-outlined', 'form-outlined', 'funnel-filter-outline', 'goal-outlined', 'graph-outlined', 'hand-holding-user-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-active-outlined', 'home-outlined', 'id-card-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'job-search-outlined', 'leave-approval-outlined', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'location-on-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'mail-outlined', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'multiple-folders-outlined', 'multiple-users-outlined', 'near-me-outlined', 'node-outlined', 'number-points', 'number', 'overview-outlined', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'propane-tank-outlined', 'qr-code-outlined', 'qualification-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'resume-outlined', 'return-arrow', 'rostering-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'search-secured-outlined', 'send-outlined', 'share-1', 'share-2', 'share-outlined', 'show-chart-outlined', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'smart-match-outlined', 'sparkle-outlined', 'speaker-active-outlined', 'speaker-outlined', 'star-circle-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'styler-outlined', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'tag-outlined', 'target-outlined', 'tennis-outlined', 'ticket-outlined', 'timesheet-outlined', 'timesheets-outlined', 'today-outlined', 'transfer', 'trash-bin-outlined', 'umbrela-outlined', 'unavailable', 'underline', 'union-outlined', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-gear-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'volunteer-outlined', 'wallet-outlined'];
+var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bolt', 'bookmark-added', 'bookmark', 'box-check', 'box', 'bpay', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'caret-down-small', 'caret-down', 'caret-left-small', 'caret-left', 'caret-right-small', 'caret-right', 'caret-up-small', 'caret-up', 'check-radio', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock-3', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'double-buildings', 'edit-template', 'envelope', 'exclude', 'expand-content', 'expense', 'eye-circle', 'eye-invisible', 'eye', 'face-meh', 'face-sad', 'face-smiley', 'feed', 'feedbacks', 'file-certified', 'file-clone', 'file-copy', 'file-csv', 'file-dispose', 'file-doc', 'file-excel', 'file-export', 'file-lock', 'file-pdf', 'file-powerpoint', 'file-search', 'file-secured', 'file-sheets', 'file-slide', 'file-verified', 'file-word', 'file', 'filter', 'folder-user', 'folder', 'format-bold', 'format-heading1', 'format-heading2', 'format-italic', 'format-list-bulleted', 'format-list-numbered', 'format-underlined', 'funnel-filter', 'global-dollar', 'globe', 'graduation-cap', 'graph', 'happy-sun', 'health-bag', 'heart', 'hero-points', 'home', 'image', 'import', 'incident-siren', 'instapay-daily', 'instapay-now', 'instapay', 'list', 'loading-2', 'loading', 'location-on', 'location', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'money-notes', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'near-me', 'node', 'open-folder', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane-up', 'plane', 'play-circle', 'print', 'raising-hands', 'reply-arrow', 'reply', 'reschedule', 'rostering', 'salary-sacrifice', 'save', 'schedule-send', 'schedule', 'search-person', 'send', 'speaker-active', 'speaker', 'star-award', 'star-badge', 'star-circle', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'surfing', 'survey', 'swag-pillar-benefit', 'swag-pillar-career', 'swag-pillar-money', 'swag-pillar-work', 'swag', 'swipe-right', 'switch', 'tag', 'target', 'teams', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'wallet', 'warning', 'activate-outlined', 'add-credit-card-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'ai-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'application-outlined', 'arrow-down', 'arrow-downwards', 'arrow-left', 'arrow-leftwards', 'arrow-right', 'arrow-rightwards', 'arrow-up', 'arrow-upwards', 'article-outlined', 'at-sign', 'auto-graph-outlined', 'beer-outlined', 'bell-active-outlined', 'bell-outlined', 'bell-slash-outlined', 'bill-management-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bolt-outlined', 'book-outlined', 'bookmark-added-outlined', 'bookmark-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'call-outlined', 'call-split-outlined', 'camera-outlined', 'cancel', 'car-forward-outlined', 'cashback-outlined', 'charging-station-outlined', 'chat-bubble-outlined', 'chat-unread-outlined', 'checkmark', 'circle-add-outlined', 'circle-cancel-outlined', 'circle-down-outlined', 'circle-info-outlined', 'circle-left-outlined', 'circle-ok-outlined', 'circle-question-outlined', 'circle-remove-outlined', 'circle-right-outlined', 'circle-up-outlined', 'circle-warning-outlined', 'clock-2-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'coin-super-outlined', 'comment-outlined', 'contacts-outlined', 'contacts-user-outlined', 'credit-card-outlined', 'cup-outlined', 'dentistry-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-box-outlined', 'dollar-card-outlined', 'dollar-coin-shine-outlined', 'dollar-credit-card-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-box-outlined', 'download-outlined', 'edit-template-outlined', 'email-outlined', 'enter-arrow', 'envelope-outlined', 'expense-approval-outlined', 'expense-outlined', 'explore-outlined', 'extension-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'fastfood-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-dollar-certified-outlined', 'file-dollar-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-statutory-outlined', 'file-verified-outlined', 'filter-outlined', 'folder-outlined', 'folder-user-outlined', 'form-outlined', 'funnel-filter-outline', 'goal-outlined', 'graph-outlined', 'hand-holding-user-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-active-outlined', 'home-outlined', 'id-card-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'job-search-outlined', 'leave-approval-outlined', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'location-on-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'mail-outlined', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'multiple-folders-outlined', 'multiple-users-outlined', 'near-me-outlined', 'node-outlined', 'number-points', 'number', 'overview-outlined', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'propane-tank-outlined', 'qr-code-outlined', 'qualification-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'resume-outlined', 'return-arrow', 'rostering-outlined', 'safety-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'search-secured-outlined', 'send-outlined', 'share-1', 'share-2', 'share-outlined', 'show-chart-outlined', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'smart-match-outlined', 'sparkle-outlined', 'speaker-active-outlined', 'speaker-outlined', 'star-circle-outlined', 'star-outlined', 'stash-outlined', 'stopwatch-outlined', 'strikethrough', 'styler-outlined', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'tag-outlined', 'target-outlined', 'tennis-outlined', 'ticket-outlined', 'timesheet-outlined', 'timesheets-outlined', 'today-outlined', 'transfer', 'trash-bin-outlined', 'umbrela-outlined', 'unavailability-outlined', 'unavailable', 'underline', 'union-outlined', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-gear-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'volunteer-outlined', 'wallet-outlined'];
 
 var activate = 59000;
 var adjustment = 59003;
@@ -6776,59 +6907,59 @@ var folder = 59091;
 var globe = 59101;
 var graph = 59103;
 var heart = 59106;
-var home = 59107;
-var image = 59108;
-var instapay = 59111;
-var list = 59112;
-var loading = 59114;
-var location = 59116;
-var lock = 59117;
-var menu = 59121;
-var moneybag = 59123;
-var moon = 59124;
-var node = 59128;
-var paperclip = 59130;
-var pencil = 59132;
-var phone = 59133;
-var plane = 59136;
-var print = 59138;
-var reply = 59141;
-var reschedule = 59142;
-var rostering = 59143;
-var save = 59144;
-var schedule = 59146;
-var send = 59148;
-var speaker = 59150;
-var star = 59155;
-var stopwatch = 59157;
-var suitcase = 59158;
-var surfing = 59159;
-var survey = 59160;
-var swag = 59165;
-var tag = 59168;
-var target = 59169;
-var teams = 59170;
-var timesheet = 59171;
-var unlock = 59174;
-var user = 59175;
-var wallet = 59178;
-var warning = 59179;
-var add = 59185;
-var bold = 59209;
-var cancel = 59223;
-var checkmark = 59228;
-var italic = 59313;
-var number = 59340;
-var percentage = 59345;
-var redeem = 59355;
-var refresh = 59356;
-var remove = 59357;
-var restart = 59359;
-var strikethrough = 59383;
-var sync = 59389;
-var transfer = 59397;
-var unavailable = 59400;
-var underline = 59401;
+var home = 59108;
+var image = 59109;
+var instapay = 59114;
+var list = 59115;
+var loading = 59117;
+var location = 59119;
+var lock = 59120;
+var menu = 59124;
+var moneybag = 59126;
+var moon = 59127;
+var node = 59131;
+var paperclip = 59133;
+var pencil = 59135;
+var phone = 59136;
+var plane = 59139;
+var print = 59141;
+var reply = 59144;
+var reschedule = 59145;
+var rostering = 59146;
+var save = 59148;
+var schedule = 59150;
+var send = 59152;
+var speaker = 59154;
+var star = 59159;
+var stopwatch = 59161;
+var suitcase = 59162;
+var surfing = 59163;
+var survey = 59164;
+var swag = 59169;
+var tag = 59172;
+var target = 59173;
+var teams = 59174;
+var timesheet = 59175;
+var unlock = 59178;
+var user = 59179;
+var wallet = 59182;
+var warning = 59183;
+var add = 59189;
+var bold = 59214;
+var cancel = 59228;
+var checkmark = 59234;
+var italic = 59319;
+var number = 59346;
+var percentage = 59351;
+var redeem = 59361;
+var refresh = 59362;
+var remove = 59363;
+var restart = 59365;
+var strikethrough = 59391;
+var sync = 59397;
+var transfer = 59405;
+var unavailable = 59409;
+var underline = 59410;
 var glyphMap = {
 	activate: activate,
 	"add-emoji": 59001,
@@ -6937,312 +7068,321 @@ var glyphMap = {
 	"happy-sun": 59104,
 	"health-bag": 59105,
 	heart: heart,
+	"hero-points": 59107,
 	home: home,
 	image: image,
-	"import": 59109,
-	"incident-siren": 59110,
+	"import": 59110,
+	"incident-siren": 59111,
+	"instapay-daily": 59112,
+	"instapay-now": 59113,
 	instapay: instapay,
 	list: list,
-	"loading-2": 59113,
+	"loading-2": 59116,
 	loading: loading,
-	"location-on": 59115,
+	"location-on": 59118,
 	location: location,
 	lock: lock,
-	"looks-one": 59118,
-	"looks-two": 59119,
-	"media-content": 59120,
+	"looks-one": 59121,
+	"looks-two": 59122,
+	"media-content": 59123,
 	menu: menu,
-	"money-notes": 59122,
+	"money-notes": 59125,
 	moneybag: moneybag,
 	moon: moon,
-	"multiple-stars": 59125,
-	"multiple-users": 59126,
-	"near-me": 59127,
+	"multiple-stars": 59128,
+	"multiple-users": 59129,
+	"near-me": 59130,
 	node: node,
-	"open-folder": 59129,
+	"open-folder": 59132,
 	paperclip: paperclip,
-	"payment-summary": 59131,
+	"payment-summary": 59134,
 	pencil: pencil,
 	phone: phone,
-	"piggy-bank": 59134,
-	"plane-up": 59135,
+	"piggy-bank": 59137,
+	"plane-up": 59138,
 	plane: plane,
-	"play-circle": 59137,
+	"play-circle": 59140,
 	print: print,
-	"raising-hands": 59139,
-	"reply-arrow": 59140,
+	"raising-hands": 59142,
+	"reply-arrow": 59143,
 	reply: reply,
 	reschedule: reschedule,
 	rostering: rostering,
+	"salary-sacrifice": 59147,
 	save: save,
-	"schedule-send": 59145,
+	"schedule-send": 59149,
 	schedule: schedule,
-	"search-person": 59147,
+	"search-person": 59151,
 	send: send,
-	"speaker-active": 59149,
+	"speaker-active": 59153,
 	speaker: speaker,
-	"star-award": 59151,
-	"star-badge": 59152,
-	"star-circle": 59153,
-	"star-medal": 59154,
+	"star-award": 59155,
+	"star-badge": 59156,
+	"star-circle": 59157,
+	"star-medal": 59158,
 	star: star,
-	"steps-circle": 59156,
+	"steps-circle": 59160,
 	stopwatch: stopwatch,
 	suitcase: suitcase,
 	surfing: surfing,
 	survey: survey,
-	"swag-pillar-benefit": 59161,
-	"swag-pillar-career": 59162,
-	"swag-pillar-money": 59163,
-	"swag-pillar-work": 59164,
+	"swag-pillar-benefit": 59165,
+	"swag-pillar-career": 59166,
+	"swag-pillar-money": 59167,
+	"swag-pillar-work": 59168,
 	swag: swag,
-	"swipe-right": 59166,
-	"switch": 59167,
+	"swipe-right": 59170,
+	"switch": 59171,
 	tag: tag,
 	target: target,
 	teams: teams,
 	timesheet: timesheet,
-	"touch-id": 59172,
-	"trash-bin": 59173,
+	"touch-id": 59176,
+	"trash-bin": 59177,
 	unlock: unlock,
 	user: user,
-	"video-1": 59176,
-	"video-2": 59177,
+	"video-1": 59180,
+	"video-2": 59181,
 	wallet: wallet,
 	warning: warning,
-	"activate-outlined": 59180,
-	"add-credit-card-outlined": 59181,
-	"add-person-outlined": 59182,
-	"add-section-outlined": 59183,
-	"add-time-outlined": 59184,
+	"activate-outlined": 59184,
+	"add-credit-card-outlined": 59185,
+	"add-person-outlined": 59186,
+	"add-section-outlined": 59187,
+	"add-time-outlined": 59188,
 	add: add,
-	"adjustment-outlined": 59186,
-	"ai-outlined": 59187,
-	"alignment-2-outlined": 59188,
-	"alignment-outlined": 59189,
-	"all-caps": 59190,
-	"application-outlined": 59191,
-	"arrow-down": 59192,
-	"arrow-downwards": 59193,
-	"arrow-left": 59194,
-	"arrow-leftwards": 59195,
-	"arrow-right": 59196,
-	"arrow-rightwards": 59197,
-	"arrow-up": 59198,
-	"arrow-upwards": 59199,
-	"article-outlined": 59200,
-	"at-sign": 59201,
-	"auto-graph-outlined": 59202,
-	"beer-outlined": 59203,
-	"bell-active-outlined": 59204,
-	"bell-outlined": 59205,
-	"bell-slash-outlined": 59206,
-	"billing-outlined": 59207,
-	"body-outlined": 59208,
+	"adjustment-outlined": 59190,
+	"ai-outlined": 59191,
+	"alignment-2-outlined": 59192,
+	"alignment-outlined": 59193,
+	"all-caps": 59194,
+	"application-outlined": 59195,
+	"arrow-down": 59196,
+	"arrow-downwards": 59197,
+	"arrow-left": 59198,
+	"arrow-leftwards": 59199,
+	"arrow-right": 59200,
+	"arrow-rightwards": 59201,
+	"arrow-up": 59202,
+	"arrow-upwards": 59203,
+	"article-outlined": 59204,
+	"at-sign": 59205,
+	"auto-graph-outlined": 59206,
+	"beer-outlined": 59207,
+	"bell-active-outlined": 59208,
+	"bell-outlined": 59209,
+	"bell-slash-outlined": 59210,
+	"bill-management-outlined": 59211,
+	"billing-outlined": 59212,
+	"body-outlined": 59213,
 	bold: bold,
-	"bolt-outlined": 59210,
-	"book-outlined": 59211,
-	"bookmark-added-outlined": 59212,
-	"bookmark-outlined": 59213,
-	"box-check-outlined": 59214,
-	"box-outlined": 59215,
-	"bullet-points": 59216,
-	"cake-outlined": 59217,
-	"calendar-dates-outlined": 59218,
-	"calendar-star-outlined": 59219,
-	"call-outlined": 59220,
-	"call-split-outlined": 59221,
-	"camera-outlined": 59222,
+	"bolt-outlined": 59215,
+	"book-outlined": 59216,
+	"bookmark-added-outlined": 59217,
+	"bookmark-outlined": 59218,
+	"box-check-outlined": 59219,
+	"box-outlined": 59220,
+	"bullet-points": 59221,
+	"cake-outlined": 59222,
+	"calendar-dates-outlined": 59223,
+	"calendar-star-outlined": 59224,
+	"call-outlined": 59225,
+	"call-split-outlined": 59226,
+	"camera-outlined": 59227,
 	cancel: cancel,
-	"car-forward-outlined": 59224,
-	"charging-station-outlined": 59225,
-	"chat-bubble-outlined": 59226,
-	"chat-unread-outlined": 59227,
+	"car-forward-outlined": 59229,
+	"cashback-outlined": 59230,
+	"charging-station-outlined": 59231,
+	"chat-bubble-outlined": 59232,
+	"chat-unread-outlined": 59233,
 	checkmark: checkmark,
-	"circle-add-outlined": 59229,
-	"circle-cancel-outlined": 59230,
-	"circle-down-outlined": 59231,
-	"circle-info-outlined": 59232,
-	"circle-left-outlined": 59233,
-	"circle-ok-outlined": 59234,
-	"circle-question-outlined": 59235,
-	"circle-remove-outlined": 59236,
-	"circle-right-outlined": 59237,
-	"circle-up-outlined": 59238,
-	"circle-warning-outlined": 59239,
-	"clock-2-outlined": 59240,
-	"clock-outlined": 59241,
-	"cog-outlined": 59242,
-	"coin-outlined": 59243,
-	"coin-super-outlined": 59244,
-	"comment-outlined": 59245,
-	"contacts-outlined": 59246,
-	"contacts-user-outlined": 59247,
-	"credit-card-outlined": 59248,
-	"cup-outlined": 59249,
-	"dentistry-outlined": 59250,
-	"direction-arrows-outlined": 59251,
-	"directory-outlined": 59252,
-	"document-outlined": 59253,
-	"dollar-box-outlined": 59254,
-	"dollar-card-outlined": 59255,
-	"dollar-coin-shine-outlined": 59256,
-	"dollar-credit-card-outlined": 59257,
-	"dollar-sign": 59258,
-	"double-buildings-outlined": 59259,
-	"double-left-arrows": 59260,
-	"double-right-arrows": 59261,
-	"download-box-outlined": 59262,
-	"download-outlined": 59263,
-	"edit-template-outlined": 59264,
-	"email-outlined": 59265,
-	"enter-arrow": 59266,
-	"envelope-outlined": 59267,
-	"expense-approval-outlined": 59268,
-	"expense-outlined": 59269,
-	"explore-outlined": 59270,
-	"extension-outlined": 59271,
-	"external-link": 59272,
-	"eye-invisible-outlined": 59273,
-	"eye-outlined": 59274,
-	"face-id": 59275,
-	"face-meh-outlined": 59276,
-	"face-open-smiley-outlined": 59277,
-	"face-sad-outlined": 59278,
-	"face-smiley-outlined": 59279,
-	"fastfood-outlined": 59280,
-	"feed-outlined": 59281,
-	"file-certified-outlined": 59282,
-	"file-clone-outlined": 59283,
-	"file-copy-outlined": 59284,
-	"file-dispose-outlined": 59285,
-	"file-dollar-certified-outlined": 59286,
-	"file-dollar-outlined": 59287,
-	"file-download-outlined": 59288,
-	"file-export-outlined": 59289,
-	"file-lock-outlined": 59290,
-	"file-outlined": 59291,
-	"file-search-outlined": 59292,
-	"file-secured-outlined": 59293,
-	"file-statutory-outlined": 59294,
-	"file-verified-outlined": 59295,
-	"filter-outlined": 59296,
-	"folder-outlined": 59297,
-	"folder-user-outlined": 59298,
-	"form-outlined": 59299,
-	"funnel-filter-outline": 59300,
-	"goal-outlined": 59301,
-	"graph-outlined": 59302,
-	"hand-holding-user-outlined": 59303,
-	"happy-sun-outlined": 59304,
-	"health-bag-outlined": 59305,
-	"heart-outlined": 59306,
-	"home-active-outlined": 59307,
-	"home-outlined": 59308,
-	"id-card-outlined": 59309,
-	"image-outlined": 59310,
-	"import-outlined": 59311,
-	"instapay-outlined": 59312,
+	"circle-add-outlined": 59235,
+	"circle-cancel-outlined": 59236,
+	"circle-down-outlined": 59237,
+	"circle-info-outlined": 59238,
+	"circle-left-outlined": 59239,
+	"circle-ok-outlined": 59240,
+	"circle-question-outlined": 59241,
+	"circle-remove-outlined": 59242,
+	"circle-right-outlined": 59243,
+	"circle-up-outlined": 59244,
+	"circle-warning-outlined": 59245,
+	"clock-2-outlined": 59246,
+	"clock-outlined": 59247,
+	"cog-outlined": 59248,
+	"coin-outlined": 59249,
+	"coin-super-outlined": 59250,
+	"comment-outlined": 59251,
+	"contacts-outlined": 59252,
+	"contacts-user-outlined": 59253,
+	"credit-card-outlined": 59254,
+	"cup-outlined": 59255,
+	"dentistry-outlined": 59256,
+	"direction-arrows-outlined": 59257,
+	"directory-outlined": 59258,
+	"document-outlined": 59259,
+	"dollar-box-outlined": 59260,
+	"dollar-card-outlined": 59261,
+	"dollar-coin-shine-outlined": 59262,
+	"dollar-credit-card-outlined": 59263,
+	"dollar-sign": 59264,
+	"double-buildings-outlined": 59265,
+	"double-left-arrows": 59266,
+	"double-right-arrows": 59267,
+	"download-box-outlined": 59268,
+	"download-outlined": 59269,
+	"edit-template-outlined": 59270,
+	"email-outlined": 59271,
+	"enter-arrow": 59272,
+	"envelope-outlined": 59273,
+	"expense-approval-outlined": 59274,
+	"expense-outlined": 59275,
+	"explore-outlined": 59276,
+	"extension-outlined": 59277,
+	"external-link": 59278,
+	"eye-invisible-outlined": 59279,
+	"eye-outlined": 59280,
+	"face-id": 59281,
+	"face-meh-outlined": 59282,
+	"face-open-smiley-outlined": 59283,
+	"face-sad-outlined": 59284,
+	"face-smiley-outlined": 59285,
+	"fastfood-outlined": 59286,
+	"feed-outlined": 59287,
+	"file-certified-outlined": 59288,
+	"file-clone-outlined": 59289,
+	"file-copy-outlined": 59290,
+	"file-dispose-outlined": 59291,
+	"file-dollar-certified-outlined": 59292,
+	"file-dollar-outlined": 59293,
+	"file-download-outlined": 59294,
+	"file-export-outlined": 59295,
+	"file-lock-outlined": 59296,
+	"file-outlined": 59297,
+	"file-search-outlined": 59298,
+	"file-secured-outlined": 59299,
+	"file-statutory-outlined": 59300,
+	"file-verified-outlined": 59301,
+	"filter-outlined": 59302,
+	"folder-outlined": 59303,
+	"folder-user-outlined": 59304,
+	"form-outlined": 59305,
+	"funnel-filter-outline": 59306,
+	"goal-outlined": 59307,
+	"graph-outlined": 59308,
+	"hand-holding-user-outlined": 59309,
+	"happy-sun-outlined": 59310,
+	"health-bag-outlined": 59311,
+	"heart-outlined": 59312,
+	"home-active-outlined": 59313,
+	"home-outlined": 59314,
+	"id-card-outlined": 59315,
+	"image-outlined": 59316,
+	"import-outlined": 59317,
+	"instapay-outlined": 59318,
 	italic: italic,
-	"job-search-outlined": 59314,
-	"leave-approval-outlined": 59315,
-	"link-1": 59316,
-	"link-2": 59317,
-	"list-outlined": 59318,
-	"live-help-outlined": 59319,
-	"location-on-outlined": 59320,
-	"location-outlined": 59321,
-	"lock-outlined": 59322,
-	"locked-file-outlined": 59323,
-	"log-out": 59324,
-	"mail-outlined": 59325,
-	"media-content-outlined": 59326,
-	"menu-close": 59327,
-	"menu-expand": 59328,
-	"menu-fold-outlined": 59329,
-	"menu-unfold-outlined": 59330,
-	"moneybag-outlined": 59331,
-	"moon-outlined": 59332,
-	"more-horizontal": 59333,
-	"more-vertical": 59334,
-	"multiple-folders-outlined": 59335,
-	"multiple-users-outlined": 59336,
-	"near-me-outlined": 59337,
-	"node-outlined": 59338,
-	"number-points": 59339,
+	"job-search-outlined": 59320,
+	"leave-approval-outlined": 59321,
+	"link-1": 59322,
+	"link-2": 59323,
+	"list-outlined": 59324,
+	"live-help-outlined": 59325,
+	"location-on-outlined": 59326,
+	"location-outlined": 59327,
+	"lock-outlined": 59328,
+	"locked-file-outlined": 59329,
+	"log-out": 59330,
+	"mail-outlined": 59331,
+	"media-content-outlined": 59332,
+	"menu-close": 59333,
+	"menu-expand": 59334,
+	"menu-fold-outlined": 59335,
+	"menu-unfold-outlined": 59336,
+	"moneybag-outlined": 59337,
+	"moon-outlined": 59338,
+	"more-horizontal": 59339,
+	"more-vertical": 59340,
+	"multiple-folders-outlined": 59341,
+	"multiple-users-outlined": 59342,
+	"near-me-outlined": 59343,
+	"node-outlined": 59344,
+	"number-points": 59345,
 	number: number,
-	"overview-outlined": 59341,
-	"payment-summary-outlined": 59342,
-	"payslip-outlined": 59343,
-	"pencil-outlined": 59344,
+	"overview-outlined": 59347,
+	"payment-summary-outlined": 59348,
+	"payslip-outlined": 59349,
+	"pencil-outlined": 59350,
 	percentage: percentage,
-	"phone-outlined": 59346,
-	"piggy-bank-outlined": 59347,
-	"plane-outlined": 59348,
-	"play-circle-outlined": 59349,
-	"print-outlined": 59350,
-	"propane-tank-outlined": 59351,
-	"qr-code-outlined": 59352,
-	"qualification-outlined": 59353,
-	"re-assign": 59354,
+	"phone-outlined": 59352,
+	"piggy-bank-outlined": 59353,
+	"plane-outlined": 59354,
+	"play-circle-outlined": 59355,
+	"print-outlined": 59356,
+	"propane-tank-outlined": 59357,
+	"qr-code-outlined": 59358,
+	"qualification-outlined": 59359,
+	"re-assign": 59360,
 	redeem: redeem,
 	refresh: refresh,
 	remove: remove,
-	"reply-outlined": 59358,
+	"reply-outlined": 59364,
 	restart: restart,
-	"resume-outlined": 59360,
-	"return-arrow": 59361,
-	"rostering-outlined": 59362,
-	"save-outlined": 59363,
-	"schedule-outlined": 59364,
-	"search-outlined": 59365,
-	"search-secured-outlined": 59366,
-	"send-outlined": 59367,
-	"share-1": 59368,
-	"share-2": 59369,
-	"share-outlined": 59370,
-	"show-chart-outlined": 59371,
-	"single-down-arrow": 59372,
-	"single-left-arrow": 59373,
-	"single-right-arrow": 59374,
-	"single-up-arrow": 59375,
-	"smart-match-outlined": 59376,
-	"sparkle-outlined": 59377,
-	"speaker-active-outlined": 59378,
-	"speaker-outlined": 59379,
-	"star-circle-outlined": 59380,
-	"star-outlined": 59381,
-	"stopwatch-outlined": 59382,
+	"resume-outlined": 59366,
+	"return-arrow": 59367,
+	"rostering-outlined": 59368,
+	"safety-outlined": 59369,
+	"save-outlined": 59370,
+	"schedule-outlined": 59371,
+	"search-outlined": 59372,
+	"search-secured-outlined": 59373,
+	"send-outlined": 59374,
+	"share-1": 59375,
+	"share-2": 59376,
+	"share-outlined": 59377,
+	"show-chart-outlined": 59378,
+	"single-down-arrow": 59379,
+	"single-left-arrow": 59380,
+	"single-right-arrow": 59381,
+	"single-up-arrow": 59382,
+	"smart-match-outlined": 59383,
+	"sparkle-outlined": 59384,
+	"speaker-active-outlined": 59385,
+	"speaker-outlined": 59386,
+	"star-circle-outlined": 59387,
+	"star-outlined": 59388,
+	"stash-outlined": 59389,
+	"stopwatch-outlined": 59390,
 	strikethrough: strikethrough,
-	"styler-outlined": 59384,
-	"suitcase-clock-outlined": 59385,
-	"suitcase-outlined": 59386,
-	"survey-outlined": 59387,
-	"switch-outlined": 59388,
+	"styler-outlined": 59392,
+	"suitcase-clock-outlined": 59393,
+	"suitcase-outlined": 59394,
+	"survey-outlined": 59395,
+	"switch-outlined": 59396,
 	sync: sync,
-	"tag-outlined": 59390,
-	"target-outlined": 59391,
-	"tennis-outlined": 59392,
-	"ticket-outlined": 59393,
-	"timesheet-outlined": 59394,
-	"timesheets-outlined": 59395,
-	"today-outlined": 59396,
+	"tag-outlined": 59398,
+	"target-outlined": 59399,
+	"tennis-outlined": 59400,
+	"ticket-outlined": 59401,
+	"timesheet-outlined": 59402,
+	"timesheets-outlined": 59403,
+	"today-outlined": 59404,
 	transfer: transfer,
-	"trash-bin-outlined": 59398,
-	"umbrela-outlined": 59399,
+	"trash-bin-outlined": 59406,
+	"umbrela-outlined": 59407,
+	"unavailability-outlined": 59408,
 	unavailable: unavailable,
 	underline: underline,
-	"union-outlined": 59402,
-	"unlock-outlined": 59403,
-	"upload-outlined": 59404,
-	"user-circle-outlined": 59405,
-	"user-gear-outlined": 59406,
-	"user-outlined": 59407,
-	"user-rectangle-outlined": 59408,
-	"video-1-outlined": 59409,
-	"video-2-outlined": 59410,
-	"volunteer-outlined": 59411,
-	"wallet-outlined": 59412
+	"union-outlined": 59411,
+	"unlock-outlined": 59412,
+	"upload-outlined": 59413,
+	"user-circle-outlined": 59414,
+	"user-gear-outlined": 59415,
+	"user-outlined": 59416,
+	"user-rectangle-outlined": 59417,
+	"video-1-outlined": 59418,
+	"video-2-outlined": 59419,
+	"volunteer-outlined": 59420,
+	"wallet-outlined": 59421
 };
 
 var HeroIcon = createIconSet(glyphMap, 'hero-icons-mobile', 'hero-icons-mobile.ttf');
@@ -7267,10 +7407,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$u = ["style"];
+var _excluded$v = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$u);
+    otherProps = _objectWithoutProperties(_ref, _excluded$v);
   var rotateAnimation = useRef(new Animated.Value(0));
   useEffect(function () {
     var animation = Animated.loop(Animated.timing(rotateAnimation.current, {
@@ -7375,7 +7515,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$t = ["key"];
+var _excluded$u = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -7396,7 +7536,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$t);
+      props = _objectWithoutProperties(_ref2, _excluded$u);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: key
@@ -7674,7 +7814,7 @@ var Avatar = function Avatar(_ref) {
   }));
 };
 
-Platform.OS === 'ios';
+var isIOS = Platform.OS === 'ios';
 var isAndroid = Platform.OS === 'android';
 function pick(keys, obj) {
   return keys.filter(function (key) {
@@ -7866,7 +8006,7 @@ var borderWidths = {
 var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
 var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
 
-var _excluded$s = ["theme"];
+var _excluded$t = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -7893,18 +8033,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$a(View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$s);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$t);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$r = ["children", "style", "testID"];
+var _excluded$s = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$r);
+    otherProps = _objectWithoutProperties(_ref, _excluded$s);
   return /*#__PURE__*/React.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -8118,7 +8258,7 @@ var StyledStatus = index$a(Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$q = ["children", "visible", "intent", "style", "testID"];
+var _excluded$r = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -8127,7 +8267,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$r);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -8160,7 +8300,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$p = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$q = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -8175,7 +8315,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$q);
   var _React$useRef = React.useRef(new Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React.useRef(true);
@@ -8211,6 +8351,136 @@ var Badge$1 = Object.assign(Badge, {
   Status: Status
 });
 
+var isHeroIcon = function isHeroIcon(x) {
+  return IconList.includes(x);
+};
+
+var BottomNavigationTab = index$a(View)(function (_ref) {
+  var themeVisibility = _ref.themeVisibility;
+  return {
+    flex: 1,
+    display: themeVisibility === false ? 'none' : 'flex'
+  };
+});
+var BottomNavigationContainer = index$a(View)({
+  flex: 1,
+  overflow: 'hidden'
+});
+var ContentWrapper$2 = index$a(View)({
+  flex: 1
+});
+var BottomBarWrapper = index$a(View)(function (_ref2) {
+  var themeInsets = _ref2.themeInsets,
+    theme = _ref2.theme;
+  return {
+    height: theme.__hd__.bottomNavigation.sizes.height + themeInsets.bottom,
+    paddingBottom: themeInsets.bottom,
+    paddingLeft: Math.max(themeInsets.left, themeInsets.right),
+    paddingRight: Math.max(themeInsets.left, themeInsets.right),
+    backgroundColor: theme.__hd__.bottomNavigation.colors.background,
+    shadowColor: theme.__hd__.bottomNavigation.colors.shadow,
+    shadowOffset: theme.__hd__.bottomNavigation.shadows.offset,
+    shadowOpacity: theme.__hd__.bottomNavigation.shadows.opacity,
+    shadowRadius: theme.__hd__.bottomNavigation.shadows.radius,
+    elevation: theme.__hd__.bottomNavigation.shadows.elevation
+  };
+});
+var BottomBar = index$a(View)({
+  flex: 1,
+  flexDirection: 'row',
+  overflow: 'hidden',
+  alignItems: 'center'
+});
+var BottomBarItem = index$a(View)({
+  flex: 1,
+  alignItems: 'center'
+});
+var StyledBottomBarText = index$a(Typography.Caption)(function (_ref3) {
+  var theme = _ref3.theme;
+  return {
+    marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop
+  };
+});
+
+var _excluded$p = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var getInactiveIcon = function getInactiveIcon(icon) {
+  var inactiveIcon = "".concat(icon, "-outlined");
+  return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
+};
+var BottomNavigation = function BottomNavigation(_ref) {
+  var onTabPress = _ref.onTabPress,
+    _ref$renderActiveTabO = _ref.renderActiveTabOnly,
+    renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
+    selectedTabKey = _ref.selectedTabKey,
+    tabs = _ref.tabs,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$p);
+  useDeprecation('BottomNavigation is deprecated and will be removed in the next major release. Please remove it.');
+  var insets = useSafeAreaInsets();
+  /**
+   * List of loaded tabs, tabs will be loaded when navigated to.
+   */
+  var _React$useState = React.useState([selectedTabKey]),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    loaded = _React$useState2[0],
+    setLoaded = _React$useState2[1];
+  if (!loaded.includes(selectedTabKey)) {
+    // Set the current tab to be loaded if it was not loaded before
+    setLoaded(function (loadedState) {
+      return [].concat(_toConsumableArray(loadedState), [selectedTabKey]);
+    });
+  }
+  return /*#__PURE__*/React.createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React.createElement(ContentWrapper$2, null, tabs.map(function (tab) {
+    var key = tab.key,
+      component = tab.component,
+      testID = tab.testID;
+    var active = selectedTabKey === key;
+    if (renderActiveTabOnly && !active) {
+      return null;
+    }
+    if (!loaded.includes(key)) {
+      // Don't render a screen if we've never navigated to it
+      return null;
+    }
+    return /*#__PURE__*/React.createElement(BottomNavigationTab, {
+      key: key,
+      testID: testID ? "route-screen-".concat(testID) : undefined,
+      pointerEvents: active ? 'auto' : 'none',
+      accessibilityElementsHidden: !active,
+      importantForAccessibility: active ? 'auto' : 'no-hide-descendants',
+      collapsable: false,
+      removeClippedSubviews:
+      // On iOS, set removeClippedSubviews to true only when not focused
+      // This is an workaround for a bug where the clipped view never re-appears.
+      isIOS ? selectedTabKey !== key : true,
+      themeVisibility: active
+    }, component);
+  })), /*#__PURE__*/React.createElement(BottomBarWrapper, {
+    themeInsets: insets
+  }, /*#__PURE__*/React.createElement(BottomBar, null, tabs.map(function (tab) {
+    var key = tab.key,
+      icon = tab.icon,
+      title = tab.title,
+      testID = tab.testID;
+    var active = selectedTabKey === key;
+    var inactiveIcon = getInactiveIcon(icon);
+    return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+      key: key,
+      onPress: function onPress() {
+        return onTabPress(key);
+      },
+      testID: testID
+    }, /*#__PURE__*/React.createElement(BottomBarItem, null, /*#__PURE__*/React.createElement(Icon, {
+      icon: active ? icon : inactiveIcon,
+      intent: active ? 'primary' : 'text',
+      testID: "hero-icon-".concat(icon)
+    }), !!title && /*#__PURE__*/React.createElement(StyledBottomBarText, {
+      fontWeight: "semi-bold",
+      intent: active ? 'primary' : 'body',
+      numberOfLines: 1
+    }, title)));
+  }))));
+};
+
 var BottomSheetContext = /*#__PURE__*/createContext({});
 
 var StyledDivider = index$a(View)(function (_ref) {
@@ -8864,332 +9134,6 @@ var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
   }));
 };
 
-var customAlphabet = function customAlphabet(alphabet) {
-  var defaultSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 21;
-  return function () {
-    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSize;
-    var id = '';
-    var i = size;
-    while (i--) {
-      id += alphabet[Math.random() * alphabet.length | 0];
-    }
-    return id;
-  };
-};
-
-var ACTIONS;
-(function (ACTIONS) {
-  ACTIONS[ACTIONS["REGISTER_HOST"] = 0] = "REGISTER_HOST";
-  ACTIONS[ACTIONS["DEREGISTER_HOST"] = 1] = "DEREGISTER_HOST";
-  ACTIONS[ACTIONS["ADD_UPDATE_PORTAL"] = 2] = "ADD_UPDATE_PORTAL";
-  ACTIONS[ACTIONS["REMOVE_PORTAL"] = 3] = "REMOVE_PORTAL";
-})(ACTIONS || (ACTIONS = {}));
-var INITIAL_STATE = {};
-
-var PortalStateContext = /*#__PURE__*/createContext(null);
-var PortalDispatchContext = /*#__PURE__*/createContext(null);
-
-var usePortal = function usePortal() {
-  var hostName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'root';
-  var dispatch = useContext(PortalDispatchContext);
-  if (dispatch === null) {
-    throw new Error("You must add 'PortalProvider' to the root component.");
-  }
-  var registerHost = useCallback(function () {
-    dispatch({
-      type: ACTIONS.REGISTER_HOST,
-      hostName: hostName
-    });
-  }, []);
-  var deregisterHost = useCallback(function () {
-    dispatch({
-      type: ACTIONS.DEREGISTER_HOST,
-      hostName: hostName
-    });
-  }, []);
-  var addUpdatePortal = useCallback(function (name, node) {
-    dispatch({
-      type: ACTIONS.ADD_UPDATE_PORTAL,
-      hostName: hostName,
-      portalName: name,
-      node: node
-    });
-  }, []);
-  var removePortal = useCallback(function (name) {
-    dispatch({
-      type: ACTIONS.REMOVE_PORTAL,
-      hostName: hostName,
-      portalName: name
-    });
-  }, []);
-  return {
-    registerHost: registerHost,
-    deregisterHost: deregisterHost,
-    addPortal: addUpdatePortal,
-    updatePortal: addUpdatePortal,
-    removePortal: removePortal
-  };
-};
-
-var usePortalState = function usePortalState(hostName) {
-  var state = useContext(PortalStateContext);
-  if (state === null) {
-    throw new Error("You must add 'PortalProvider' to the root component.");
-  }
-  return state[hostName] || [];
-};
-
-var PortalHostComponent = function PortalHostComponent(_ref) {
-  var name = _ref.name;
-  var state = usePortalState(name);
-  var _usePortal = usePortal(name),
-    registerHost = _usePortal.registerHost,
-    deregisterHost = _usePortal.deregisterHost;
-  useEffect(function () {
-    registerHost();
-    return function () {
-      deregisterHost();
-    };
-  }, []);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, state.map(function (item) {
-    return item.node;
-  }));
-};
-var PortalHost = /*#__PURE__*/memo(PortalHostComponent);
-PortalHost.displayName = 'PortalHost';
-
-var registerHostIfNotExist = function registerHostIfNotExist(state, hostName) {
-  if (!(hostName in state)) {
-    return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, []));
-  }
-  return _objectSpread2({}, state);
-};
-var deregisterHost = function deregisterHost(state, hostName) {
-  return _objectSpread2({}, omit([hostName], state));
-};
-var addUpdatePortal = function addUpdatePortal(state, hostName, portalName, node) {
-  var newState = registerHostIfNotExist(state, hostName);
-  var index = newState[hostName].findIndex(function (item) {
-    return item.name === portalName;
-  });
-  if (index !== -1) {
-    return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, newState[hostName].map(function (item, i) {
-      if (index === i) {
-        return _objectSpread2(_objectSpread2({}, item), {}, {
-          node: node
-        });
-      }
-      return item;
-    })));
-  }
-  return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, [].concat(_toConsumableArray(newState[hostName]), [{
-    name: portalName,
-    node: node
-  }])));
-};
-var removePortal = function removePortal(state, hostName, portalName) {
-  if (!(hostName in state)) {
-    return _objectSpread2({}, state);
-  }
-  return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, state[hostName].filter(function (item) {
-    return item.name !== portalName;
-  })));
-};
-var reducer = function reducer(state, action) {
-  var type = action.type;
-  switch (type) {
-    case ACTIONS.REGISTER_HOST:
-      return registerHostIfNotExist(state, action.hostName);
-    case ACTIONS.DEREGISTER_HOST:
-      return deregisterHost(state, action.hostName);
-    case ACTIONS.ADD_UPDATE_PORTAL:
-      return addUpdatePortal(state, action.hostName, action.portalName, action.node);
-    case ACTIONS.REMOVE_PORTAL:
-      return removePortal(state, action.hostName, action.portalName);
-    default:
-      return _objectSpread2({}, state);
-  }
-};
-
-var PortalProviderComponent = function PortalProviderComponent(_ref) {
-  var _ref$rootHostName = _ref.rootHostName,
-    rootHostName = _ref$rootHostName === void 0 ? 'root' : _ref$rootHostName,
-    children = _ref.children;
-  var _useReducer = useReducer(reducer, INITIAL_STATE),
-    _useReducer2 = _slicedToArray(_useReducer, 2),
-    state = _useReducer2[0],
-    dispatch = _useReducer2[1];
-  return /*#__PURE__*/React.createElement(PortalDispatchContext.Provider, {
-    value: dispatch
-  }, /*#__PURE__*/React.createElement(PortalStateContext.Provider, {
-    value: state
-  }, children, /*#__PURE__*/React.createElement(PortalHost, {
-    name: rootHostName
-  })));
-};
-var PortalProvider = /*#__PURE__*/memo(PortalProviderComponent);
-PortalProvider.displayName = 'PortalProvider';
-
-var nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
-var PortalComponent = function PortalComponent(_ref) {
-  var name = _ref.name,
-    hostName = _ref.hostName,
-    children = _ref.children,
-    theme = _ref.theme;
-  var defaultTheme = useTheme();
-  var _usePortal = usePortal(hostName),
-    addUpdatePortal = _usePortal.addPortal,
-    removePortal = _usePortal.removePortal;
-  var nameOrRandom = useMemo(function () {
-    return name || nanoid();
-  }, [name]);
-  var ChildrenComponent = useMemo(function () {
-    return /*#__PURE__*/React.createElement(ThemeProvider, {
-      theme: theme || defaultTheme
-    }, children);
-  }, [theme, children, defaultTheme]);
-  useLayoutEffect(function () {
-    addUpdatePortal(nameOrRandom, ChildrenComponent);
-    return function () {
-      removePortal(nameOrRandom);
-    };
-  }, [addUpdatePortal]);
-  useLayoutEffect(function () {
-    addUpdatePortal(nameOrRandom, ChildrenComponent);
-  }, [ChildrenComponent]);
-  return null;
-};
-var Portal = /*#__PURE__*/memo(PortalComponent);
-Portal.displayName = 'Portal';
-var Portal$1 = Object.assign(Portal, {
-  Provider: PortalProvider,
-  Host: PortalHost
-});
-
-var _excluded$l = ["visible"];
-var DEFAULT_BACKDROP_OPACITY = 0.4;
-var DEFAULT_ANIMATION_CONFIG = {
-  easing: Easing.inOut(Easing.cubic),
-  useNativeDriver: Platform.OS !== 'web',
-  duration: 400
-};
-var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    onShow = _ref.onShow,
-    onRequestClose = _ref.onRequestClose,
-    testID = _ref.testID,
-    _ref$animationType = _ref.animationType,
-    animationType = _ref$animationType === void 0 ? 'none' : _ref$animationType,
-    _ref$transparent = _ref.transparent,
-    transparent = _ref$transparent === void 0 ? false : _ref$transparent,
-    onDismiss = _ref.onDismiss;
-  var theme = useTheme();
-  var animatedBackdropValue = useRef(new Animated.Value(0)).current;
-  var animatedModalValue = useRef(new Animated.Value(0)).current;
-  // Show or hide the backdrop and modal content
-  var animateBackdropAndContent = useCallback(function (_ref2) {
-    var toValue = _ref2.toValue,
-      callback = _ref2.callback;
-    if (animationType !== 'none') {
-      // Backdrop animation
-      if (!transparent) {
-        Animated.timing(animatedBackdropValue, _objectSpread2({
-          toValue: toValue
-        }, DEFAULT_ANIMATION_CONFIG)).start();
-      }
-      // Modal content animation
-      Animated.timing(animatedModalValue, _objectSpread2({
-        toValue: toValue
-      }, DEFAULT_ANIMATION_CONFIG)).start(callback);
-    } else {
-      callback === null || callback === void 0 || callback();
-    }
-  }, [animationType, onShow, transparent]);
-  var backdropOpacityAnimation = animatedBackdropValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, DEFAULT_BACKDROP_OPACITY]
-  });
-  var modalAnimation = animatedModalValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: animationType === 'slide' ? [Dimensions.get('window').height, 0] : [0, 1]
-  });
-  useImperativeHandle(ref, function () {
-    return {
-      show: function show() {
-        animateBackdropAndContent({
-          toValue: 1,
-          callback: onShow
-        });
-      },
-      hide: function hide(wrapperCallback) {
-        animateBackdropAndContent({
-          toValue: 0,
-          callback: function callback() {
-            if (Platform.OS === 'ios') {
-              onDismiss === null || onDismiss === void 0 || onDismiss();
-            }
-            wrapperCallback();
-          }
-        });
-      }
-    };
-  }, [onDismiss, onShow, animateBackdropAndContent]);
-  // Back button handler
-  useEffect(function () {
-    var backHandler = BackHandler.addEventListener('hardwareBackPress', function () {
-      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
-      return true;
-    });
-    return function () {
-      return backHandler.remove();
-    };
-  }, [onRequestClose]);
-  return /*#__PURE__*/React.createElement(Portal$1, null, /*#__PURE__*/React.createElement(Animated.View, {
-    style: _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
-      backgroundColor: transparent ? 'transparent' : theme.colors.overlayGlobalSurface,
-      opacity: animationType !== 'none' ? backdropOpacityAnimation : DEFAULT_BACKDROP_OPACITY
-    })
-  }), /*#__PURE__*/React.createElement(Animated.View, {
-    testID: testID,
-    style: _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
-      opacity: animationType === 'fade' ? modalAnimation : 1,
-      transform: [{
-        translateY: animationType === 'slide' ? modalAnimation : 0
-      }]
-    })
-  }, children));
-});
-var ModalWrapper = function ModalWrapper(_ref3) {
-  var _ref3$visible = _ref3.visible,
-    visible = _ref3$visible === void 0 ? true : _ref3$visible,
-    props = _objectWithoutProperties(_ref3, _excluded$l);
-  var modalRef = useRef(null);
-  var _useState = useState(visible),
-    _useState2 = _slicedToArray(_useState, 2),
-    internalVisible = _useState2[0],
-    setInternalVisible = _useState2[1];
-  useEffect(function () {
-    if (visible) {
-      setInternalVisible(true);
-    } else {
-      var _modalRef$current;
-      // Wait for animation to finish before hiding the modal
-      (_modalRef$current = modalRef.current) === null || _modalRef$current === void 0 || _modalRef$current.hide(function () {
-        return setInternalVisible(false);
-      });
-    }
-  }, [visible]);
-  useEffect(function () {
-    if (internalVisible) {
-      var _modalRef$current2;
-      (_modalRef$current2 = modalRef.current) === null || _modalRef$current2 === void 0 || _modalRef$current2.show();
-    }
-  }, [internalVisible]);
-  return internalVisible ? /*#__PURE__*/React.createElement(Modal, _extends$1({
-    ref: modalRef
-  }, props)) : null;
-};
-
 var BottomSheet = function BottomSheet(_ref) {
   var open = _ref.open,
     header = _ref.header,
@@ -9266,7 +9210,7 @@ var BottomSheet = function BottomSheet(_ref) {
       setInternalShowDivider: setInternalShowDivider
     };
   }, [setInternalShowDivider]);
-  return /*#__PURE__*/React.createElement(ModalWrapper, {
+  return /*#__PURE__*/React.createElement(Modal$1, {
     visible: visible,
     onRequestClose: onRequestClose,
     transparent: true,
@@ -11955,12 +11899,12 @@ var Indicator = index$a(View)(function (_ref2) {
   };
 });
 
-var _excluded$k = ["intent", "children"];
+var _excluded$l = ["intent", "children"];
 var DataCard = function DataCard(_ref) {
   var _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'info' : _ref$intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$l);
   return /*#__PURE__*/React.createElement(StyledDataCard, nativeProps, /*#__PURE__*/React.createElement(Indicator, {
     themeIntent: intent,
     testID: "data-card-indicator"
@@ -11978,11 +11922,11 @@ var StyledCard$1 = index$a(View)(function (_ref) {
   });
 });
 
-var _excluded$j = ["intent", "children"];
+var _excluded$k = ["intent", "children"];
 var Card = function Card(_ref) {
   var intent = _ref.intent,
     children = _ref.children,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React.createElement(StyledCard$1, _extends$1({}, nativeProps, {
     themeIntent: intent
   }), children);
@@ -12247,7 +12191,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 CardCarousel.displayName = 'CardCarousel';
 
-var _excluded$i = ["rounded", "size", "testID", "style"];
+var _excluded$j = ["rounded", "size", "testID", "style"];
 var Image = function Image(_ref) {
   var _ref$rounded = _ref.rounded,
     rounded = _ref$rounded === void 0 ? false : _ref$rounded,
@@ -12255,7 +12199,7 @@ var Image = function Image(_ref) {
     size = _ref$size === void 0 ? '6xlarge' : _ref$size,
     testID = _ref.testID,
     style = _ref.style,
-    imageNativeProps = _objectWithoutProperties(_ref, _excluded$i);
+    imageNativeProps = _objectWithoutProperties(_ref, _excluded$j);
   var theme = useTheme();
   var imageSize = theme.__hd__.image.sizes[size];
   return /*#__PURE__*/React.createElement(Image$1, _extends$1({
@@ -12375,7 +12319,7 @@ var CarouselItem = function CarouselItem(_ref) {
   }, heading), body ? /*#__PURE__*/React.createElement(Typography.Body, null, body) : null));
 };
 
-var _excluded$h = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
+var _excluded$i = ["items", "onItemIndexChange", "renderActions", "selectedItemIndex", "style", "shouldShowPagination", "testID", "pageControlPosition"];
 function useStateFromProp(initialValue) {
   var _useState = useState(initialValue),
     _useState2 = _slicedToArray(_useState, 2),
@@ -12402,7 +12346,7 @@ var Carousel = function Carousel(_ref) {
     testID = _ref.testID,
     _ref$pageControlPosit = _ref.pageControlPosition,
     pageControlPosition = _ref$pageControlPosit === void 0 ? 'top' : _ref$pageControlPosit,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$i);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
   var theme = useTheme();
@@ -12597,7 +12541,7 @@ var StyledIcon$1 = index$a(Icon)(function (_ref4) {
   };
 });
 
-var _excluded$g = ["label", "variant", "selected", "icon", "onPress"];
+var _excluded$h = ["label", "variant", "selected", "icon", "onPress"];
 var Chip = function Chip(_ref) {
   var label = _ref.label,
     _ref$variant = _ref.variant,
@@ -12606,7 +12550,7 @@ var Chip = function Chip(_ref) {
     selected = _ref$selected === void 0 ? false : _ref$selected,
     icon = _ref.icon,
     onPress = _ref.onPress,
-    otherProps = _objectWithoutProperties(_ref, _excluded$g);
+    otherProps = _objectWithoutProperties(_ref, _excluded$h);
   var internalIcon = React.useMemo(function () {
     if (icon && variant === 'filled') {
       return icon;
@@ -12693,6 +12637,8 @@ var getThemeState = function getThemeState(_ref) {
 var Checkbox = function Checkbox(_ref2) {
   var checked = _ref2.checked,
     description = _ref2.description,
+    _ref2$withBorder = _ref2.withBorder,
+    withBorder = _ref2$withBorder === void 0 ? false : _ref2$withBorder,
     _ref2$disabled = _ref2.disabled,
     disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
     onPress = _ref2.onPress,
@@ -12700,6 +12646,7 @@ var Checkbox = function Checkbox(_ref2) {
     testID = _ref2.testID,
     _ref2$readonly = _ref2.readonly,
     readonly = _ref2$readonly === void 0 ? false : _ref2$readonly;
+  useDeprecation("Checkbox's withBorder prop will be removed in the next major release, all checkboxes will have border by default. Please remove it.", withBorder === true);
   var themeState = getThemeState({
     disabled: disabled,
     readonly: readonly
@@ -12850,7 +12797,7 @@ var StyledErrorAndMaxLengthContainer = index$a(View)(function () {
   };
 });
 
-var _excluded$f = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var _excluded$g = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
 var getState$1 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
@@ -12903,7 +12850,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$f);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$g);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
   var actualSuffix = loading ? 'loading' : suffix;
@@ -13448,11 +13395,11 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }))));
 };
 
-var _excluded$e = ["variant"];
+var _excluded$f = ["variant"];
 var DatePicker = function DatePicker(_ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
-    props = _objectWithoutProperties(_ref, _excluded$e);
+    props = _objectWithoutProperties(_ref, _excluded$f);
   if (variant === 'calendar') {
     return /*#__PURE__*/React.createElement(DatePickerCalendar, props);
   }
@@ -13621,7 +13568,7 @@ var DragableDrawer = function DragableDrawer(_ref) {
     if (animatedToValue >= 0) {
       var animation = Animated.timing(pan, {
         toValue: animatedToValue,
-        useNativeDriver: true,
+        useNativeDriver: Platform.OS !== 'web',
         easing: Easing.inOut(Easing.cubic)
       });
       animation.start(function () {
@@ -13804,6 +13751,332 @@ var Empty = function Empty(_ref) {
   }, description));
 };
 
+var customAlphabet = function customAlphabet(alphabet) {
+  var defaultSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 21;
+  return function () {
+    var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultSize;
+    var id = '';
+    var i = size;
+    while (i--) {
+      id += alphabet[Math.random() * alphabet.length | 0];
+    }
+    return id;
+  };
+};
+
+var ACTIONS;
+(function (ACTIONS) {
+  ACTIONS[ACTIONS["REGISTER_HOST"] = 0] = "REGISTER_HOST";
+  ACTIONS[ACTIONS["DEREGISTER_HOST"] = 1] = "DEREGISTER_HOST";
+  ACTIONS[ACTIONS["ADD_UPDATE_PORTAL"] = 2] = "ADD_UPDATE_PORTAL";
+  ACTIONS[ACTIONS["REMOVE_PORTAL"] = 3] = "REMOVE_PORTAL";
+})(ACTIONS || (ACTIONS = {}));
+var INITIAL_STATE = {};
+
+var PortalStateContext = /*#__PURE__*/createContext(null);
+var PortalDispatchContext = /*#__PURE__*/createContext(null);
+
+var usePortal = function usePortal() {
+  var hostName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'root';
+  var dispatch = useContext(PortalDispatchContext);
+  if (dispatch === null) {
+    throw new Error("You must add 'PortalProvider' to the root component.");
+  }
+  var registerHost = useCallback(function () {
+    dispatch({
+      type: ACTIONS.REGISTER_HOST,
+      hostName: hostName
+    });
+  }, []);
+  var deregisterHost = useCallback(function () {
+    dispatch({
+      type: ACTIONS.DEREGISTER_HOST,
+      hostName: hostName
+    });
+  }, []);
+  var addUpdatePortal = useCallback(function (name, node) {
+    dispatch({
+      type: ACTIONS.ADD_UPDATE_PORTAL,
+      hostName: hostName,
+      portalName: name,
+      node: node
+    });
+  }, []);
+  var removePortal = useCallback(function (name) {
+    dispatch({
+      type: ACTIONS.REMOVE_PORTAL,
+      hostName: hostName,
+      portalName: name
+    });
+  }, []);
+  return {
+    registerHost: registerHost,
+    deregisterHost: deregisterHost,
+    addPortal: addUpdatePortal,
+    updatePortal: addUpdatePortal,
+    removePortal: removePortal
+  };
+};
+
+var usePortalState = function usePortalState(hostName) {
+  var state = useContext(PortalStateContext);
+  if (state === null) {
+    throw new Error("You must add 'PortalProvider' to the root component.");
+  }
+  return state[hostName] || [];
+};
+
+var PortalHostComponent = function PortalHostComponent(_ref) {
+  var name = _ref.name;
+  var state = usePortalState(name);
+  var _usePortal = usePortal(name),
+    registerHost = _usePortal.registerHost,
+    deregisterHost = _usePortal.deregisterHost;
+  useEffect(function () {
+    registerHost();
+    return function () {
+      deregisterHost();
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, state.map(function (item) {
+    return item.node;
+  }));
+};
+var PortalHost = /*#__PURE__*/memo(PortalHostComponent);
+PortalHost.displayName = 'PortalHost';
+
+var registerHostIfNotExist = function registerHostIfNotExist(state, hostName) {
+  if (!(hostName in state)) {
+    return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, []));
+  }
+  return _objectSpread2({}, state);
+};
+var deregisterHost = function deregisterHost(state, hostName) {
+  return _objectSpread2({}, omit([hostName], state));
+};
+var addUpdatePortal = function addUpdatePortal(state, hostName, portalName, node) {
+  var newState = registerHostIfNotExist(state, hostName);
+  var index = newState[hostName].findIndex(function (item) {
+    return item.name === portalName;
+  });
+  if (index !== -1) {
+    return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, newState[hostName].map(function (item, i) {
+      if (index === i) {
+        return _objectSpread2(_objectSpread2({}, item), {}, {
+          node: node
+        });
+      }
+      return item;
+    })));
+  }
+  return _objectSpread2(_objectSpread2({}, newState), {}, _defineProperty({}, hostName, [].concat(_toConsumableArray(newState[hostName]), [{
+    name: portalName,
+    node: node
+  }])));
+};
+var removePortal = function removePortal(state, hostName, portalName) {
+  if (!(hostName in state)) {
+    return _objectSpread2({}, state);
+  }
+  return _objectSpread2(_objectSpread2({}, state), {}, _defineProperty({}, hostName, state[hostName].filter(function (item) {
+    return item.name !== portalName;
+  })));
+};
+var reducer = function reducer(state, action) {
+  var type = action.type;
+  switch (type) {
+    case ACTIONS.REGISTER_HOST:
+      return registerHostIfNotExist(state, action.hostName);
+    case ACTIONS.DEREGISTER_HOST:
+      return deregisterHost(state, action.hostName);
+    case ACTIONS.ADD_UPDATE_PORTAL:
+      return addUpdatePortal(state, action.hostName, action.portalName, action.node);
+    case ACTIONS.REMOVE_PORTAL:
+      return removePortal(state, action.hostName, action.portalName);
+    default:
+      return _objectSpread2({}, state);
+  }
+};
+
+var PortalProviderComponent = function PortalProviderComponent(_ref) {
+  var _ref$rootHostName = _ref.rootHostName,
+    rootHostName = _ref$rootHostName === void 0 ? 'root' : _ref$rootHostName,
+    children = _ref.children;
+  var _useReducer = useReducer(reducer, INITIAL_STATE),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
+  return /*#__PURE__*/React.createElement(PortalDispatchContext.Provider, {
+    value: dispatch
+  }, /*#__PURE__*/React.createElement(PortalStateContext.Provider, {
+    value: state
+  }, children, /*#__PURE__*/React.createElement(PortalHost, {
+    name: rootHostName
+  })));
+};
+var PortalProvider = /*#__PURE__*/memo(PortalProviderComponent);
+PortalProvider.displayName = 'PortalProvider';
+
+var nanoid = customAlphabet('abcdefghijklmnopqrstuvwxyz0123456789', 10);
+var PortalComponent = function PortalComponent(_ref) {
+  var name = _ref.name,
+    hostName = _ref.hostName,
+    children = _ref.children,
+    theme = _ref.theme;
+  var defaultTheme = useTheme();
+  var _usePortal = usePortal(hostName),
+    addUpdatePortal = _usePortal.addPortal,
+    removePortal = _usePortal.removePortal;
+  var nameOrRandom = useMemo(function () {
+    return name || nanoid();
+  }, [name]);
+  var ChildrenComponent = useMemo(function () {
+    return /*#__PURE__*/React.createElement(ThemeProvider, {
+      theme: theme || defaultTheme
+    }, children);
+  }, [theme, children, defaultTheme]);
+  useLayoutEffect(function () {
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+    return function () {
+      removePortal(nameOrRandom);
+    };
+  }, [addUpdatePortal]);
+  useLayoutEffect(function () {
+    addUpdatePortal(nameOrRandom, ChildrenComponent);
+  }, [ChildrenComponent]);
+  return null;
+};
+var Portal = /*#__PURE__*/memo(PortalComponent);
+Portal.displayName = 'Portal';
+var Portal$1 = Object.assign(Portal, {
+  Provider: PortalProvider,
+  Host: PortalHost
+});
+
+var _excluded$e = ["visible"];
+var DEFAULT_BACKDROP_OPACITY = 0.4;
+var DEFAULT_ANIMATION_CONFIG = {
+  easing: Easing.inOut(Easing.cubic),
+  useNativeDriver: Platform.OS !== 'web',
+  duration: 400
+};
+var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    onShow = _ref.onShow,
+    onRequestClose = _ref.onRequestClose,
+    testID = _ref.testID,
+    _ref$animationType = _ref.animationType,
+    animationType = _ref$animationType === void 0 ? 'none' : _ref$animationType,
+    _ref$transparent = _ref.transparent,
+    transparent = _ref$transparent === void 0 ? false : _ref$transparent,
+    onDismiss = _ref.onDismiss;
+  var theme = useTheme();
+  var animatedBackdropValue = useRef(new Animated.Value(0)).current;
+  var animatedModalValue = useRef(new Animated.Value(0)).current;
+  // Show or hide the backdrop and modal content
+  var animateBackdropAndContent = useCallback(function (_ref2) {
+    var toValue = _ref2.toValue,
+      callback = _ref2.callback;
+    if (animationType !== 'none') {
+      // Backdrop animation
+      if (!transparent) {
+        Animated.timing(animatedBackdropValue, _objectSpread2({
+          toValue: toValue
+        }, DEFAULT_ANIMATION_CONFIG)).start();
+      }
+      // Modal content animation
+      Animated.timing(animatedModalValue, _objectSpread2({
+        toValue: toValue
+      }, DEFAULT_ANIMATION_CONFIG)).start(callback);
+    } else {
+      callback === null || callback === void 0 || callback();
+    }
+  }, [animationType, onShow, transparent]);
+  var backdropOpacityAnimation = animatedBackdropValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, DEFAULT_BACKDROP_OPACITY]
+  });
+  var modalAnimation = animatedModalValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: animationType === 'slide' ? [Dimensions.get('window').height, 0] : [0, 1]
+  });
+  useImperativeHandle(ref, function () {
+    return {
+      show: function show() {
+        animateBackdropAndContent({
+          toValue: 1,
+          callback: onShow
+        });
+      },
+      hide: function hide(wrapperCallback) {
+        animateBackdropAndContent({
+          toValue: 0,
+          callback: function callback() {
+            if (Platform.OS === 'ios') {
+              onDismiss === null || onDismiss === void 0 || onDismiss();
+            }
+            wrapperCallback();
+          }
+        });
+      }
+    };
+  }, [onDismiss, onShow, animateBackdropAndContent]);
+  // Back button handler
+  useEffect(function () {
+    var backHandler = BackHandler.addEventListener('hardwareBackPress', function () {
+      onRequestClose === null || onRequestClose === void 0 || onRequestClose();
+      return true;
+    });
+    return function () {
+      return backHandler.remove();
+    };
+  }, [onRequestClose]);
+  return /*#__PURE__*/React.createElement(Portal$1, null, /*#__PURE__*/React.createElement(Animated.View, {
+    style: _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
+      backgroundColor: transparent ? 'transparent' : theme.colors.overlayGlobalSurface,
+      opacity: animationType !== 'none' ? backdropOpacityAnimation : DEFAULT_BACKDROP_OPACITY
+    })
+  }), /*#__PURE__*/React.createElement(Animated.View, {
+    testID: testID,
+    style: _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
+      opacity: animationType === 'fade' ? modalAnimation : 1,
+      transform: [{
+        translateY: animationType === 'slide' ? modalAnimation : 0
+      }]
+    })
+  }, children));
+});
+var ModalWrapper = function ModalWrapper(_ref3) {
+  var _ref3$visible = _ref3.visible,
+    visible = _ref3$visible === void 0 ? true : _ref3$visible,
+    props = _objectWithoutProperties(_ref3, _excluded$e);
+  var modalRef = useRef(null);
+  var _useState = useState(visible),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalVisible = _useState2[0],
+    setInternalVisible = _useState2[1];
+  useEffect(function () {
+    if (visible) {
+      setInternalVisible(true);
+    } else {
+      var _modalRef$current;
+      // Wait for animation to finish before hiding the modal
+      (_modalRef$current = modalRef.current) === null || _modalRef$current === void 0 || _modalRef$current.hide(function () {
+        return setInternalVisible(false);
+      });
+    }
+  }, [visible]);
+  useEffect(function () {
+    if (internalVisible) {
+      var _modalRef$current2;
+      (_modalRef$current2 = modalRef.current) === null || _modalRef$current2 === void 0 || _modalRef$current2.show();
+    }
+  }, [internalVisible]);
+  return internalVisible ? /*#__PURE__*/React.createElement(Modal, _extends$1({
+    ref: modalRef
+  }, props)) : null;
+};
+
 var StyledErrorModal = index$a(ModalWrapper)({
   height: '100%',
   width: '100%'
@@ -13887,7 +14160,7 @@ var StyledErrorDescription = index$a(Typography.Body)(function (_ref9) {
 });
 
 var _excluded$d = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"],
-  _excluded2 = ["variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
+  _excluded2 = ["visible", "variant", "title", "description", "image", "testID", "ctaText", "onCtaPress", "secondaryCtaText", "onSecondaryCtaPress"];
 var renderImage$1 = function renderImage(image) {
   if ( /*#__PURE__*/isValidElement(image)) {
     return /*#__PURE__*/React.cloneElement(image, {
@@ -13941,7 +14214,9 @@ var ErrorPage = function ErrorPage(_ref) {
  * @return {*}  {ReactElement}
  */
 var Error$1 = function Error(_ref2) {
-  var _ref2$variant = _ref2.variant,
+  var _ref2$visible = _ref2.visible,
+    visible = _ref2$visible === void 0 ? true : _ref2$visible,
+    _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'in-page' : _ref2$variant,
     title = _ref2.title,
     description = _ref2.description,
@@ -13952,7 +14227,8 @@ var Error$1 = function Error(_ref2) {
     secondaryCtaText = _ref2.secondaryCtaText,
     onSecondaryCtaPress = _ref2.onSecondaryCtaPress,
     nativeProps = _objectWithoutProperties(_ref2, _excluded2);
-  var _useState = useState(true),
+  useDeprecation("Visible prop is deprecated. Use conditional rendering instead", visible);
+  var _useState = useState(visible),
     _useState2 = _slicedToArray(_useState, 2),
     isVisible = _useState2[0],
     setIsVisible = _useState2[1];
@@ -13969,6 +14245,9 @@ var Error$1 = function Error(_ref2) {
     }
     setCtaPressed(null);
   }, [ctaPressed, onCtaPress, onSecondaryCtaPress]);
+  useEffect(function () {
+    setIsVisible(visible);
+  }, [visible]);
   // These useEffect lines prevents race condition error when callback contains navigation logic
   useEffect(function () {
     if (ctaPressed) {
@@ -14325,7 +14604,8 @@ var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
 });
 
 var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var onPress = _ref.onPress,
+  var headerTitle = _ref.headerTitle,
+    onPress = _ref.onPress,
     active = _ref.active,
     style = _ref.style,
     items = _ref.items,
@@ -14334,6 +14614,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onBackdropPress = _ref.onBackdropPress,
     _ref$fabIcon = _ref.fabIcon,
     fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
+  useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
   var fabRef = useRef(null);
   var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
   React.useImperativeHandle(ref, function () {
@@ -14428,11 +14709,12 @@ var index$6 = Object.assign(FAB, {
 });
 
 var ToastContainerWrapper = index$a(View)(function (_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+    position = _ref.position;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     paddingHorizontal: theme.__hd__.toast.space.wrapperVerticalPadding,
     paddingVertical: theme.__hd__.toast.space.wrapperHorizontalPadding,
-    flexDirection: 'column-reverse',
+    flexDirection: position === 'bottom' ? 'column-reverse' : 'column',
     elevation: 9999
   });
 });
@@ -14485,6 +14767,15 @@ var CTAWrapper = index$a(TouchableOpacity)(function (_ref6) {
   };
 });
 
+var ToastContext = /*#__PURE__*/createContext({});
+var ToastConfigContext = /*#__PURE__*/createContext({});
+var useToastConfig = function useToastConfig() {
+  return useContext(ToastConfigContext);
+};
+var useToast = function useToast() {
+  return useContext(ToastContext);
+};
+
 var getIntentIcon = function getIntentIcon(intent) {
   switch (intent) {
     case 'success':
@@ -14528,6 +14819,7 @@ var Toast$1 = function Toast(_ref2) {
     _ref2$distance = _ref2.distance,
     distance = _ref2$distance === void 0 ? 0 : _ref2$distance;
   var animatedValue = useRef(new Animated.Value(0)).current;
+  var toastConfig = useToastConfig();
   useEffect(function () {
     if (autoDismiss && duration >= 0) {
       var id = setTimeout(function () {
@@ -14553,7 +14845,7 @@ var Toast$1 = function Toast(_ref2) {
   });
   var interpolateY = animatedValue.interpolate({
     inputRange: [0, 1],
-    outputRange: [20, -distance]
+    outputRange: toastConfig.position === 'top' ? [-20, distance] : [20, -distance]
   });
   return /*#__PURE__*/React.createElement(Container, {
     themeVariant: variant,
@@ -14611,6 +14903,8 @@ var SingleToastDisplay = function SingleToastDisplay(_ref) {
 var ToastContainer = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$displayType = _ref2.displayType,
     displayType = _ref2$displayType === void 0 ? 'single' : _ref2$displayType,
+    _ref2$position = _ref2.position,
+    position = _ref2$position === void 0 ? 'bottom' : _ref2$position,
     style = _ref2.style;
   var theme = useTheme$1();
   var _useState = useState([]),
@@ -14643,6 +14937,7 @@ var ToastContainer = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   });
   return /*#__PURE__*/React.createElement(ToastContainerWrapper, {
     pointerEvents: "box-none",
+    position: position,
     style: style
   }, displayType === 'single' ? /*#__PURE__*/React.createElement(SingleToastDisplay, {
     toastList: toastList,
@@ -14669,16 +14964,13 @@ var ToastContainer = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
 });
 ToastContainer.displayName = 'ToastContainer';
 
-var ToastContext = /*#__PURE__*/createContext({});
-var ToastConfigContext = /*#__PURE__*/createContext({});
-var useToast = function useToast() {
-  return useContext(ToastContext);
-};
-
 var ToastProvider = function ToastProvider(_ref) {
   var children = _ref.children,
     _ref$displayType = _ref.displayType,
-    displayType = _ref$displayType === void 0 ? 'single' : _ref$displayType;
+    displayType = _ref$displayType === void 0 ? 'single' : _ref$displayType,
+    _position = _ref.position;
+  var position = _position === undefined ? 'bottom' : _position;
+  useDeprecation("Toast's position prop is deprecated and will be removed in the next major release.\nPlease remove it.", _position !== undefined);
   var toastRef = useRef(null);
   // @ts-expect-error: TODO: @tungv Fix this type error
   var _useState = useState(null),
@@ -14692,9 +14984,10 @@ var ToastProvider = function ToastProvider(_ref) {
   }, []);
   var config = useMemo(function () {
     return {
-      displayType: displayType
+      displayType: displayType,
+      position: position
     };
-  }, [displayType]);
+  }, [displayType, position]);
   return /*#__PURE__*/React.createElement(ToastContext.Provider, {
     value: refState
   }, /*#__PURE__*/React.createElement(View, {
@@ -14705,7 +14998,8 @@ var ToastProvider = function ToastProvider(_ref) {
     value: config
   }, /*#__PURE__*/React.createElement(ToastContainer, {
     ref: toastRef,
-    displayType: displayType
+    displayType: displayType,
+    position: position
   }))));
 };
 
@@ -15812,12 +16106,18 @@ var SectionHeading = function SectionHeading(_ref) {
   var icon = _ref.icon,
     text = _ref.text,
     rightChildren = _ref.rightChildren,
+    _ref$fontSize = _ref.fontSize,
+    fontSize = _ref$fontSize === void 0 ? 'large' : _ref$fontSize,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
+    _ref$fontWeight = _ref.fontWeight,
+    fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     style = _ref.style,
     testID = _ref.testID;
+  useDeprecation("SectionHeading's fontSize prop is deprecated and will be removed in the next major release, please remove it.", fontSize !== undefined);
+  useDeprecation("SectionHeading's fontWeight prop is deprecated and will be removed in the next major release, please remove it.", fontWeight !== undefined);
   return /*#__PURE__*/React.createElement(StyledHeading, {
     themeSize: size,
     style: style,
@@ -17030,10 +17330,6 @@ var useAnimatedValueArray = function useAnimatedValueArray(initialValues) {
   return refs.current;
 };
 
-var isHeroIcon = function isHeroIcon(x) {
-  return IconList.includes(x);
-};
-
 var TabWithBadge = function TabWithBadge(_ref) {
   var config = _ref.config,
     tabItem = _ref.tabItem;
@@ -17454,14 +17750,17 @@ var StyledText = index$a(Typography.Caption)(function (_ref2) {
   };
 });
 
-var _excluded$2 = ["content", "intent", "style", "testID"];
+var _excluded$2 = ["content", "variant", "intent", "style", "testID"];
 var Tag = function Tag(_ref) {
   var content = _ref.content,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$2);
+  useDeprecation("Tag's variant prop is deprecated and will be removed in the next major release. Please remove it.", variant !== undefined);
   return /*#__PURE__*/React.createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     style: style,
@@ -34016,4 +34315,4 @@ var index = Object.assign(RichTextEditorWithRef, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, 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, Error$1 as Error, index$6 as FAB, HeroDesignProvider, Icon, Image, List, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, SectionHeading, 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, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };
+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, Error$1 as Error, index$6 as FAB, HeroDesignProvider, Icon, Image, List, PageControl, PinInput, Portal$1 as Portal, Progress, CompoundRadio as Radio, Rate, RefreshControl, index as RichTextEditor, SectionHeading, 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, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, withTheme, workSystemPalette };