@hero-design/rn 8.25.3 → 8.26.1

package/es/index.js

@@ -2279,7 +2279,7 @@ var getFABTheme = function getFABTheme(theme) {
     buttonPressedBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDefaultGlobalSurface,
-    actionItemBackground: theme.colors.primary,
+    actionItemBackground: theme.colors.secondary,
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onPrimary,
@@ -2288,7 +2288,9 @@ var getFABTheme = function getFABTheme(theme) {
   };
   var sizes = {
     width: theme.sizes.xxxxxlarge,
-    height: theme.sizes.xxxxxlarge
+    height: theme.sizes.xxxxxlarge,
+    iconContainerWidth: theme.sizes.large,
+    iconContainerHeight: theme.sizes.large
   };
   var fonts = {
     header: theme.fonts.neutral.semiBold,
@@ -2297,7 +2299,7 @@ var getFABTheme = function getFABTheme(theme) {
   };
   var fontSizes = {
     header: theme.fontSizes.xxxlarge,
-    actionItemText: theme.fontSizes.medium,
+    actionItemText: theme.fontSizes.large,
     title: theme.fontSizes.large
   };
   var lineHeights = {
@@ -2316,20 +2318,17 @@ var getFABTheme = function getFABTheme(theme) {
     elevation: 2
   };
   var space = {
-    actionItemPaddingLeft: theme.space.medium,
-    actionItemPaddingRight: theme.space.medium,
-    actionItemPaddingTop: theme.space.small,
-    actionItemPaddingBottom: theme.space.small,
+    actionItemPadding: theme.space.smallMedium,
     actionItemMargin: theme.space.small,
     actionItemMarginRight: theme.space.large,
-    actionItemTextPaddingLeft: theme.space.small,
+    actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
     headerTextMarginRight: theme.space.large,
     headerTextMarginBottom: theme.space.large,
-    containerPaddingHorizontal: theme.space.medium,
-    containerPaddingVertical: theme.space.medium,
-    titleMarginHorizontal: theme.space.small
+    containerPadding: theme.space.large - theme.space.xsmall,
+    titleMarginHorizontal: theme.space.small,
+    internalFABMarginBottom: theme.space.large
   };
   var radii = {
     actionItem: theme.radii.rounded
@@ -6198,7 +6197,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', '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', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'money-notes', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', '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', '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', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', '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', 'book-outlined', 'bookmark-added-outlined', 'bookmark-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calendar-dates-outlined', 'calendar-star-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-outlined', 'edit-template-outlined', 'email-outlined', 'enter-arrow', 'envelope-outlined', 'expense-outlined', 'explore-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', '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', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'location-on-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', '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', 'qr-code-outlined', 'qualification-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', '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', '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', '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', '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', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'money-notes', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', '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', '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', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', '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', 'book-outlined', 'bookmark-added-outlined', 'bookmark-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calendar-dates-outlined', 'calendar-star-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-outlined', 'explore-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', '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', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'location-on-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', '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', 'qr-code-outlined', 'qualification-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', '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', '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', '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 activate = 59000;
 var adjustment = 59003;
@@ -6275,18 +6274,18 @@ var add = 59181;
 var bold = 59203;
 var cancel = 59215;
 var checkmark = 59220;
-var italic = 59301;
-var number = 59325;
-var percentage = 59330;
-var redeem = 59339;
-var refresh = 59340;
-var remove = 59341;
-var restart = 59343;
-var strikethrough = 59364;
-var sync = 59370;
-var transfer = 59377;
-var unavailable = 59380;
-var underline = 59381;
+var italic = 59302;
+var number = 59326;
+var percentage = 59331;
+var redeem = 59340;
+var refresh = 59341;
+var remove = 59342;
+var restart = 59344;
+var strikethrough = 59365;
+var sync = 59371;
+var transfer = 59378;
+var unavailable = 59381;
+var underline = 59382;
 var glyphMap = {
 	activate: activate,
 	"add-emoji": 59001,
@@ -6542,145 +6541,146 @@ var glyphMap = {
 	"double-buildings-outlined": 59251,
 	"double-left-arrows": 59252,
 	"double-right-arrows": 59253,
-	"download-outlined": 59254,
-	"edit-template-outlined": 59255,
-	"email-outlined": 59256,
-	"enter-arrow": 59257,
-	"envelope-outlined": 59258,
-	"expense-outlined": 59259,
-	"explore-outlined": 59260,
-	"external-link": 59261,
-	"eye-invisible-outlined": 59262,
-	"eye-outlined": 59263,
-	"face-id": 59264,
-	"face-meh-outlined": 59265,
-	"face-open-smiley-outlined": 59266,
-	"face-sad-outlined": 59267,
-	"face-smiley-outlined": 59268,
-	"fastfood-outlined": 59269,
-	"feed-outlined": 59270,
-	"file-certified-outlined": 59271,
-	"file-clone-outlined": 59272,
-	"file-copy-outlined": 59273,
-	"file-dispose-outlined": 59274,
-	"file-dollar-certified-outlined": 59275,
-	"file-dollar-outlined": 59276,
-	"file-download-outlined": 59277,
-	"file-export-outlined": 59278,
-	"file-lock-outlined": 59279,
-	"file-outlined": 59280,
-	"file-search-outlined": 59281,
-	"file-secured-outlined": 59282,
-	"file-statutory-outlined": 59283,
-	"file-verified-outlined": 59284,
-	"filter-outlined": 59285,
-	"folder-outlined": 59286,
-	"folder-user-outlined": 59287,
-	"form-outlined": 59288,
-	"funnel-filter-outline": 59289,
-	"graph-outlined": 59290,
-	"hand-holding-user-outlined": 59291,
-	"happy-sun-outlined": 59292,
-	"health-bag-outlined": 59293,
-	"heart-outlined": 59294,
-	"home-active-outlined": 59295,
-	"home-outlined": 59296,
-	"id-card-outlined": 59297,
-	"image-outlined": 59298,
-	"import-outlined": 59299,
-	"instapay-outlined": 59300,
+	"download-box-outlined": 59254,
+	"download-outlined": 59255,
+	"edit-template-outlined": 59256,
+	"email-outlined": 59257,
+	"enter-arrow": 59258,
+	"envelope-outlined": 59259,
+	"expense-outlined": 59260,
+	"explore-outlined": 59261,
+	"external-link": 59262,
+	"eye-invisible-outlined": 59263,
+	"eye-outlined": 59264,
+	"face-id": 59265,
+	"face-meh-outlined": 59266,
+	"face-open-smiley-outlined": 59267,
+	"face-sad-outlined": 59268,
+	"face-smiley-outlined": 59269,
+	"fastfood-outlined": 59270,
+	"feed-outlined": 59271,
+	"file-certified-outlined": 59272,
+	"file-clone-outlined": 59273,
+	"file-copy-outlined": 59274,
+	"file-dispose-outlined": 59275,
+	"file-dollar-certified-outlined": 59276,
+	"file-dollar-outlined": 59277,
+	"file-download-outlined": 59278,
+	"file-export-outlined": 59279,
+	"file-lock-outlined": 59280,
+	"file-outlined": 59281,
+	"file-search-outlined": 59282,
+	"file-secured-outlined": 59283,
+	"file-statutory-outlined": 59284,
+	"file-verified-outlined": 59285,
+	"filter-outlined": 59286,
+	"folder-outlined": 59287,
+	"folder-user-outlined": 59288,
+	"form-outlined": 59289,
+	"funnel-filter-outline": 59290,
+	"graph-outlined": 59291,
+	"hand-holding-user-outlined": 59292,
+	"happy-sun-outlined": 59293,
+	"health-bag-outlined": 59294,
+	"heart-outlined": 59295,
+	"home-active-outlined": 59296,
+	"home-outlined": 59297,
+	"id-card-outlined": 59298,
+	"image-outlined": 59299,
+	"import-outlined": 59300,
+	"instapay-outlined": 59301,
 	italic: italic,
-	"link-1": 59302,
-	"link-2": 59303,
-	"list-outlined": 59304,
-	"live-help-outlined": 59305,
-	"location-on-outlined": 59306,
-	"location-outlined": 59307,
-	"lock-outlined": 59308,
-	"locked-file-outlined": 59309,
-	"log-out": 59310,
-	"media-content-outlined": 59311,
-	"menu-close": 59312,
-	"menu-expand": 59313,
-	"menu-fold-outlined": 59314,
-	"menu-unfold-outlined": 59315,
-	"moneybag-outlined": 59316,
-	"moon-outlined": 59317,
-	"more-horizontal": 59318,
-	"more-vertical": 59319,
-	"multiple-folders-outlined": 59320,
-	"multiple-users-outlined": 59321,
-	"near-me-outlined": 59322,
-	"node-outlined": 59323,
-	"number-points": 59324,
+	"link-1": 59303,
+	"link-2": 59304,
+	"list-outlined": 59305,
+	"live-help-outlined": 59306,
+	"location-on-outlined": 59307,
+	"location-outlined": 59308,
+	"lock-outlined": 59309,
+	"locked-file-outlined": 59310,
+	"log-out": 59311,
+	"media-content-outlined": 59312,
+	"menu-close": 59313,
+	"menu-expand": 59314,
+	"menu-fold-outlined": 59315,
+	"menu-unfold-outlined": 59316,
+	"moneybag-outlined": 59317,
+	"moon-outlined": 59318,
+	"more-horizontal": 59319,
+	"more-vertical": 59320,
+	"multiple-folders-outlined": 59321,
+	"multiple-users-outlined": 59322,
+	"near-me-outlined": 59323,
+	"node-outlined": 59324,
+	"number-points": 59325,
 	number: number,
-	"overview-outlined": 59326,
-	"payment-summary-outlined": 59327,
-	"payslip-outlined": 59328,
-	"pencil-outlined": 59329,
+	"overview-outlined": 59327,
+	"payment-summary-outlined": 59328,
+	"payslip-outlined": 59329,
+	"pencil-outlined": 59330,
 	percentage: percentage,
-	"phone-outlined": 59331,
-	"piggy-bank-outlined": 59332,
-	"plane-outlined": 59333,
-	"play-circle-outlined": 59334,
-	"print-outlined": 59335,
-	"qr-code-outlined": 59336,
-	"qualification-outlined": 59337,
-	"re-assign": 59338,
+	"phone-outlined": 59332,
+	"piggy-bank-outlined": 59333,
+	"plane-outlined": 59334,
+	"play-circle-outlined": 59335,
+	"print-outlined": 59336,
+	"qr-code-outlined": 59337,
+	"qualification-outlined": 59338,
+	"re-assign": 59339,
 	redeem: redeem,
 	refresh: refresh,
 	remove: remove,
-	"reply-outlined": 59342,
+	"reply-outlined": 59343,
 	restart: restart,
-	"return-arrow": 59344,
-	"rostering-outlined": 59345,
-	"save-outlined": 59346,
-	"schedule-outlined": 59347,
-	"search-outlined": 59348,
-	"search-secured-outlined": 59349,
-	"send-outlined": 59350,
-	"share-1": 59351,
-	"share-2": 59352,
-	"share-outlined": 59353,
-	"show-chart-outlined": 59354,
-	"single-down-arrow": 59355,
-	"single-left-arrow": 59356,
-	"single-right-arrow": 59357,
-	"single-up-arrow": 59358,
-	"speaker-active-outlined": 59359,
-	"speaker-outlined": 59360,
-	"star-circle-outlined": 59361,
-	"star-outlined": 59362,
-	"stopwatch-outlined": 59363,
+	"return-arrow": 59345,
+	"rostering-outlined": 59346,
+	"save-outlined": 59347,
+	"schedule-outlined": 59348,
+	"search-outlined": 59349,
+	"search-secured-outlined": 59350,
+	"send-outlined": 59351,
+	"share-1": 59352,
+	"share-2": 59353,
+	"share-outlined": 59354,
+	"show-chart-outlined": 59355,
+	"single-down-arrow": 59356,
+	"single-left-arrow": 59357,
+	"single-right-arrow": 59358,
+	"single-up-arrow": 59359,
+	"speaker-active-outlined": 59360,
+	"speaker-outlined": 59361,
+	"star-circle-outlined": 59362,
+	"star-outlined": 59363,
+	"stopwatch-outlined": 59364,
 	strikethrough: strikethrough,
-	"styler-outlined": 59365,
-	"suitcase-clock-outlined": 59366,
-	"suitcase-outlined": 59367,
-	"survey-outlined": 59368,
-	"switch-outlined": 59369,
+	"styler-outlined": 59366,
+	"suitcase-clock-outlined": 59367,
+	"suitcase-outlined": 59368,
+	"survey-outlined": 59369,
+	"switch-outlined": 59370,
 	sync: sync,
-	"tag-outlined": 59371,
-	"target-outlined": 59372,
-	"tennis-outlined": 59373,
-	"ticket-outlined": 59374,
-	"timesheet-outlined": 59375,
-	"today-outlined": 59376,
+	"tag-outlined": 59372,
+	"target-outlined": 59373,
+	"tennis-outlined": 59374,
+	"ticket-outlined": 59375,
+	"timesheet-outlined": 59376,
+	"today-outlined": 59377,
 	transfer: transfer,
-	"trash-bin-outlined": 59378,
-	"umbrela-outlined": 59379,
+	"trash-bin-outlined": 59379,
+	"umbrela-outlined": 59380,
 	unavailable: unavailable,
 	underline: underline,
-	"union-outlined": 59382,
-	"unlock-outlined": 59383,
-	"upload-outlined": 59384,
-	"user-circle-outlined": 59385,
-	"user-gear-outlined": 59386,
-	"user-outlined": 59387,
-	"user-rectangle-outlined": 59388,
-	"video-1-outlined": 59389,
-	"video-2-outlined": 59390,
-	"volunteer-outlined": 59391,
-	"wallet-outlined": 59392
+	"union-outlined": 59383,
+	"unlock-outlined": 59384,
+	"upload-outlined": 59385,
+	"user-circle-outlined": 59386,
+	"user-gear-outlined": 59387,
+	"user-outlined": 59388,
+	"user-rectangle-outlined": 59389,
+	"video-1-outlined": 59390,
+	"video-2-outlined": 59391,
+	"volunteer-outlined": 59392,
+	"wallet-outlined": 59393
 };
 
 var HeroIcon = createIconSet(glyphMap, 'hero-icons-mobile', 'hero-icons-mobile.ttf');
@@ -12873,8 +12873,7 @@ var StyledFAB$1 = index$a(TouchableHighlight)(function (_ref) {
     alignItems: 'center',
     justifyContent: 'center',
     alignSelf: 'flex-start',
-    paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
-    paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
+    padding: theme.__hd__.fab.space.containerPadding,
     flexDirection: 'row',
     elevation: theme.__hd__.fab.shadows.elevation,
     shadowColor: theme.__hd__.fab.colors.shadow,
@@ -12904,6 +12903,15 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
     marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
   };
 });
+var StyledIconContainer = index$a(Box)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    width: theme.__hd__.fab.sizes.iconContainerWidth,
+    height: theme.__hd__.fab.sizes.iconContainerHeight,
+    justifyContent: 'center',
+    alignItems: 'center'
+  };
+});
 
 var _excluded$b = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
@@ -12914,7 +12922,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   useEffect(function () {
     var animation = Animated.timing(rotateAnimation.current, {
       toValue: active ? 1 : 0,
-      useNativeDriver: true
+      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
+      easing: Easing.inOut(Easing.ease),
+      duration: 300
     });
     animation.start();
     return function () {
@@ -12931,7 +12941,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
         rotate: interpolatedRotateAnimation
       }]
     }])
-  }, /*#__PURE__*/React.createElement(AnimatedIcons, iconProps));
+  }, /*#__PURE__*/React.createElement(AnimatedIcons, _extends$1({
+    size: "xsmall"
+  }, iconProps)));
 };
 
 var IconOnlyContent = function IconOnlyContent(_ref) {
@@ -12939,11 +12951,11 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
     animated = _ref.animated,
     active = _ref.active;
   if (animated) {
-    return /*#__PURE__*/React.createElement(AnimatedFABIcon, {
+    return /*#__PURE__*/React.createElement(StyledIconContainer, null, /*#__PURE__*/React.createElement(AnimatedFABIcon, {
       active: active,
       icon: icon,
       testID: "animated-fab-icon"
-    });
+    }));
   }
   return /*#__PURE__*/React.createElement(StyledFABIcon, {
     icon: icon,
@@ -12953,11 +12965,11 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
 var IconWithTextContent = function IconWithTextContent(_ref2) {
   var icon = _ref2.icon,
     title = _ref2.title;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledFABIcon, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledIconContainer, null, /*#__PURE__*/React.createElement(StyledFABIcon, {
     size: "xsmall",
     icon: icon,
     testID: "styled-fab-icon"
-  }), /*#__PURE__*/React.createElement(StyledFABText, null, title));
+  })), /*#__PURE__*/React.createElement(StyledFABText, null, title));
 };
 var FAB = function FAB(_ref3) {
   var onPress = _ref3.onPress,
@@ -12987,10 +12999,7 @@ var FAB = function FAB(_ref3) {
 var StyledActionItem = index$a(TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
   return {
-    paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
-    paddingRight: theme.__hd__.fab.space.actionItemPaddingRight,
-    paddingTop: theme.__hd__.fab.space.actionItemPaddingTop,
-    paddingBottom: theme.__hd__.fab.space.actionItemPaddingBottom,
+    padding: theme.__hd__.fab.space.actionItemPadding,
     margin: theme.__hd__.fab.space.actionItemMargin,
     marginRight: theme.__hd__.fab.space.actionItemMarginRight,
     backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
@@ -13030,9 +13039,10 @@ var ActionItem = function ActionItem(_ref) {
     style: style,
     onPress: onPress,
     testID: testID
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledIcon, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledIconContainer, null, /*#__PURE__*/React.createElement(StyledIcon, {
+    size: "xsmall",
     icon: icon
-  }), /*#__PURE__*/React.createElement(StyledActionItemText, null, title)));
+  })), /*#__PURE__*/React.createElement(StyledActionItemText, null, title)));
 };
 
 var StyledContainer$2 = index$a(View)({
@@ -13061,10 +13071,11 @@ var StyledBackdrop = index$a(Animated.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 0,
+    flex: 1,
+    height: '100%',
+    width: '100%',
     bottom: 0,
+    right: 0,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -13080,6 +13091,17 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
     textAlign: 'right'
   };
 });
+var StyledModalView = index$a(View)({
+  position: 'absolute',
+  flex: 1,
+  height: '100%',
+  width: '100%',
+  bottom: 0,
+  right: 0,
+  justifyContent: 'flex-end',
+  alignItems: 'flex-end',
+  backgroundColor: 'transparent'
+});
 
 var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
   var style = _ref.style,
@@ -13088,7 +13110,7 @@ var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
     style: style
   }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
     return /*#__PURE__*/React.createElement(ActionItem, _extends$1({
-      key: itemProp.icon
+      key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)
     }, itemProp));
   }));
 };
@@ -13102,14 +13124,43 @@ var ActionGroup = function ActionGroup(_ref2) {
     fabTitle = _ref2.fabTitle,
     _ref2$fabIcon = _ref2.fabIcon,
     fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
+  var theme = useTheme();
+  // Internal state to control the animation of the action group
+  var _useState = useState(active),
+    _useState2 = _slicedToArray(_useState, 2),
+    visible = _useState2[0],
+    setVisibility = _useState2[1];
   var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
+    if (active && !visible) {
+      setVisibility(true);
+    }
+  }, [active]);
+  useEffect(function () {
+    if (active) {
+      var animation = Animated.timing(tranlateXAnimation.current, {
+        toValue: 1,
+        useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
+        easing: Easing.inOut(Easing.cubic)
+      });
+      animation.start();
+    }
+  }, [active]);
+  //  Make sure the animation finishes running before closing the modal
+  var onInternalFABPress = useCallback(function () {
+    if (!onPress) {
+      return;
+    }
     var animation = Animated.timing(tranlateXAnimation.current, {
-      toValue: active ? 1 : 0,
-      useNativeDriver: true
+      toValue: 0,
+      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
+      easing: Easing.inOut(Easing.cubic)
     });
-    animation.start();
-  }, [active]);
+    animation.start(function () {
+      setVisibility(false);
+      onPress();
+    });
+  }, [visible]);
   var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [400, 0]
@@ -13126,13 +13177,18 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: testID,
     pointerEvents: "box-none",
     style: style
+  }, /*#__PURE__*/React.createElement(Modal, {
+    visible: visible,
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none"
   }, /*#__PURE__*/React.createElement(StyledBackdrop, {
-    pointerEvents: active ? 'auto' : 'box-none',
-    testID: "back-drop",
     style: {
       opacity: interpolatedBackdropOpacityAnimation
-    }
-  }), /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
+    },
+    testID: "back-drop",
+    pointerEvents: active ? 'auto' : 'box-none'
+  }), /*#__PURE__*/React.createElement(StyledModalView, null, /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
     pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
@@ -13145,7 +13201,17 @@ var ActionGroup = function ActionGroup(_ref2) {
     testID: "header-text"
   }, headerTitle), /*#__PURE__*/React.createElement(ActionItemsListComponent, {
     items: items
-  })), /*#__PURE__*/React.createElement(StyledFAB, {
+  })), active && /*#__PURE__*/React.createElement(StyledFAB, {
+    testID: "fab",
+    icon: fabIcon,
+    onPress: onInternalFABPress,
+    animated: true,
+    active: active,
+    title: fabTitle,
+    style: {
+      marginBottom: theme.__hd__.fab.space.internalFABMarginBottom
+    }
+  }))), !active && /*#__PURE__*/React.createElement(StyledFAB, {
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,
@@ -15042,6 +15108,7 @@ var Success = function Success(props) {
   return /*#__PURE__*/React.createElement(SuccessPage, props);
 };
 
+var AnimatedView = Animated.createAnimatedComponent(View);
 var StyledWrapper$1 = index$a(View)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -15050,25 +15117,39 @@ var StyledWrapper$1 = index$a(View)(function (_ref) {
     height: theme.__hd__["switch"].sizes.selector.height,
     borderRadius: theme.__hd__["switch"].radii.selector["default"],
     backgroundColor: theme.__hd__["switch"].colors.selector.background,
-    padding: theme.__hd__["switch"].spaces.selector.wrapperPadding
+    padding: theme.__hd__["switch"].spaces.selector.wrapperPadding,
+    position: 'relative'
   };
 });
-var StyledTextWrapper = index$a(View)(function (_ref2) {
+var StyledTextWrapper = index$a(AnimatedView)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     flex: 1,
     borderRadius: theme.__hd__["switch"].radii.selector["default"],
-    backgroundColor: theme.__hd__["switch"].colors.selector.textBackground,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    zIndex: 1
   };
 });
-var StyledIconWrapper = index$a(View)(function (_ref3) {
+var StyledIconWrapper = index$a(AnimatedView)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     paddingHorizontal: theme.__hd__["switch"].spaces.selector.iconPadding,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    zIndex: 1
+  };
+});
+var StyledKnot$1 = index$a(AnimatedView)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    borderRadius: theme.__hd__["switch"].radii.selector["default"],
+    backgroundColor: theme.__hd__["switch"].colors.selector.textBackground,
+    position: 'absolute',
+    top: theme.__hd__["switch"].spaces.selector.wrapperPadding,
+    bottom: theme.__hd__["switch"].spaces.selector.wrapperPadding,
+    left: theme.__hd__["switch"].spaces.selector.wrapperPadding,
+    right: theme.__hd__["switch"].spaces.selector.wrapperPadding
   };
 });
 
@@ -15094,16 +15175,46 @@ var Option = function Option(_ref2) {
   var text = _ref2.text,
     icon = _ref2.icon,
     badge = _ref2.badge,
-    selected = _ref2.selected;
+    selected = _ref2.selected,
+    onLayout = _ref2.onLayout,
+    _ref2$index = _ref2.index,
+    index = _ref2$index === void 0 ? 0 : _ref2$index;
+  var animatedValue = useRef(new Animated.Value(1)).current;
+  var translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: index === 1 ? [-5, 0] : [5, 0]
+  });
+  useEffect(function () {
+    Animated.timing(animatedValue, {
+      toValue: selected ? 1 : 0,
+      duration: 200,
+      easing: Easing.linear,
+      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android'
+    }).start();
+  }, [selected]);
   if (selected) {
-    return /*#__PURE__*/React.createElement(StyledTextWrapper, null, /*#__PURE__*/React.createElement(OptionContent, {
+    return /*#__PURE__*/React.createElement(StyledTextWrapper, {
+      style: {
+        transform: [{
+          translateX: translateX
+        }]
+      },
+      onLayout: onLayout
+    }, /*#__PURE__*/React.createElement(OptionContent, {
       content: /*#__PURE__*/React.createElement(Typography.Text, {
         fontSize: "large"
       }, text),
       badge: badge
     }));
   }
-  return /*#__PURE__*/React.createElement(StyledIconWrapper, null, /*#__PURE__*/React.createElement(OptionContent, {
+  return /*#__PURE__*/React.createElement(StyledIconWrapper, {
+    style: {
+      transform: [{
+        translateX: translateX
+      }]
+    },
+    onLayout: onLayout
+  }, /*#__PURE__*/React.createElement(OptionContent, {
     content: /*#__PURE__*/React.createElement(Icon, {
       icon: icon
     }),
@@ -15114,25 +15225,65 @@ var Option = function Option(_ref2) {
 var SelectorSwitch = function SelectorSwitch(_ref) {
   var options = _ref.options,
     value = _ref.value,
-    onPress = _ref.onPress,
+    _onPress = _ref.onPress,
     style = _ref.style,
     testID = _ref.testID;
+  var theme = useTheme$1();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    knotWidth = _useState2[0],
+    setKnotWidth = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    containerWidth = _useState4[0],
+    setContainerWidth = _useState4[1];
+  var animatedValue = useRef(new Animated.Value(0)).current;
+  var translateX = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, Math.floor(containerWidth - knotWidth - theme.space.small)]
+  });
+  useEffect(function () {
+    Animated.timing(animatedValue, {
+      toValue: value === options[0].value ? 0 : 1,
+      duration: 200,
+      easing: Easing.inOut(Easing.ease),
+      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android'
+    }).start();
+  }, [value]);
+  var onContainerLayout = useCallback(function (e) {
+    setContainerWidth(e.nativeEvent.layout.width);
+  }, [options]);
+  var onItemLayout = useCallback(function (e, optionValue) {
+    if (optionValue === value) {
+      setKnotWidth(e.nativeEvent.layout.width);
+    }
+  }, [value]);
   return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
-    onPress: onPress !== undefined ? function () {
-      return onPress(value);
-    } : undefined,
+    onPress: function onPress() {
+      return _onPress === null || _onPress === void 0 ? void 0 : _onPress(value);
+    },
     testID: testID
   }, /*#__PURE__*/React.createElement(StyledWrapper$1, {
+    onLayout: onContainerLayout,
     style: style
   }, options.map(function (opt, index) {
-    return (
-      /*#__PURE__*/
+    return /*#__PURE__*/React.createElement(Option, _extends$1({}, opt, {
+      selected: opt.value === value
       // eslint-disable-next-line react/no-array-index-key
-      React.createElement(Option, _extends$1({}, opt, {
-        selected: opt.value === value,
-        key: index
-      }))
-    );
+      ,
+      key: index,
+      onLayout: function onLayout(e) {
+        return onItemLayout(e, opt.value);
+      },
+      index: index
+    }));
+  }), /*#__PURE__*/React.createElement(StyledKnot$1, {
+    style: {
+      width: knotWidth,
+      transform: [{
+        translateX: translateX
+      }]
+    }
   })));
 };
 
@@ -15190,6 +15341,7 @@ var Switch = function Switch(_ref2) {
     Animated.timing(animatedOffset, {
       toValue: offset,
       easing: Easing.inOut(Easing.cubic),
+      duration: 200,
       useNativeDriver: false
     }).start();
   }, [checked]);