@hero-design/rn 8.25.3 → 8.26.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/.eslintrc.js +2 -1
  2. package/.turbo/turbo-build.log +8 -9
  3. package/assets/fonts/hero-icons-mobile.ttf +0 -0
  4. package/es/index.js +350 -198
  5. package/lib/assets/fonts/hero-icons-mobile.ttf +0 -0
  6. package/lib/index.js +350 -198
  7. package/package.json +6 -5
  8. package/src/components/FAB/ActionGroup/ActionItem.tsx +6 -1
  9. package/src/components/FAB/ActionGroup/StyledActionGroup.tsx +17 -3
  10. package/src/components/FAB/ActionGroup/StyledActionItem.tsx +1 -4
  11. package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +704 -1040
  12. package/src/components/FAB/ActionGroup/__tests__/index.spec.tsx +9 -15
  13. package/src/components/FAB/ActionGroup/index.tsx +111 -43
  14. package/src/components/FAB/AnimatedFABIcon.tsx +5 -3
  15. package/src/components/FAB/FAB.tsx +16 -3
  16. package/src/components/FAB/StyledFAB.tsx +10 -3
  17. package/src/components/FAB/__tests__/__snapshots__/AnimatedFABIcon.spec.tsx.snap +4 -4
  18. package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap +1 -2
  19. package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap +74 -43
  20. package/src/components/Icon/HeroIcon/glyphMap.json +1 -1
  21. package/src/components/Icon/IconList.ts +1 -0
  22. package/src/components/Switch/SelectorSwitch/Option.tsx +31 -5
  23. package/src/components/Switch/SelectorSwitch/StyledSelectorSwitch.tsx +18 -4
  24. package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap +25 -18
  25. package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap +49 -18
  26. package/src/components/Switch/SelectorSwitch/index.tsx +81 -17
  27. package/src/components/Switch/index.tsx +1 -0
  28. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +8 -9
  29. package/src/theme/components/fab.ts +8 -9
  30. package/types/components/FAB/ActionGroup/ActionItem.d.ts +1 -0
  31. package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts +7 -1
  32. package/types/components/FAB/StyledFAB.d.ts +5 -1
  33. package/types/components/Icon/IconList.d.ts +1 -1
  34. package/types/components/Icon/index.d.ts +1 -1
  35. package/types/components/Icon/utils.d.ts +1 -1
  36. package/types/components/Switch/SelectorSwitch/Option.d.ts +4 -1
  37. package/types/components/Switch/SelectorSwitch/StyledSelectorSwitch.d.ts +15 -9
  38. package/types/components/Switch/SelectorSwitch/index.d.ts +1 -1
  39. package/types/theme/components/fab.d.ts +5 -6
package/lib/index.js CHANGED
@@ -2309,7 +2309,7 @@ var getFABTheme = function getFABTheme(theme) {
2309
2309
  buttonPressedBackground: theme.colors.pressedSurface,
2310
2310
  icon: theme.colors.onPrimary,
2311
2311
  headerText: theme.colors.onDefaultGlobalSurface,
2312
- actionItemBackground: theme.colors.primary,
2312
+ actionItemBackground: theme.colors.secondary,
2313
2313
  actionItemPressedBackground: theme.colors.pressedSurface,
2314
2314
  backdropBackground: theme.colors.overlayGlobalSurface,
2315
2315
  titleText: theme.colors.onPrimary,
@@ -2318,7 +2318,9 @@ var getFABTheme = function getFABTheme(theme) {
2318
2318
  };
2319
2319
  var sizes = {
2320
2320
  width: theme.sizes.xxxxxlarge,
2321
- height: theme.sizes.xxxxxlarge
2321
+ height: theme.sizes.xxxxxlarge,
2322
+ iconContainerWidth: theme.sizes.large,
2323
+ iconContainerHeight: theme.sizes.large
2322
2324
  };
2323
2325
  var fonts = {
2324
2326
  header: theme.fonts.neutral.semiBold,
@@ -2327,7 +2329,7 @@ var getFABTheme = function getFABTheme(theme) {
2327
2329
  };
2328
2330
  var fontSizes = {
2329
2331
  header: theme.fontSizes.xxxlarge,
2330
- actionItemText: theme.fontSizes.medium,
2332
+ actionItemText: theme.fontSizes.large,
2331
2333
  title: theme.fontSizes.large
2332
2334
  };
2333
2335
  var lineHeights = {
@@ -2346,20 +2348,17 @@ var getFABTheme = function getFABTheme(theme) {
2346
2348
  elevation: 2
2347
2349
  };
2348
2350
  var space = {
2349
- actionItemPaddingLeft: theme.space.medium,
2350
- actionItemPaddingRight: theme.space.medium,
2351
- actionItemPaddingTop: theme.space.small,
2352
- actionItemPaddingBottom: theme.space.small,
2351
+ actionItemPadding: theme.space.smallMedium,
2353
2352
  actionItemMargin: theme.space.small,
2354
2353
  actionItemMarginRight: theme.space.large,
2355
- actionItemTextPaddingLeft: theme.space.small,
2354
+ actionItemTextPaddingLeft: theme.space.xsmall,
2356
2355
  buttonMarginTop: theme.space.large,
2357
2356
  buttonMarginRight: theme.space.large,
2358
2357
  headerTextMarginRight: theme.space.large,
2359
2358
  headerTextMarginBottom: theme.space.large,
2360
- containerPaddingHorizontal: theme.space.medium,
2361
- containerPaddingVertical: theme.space.medium,
2362
- titleMarginHorizontal: theme.space.small
2359
+ containerPadding: theme.space.large - theme.space.xsmall,
2360
+ titleMarginHorizontal: theme.space.small,
2361
+ internalFABMarginBottom: theme.space.large
2363
2362
  };
2364
2363
  var radii = {
2365
2364
  actionItem: theme.radii.rounded
@@ -6228,7 +6227,7 @@ var Typography = {
6228
6227
  };
6229
6228
 
6230
6229
  // 🔴 DO NOT EDIT — This file is generated automatically.
6231
- 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'];
6230
+ 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'];
6232
6231
 
6233
6232
  var activate = 59000;
6234
6233
  var adjustment = 59003;
@@ -6305,18 +6304,18 @@ var add = 59181;
6305
6304
  var bold = 59203;
6306
6305
  var cancel = 59215;
6307
6306
  var checkmark = 59220;
6308
- var italic = 59301;
6309
- var number = 59325;
6310
- var percentage = 59330;
6311
- var redeem = 59339;
6312
- var refresh = 59340;
6313
- var remove = 59341;
6314
- var restart = 59343;
6315
- var strikethrough = 59364;
6316
- var sync = 59370;
6317
- var transfer = 59377;
6318
- var unavailable = 59380;
6319
- var underline = 59381;
6307
+ var italic = 59302;
6308
+ var number = 59326;
6309
+ var percentage = 59331;
6310
+ var redeem = 59340;
6311
+ var refresh = 59341;
6312
+ var remove = 59342;
6313
+ var restart = 59344;
6314
+ var strikethrough = 59365;
6315
+ var sync = 59371;
6316
+ var transfer = 59378;
6317
+ var unavailable = 59381;
6318
+ var underline = 59382;
6320
6319
  var glyphMap = {
6321
6320
  activate: activate,
6322
6321
  "add-emoji": 59001,
@@ -6572,145 +6571,146 @@ var glyphMap = {
6572
6571
  "double-buildings-outlined": 59251,
6573
6572
  "double-left-arrows": 59252,
6574
6573
  "double-right-arrows": 59253,
6575
- "download-outlined": 59254,
6576
- "edit-template-outlined": 59255,
6577
- "email-outlined": 59256,
6578
- "enter-arrow": 59257,
6579
- "envelope-outlined": 59258,
6580
- "expense-outlined": 59259,
6581
- "explore-outlined": 59260,
6582
- "external-link": 59261,
6583
- "eye-invisible-outlined": 59262,
6584
- "eye-outlined": 59263,
6585
- "face-id": 59264,
6586
- "face-meh-outlined": 59265,
6587
- "face-open-smiley-outlined": 59266,
6588
- "face-sad-outlined": 59267,
6589
- "face-smiley-outlined": 59268,
6590
- "fastfood-outlined": 59269,
6591
- "feed-outlined": 59270,
6592
- "file-certified-outlined": 59271,
6593
- "file-clone-outlined": 59272,
6594
- "file-copy-outlined": 59273,
6595
- "file-dispose-outlined": 59274,
6596
- "file-dollar-certified-outlined": 59275,
6597
- "file-dollar-outlined": 59276,
6598
- "file-download-outlined": 59277,
6599
- "file-export-outlined": 59278,
6600
- "file-lock-outlined": 59279,
6601
- "file-outlined": 59280,
6602
- "file-search-outlined": 59281,
6603
- "file-secured-outlined": 59282,
6604
- "file-statutory-outlined": 59283,
6605
- "file-verified-outlined": 59284,
6606
- "filter-outlined": 59285,
6607
- "folder-outlined": 59286,
6608
- "folder-user-outlined": 59287,
6609
- "form-outlined": 59288,
6610
- "funnel-filter-outline": 59289,
6611
- "graph-outlined": 59290,
6612
- "hand-holding-user-outlined": 59291,
6613
- "happy-sun-outlined": 59292,
6614
- "health-bag-outlined": 59293,
6615
- "heart-outlined": 59294,
6616
- "home-active-outlined": 59295,
6617
- "home-outlined": 59296,
6618
- "id-card-outlined": 59297,
6619
- "image-outlined": 59298,
6620
- "import-outlined": 59299,
6621
- "instapay-outlined": 59300,
6574
+ "download-box-outlined": 59254,
6575
+ "download-outlined": 59255,
6576
+ "edit-template-outlined": 59256,
6577
+ "email-outlined": 59257,
6578
+ "enter-arrow": 59258,
6579
+ "envelope-outlined": 59259,
6580
+ "expense-outlined": 59260,
6581
+ "explore-outlined": 59261,
6582
+ "external-link": 59262,
6583
+ "eye-invisible-outlined": 59263,
6584
+ "eye-outlined": 59264,
6585
+ "face-id": 59265,
6586
+ "face-meh-outlined": 59266,
6587
+ "face-open-smiley-outlined": 59267,
6588
+ "face-sad-outlined": 59268,
6589
+ "face-smiley-outlined": 59269,
6590
+ "fastfood-outlined": 59270,
6591
+ "feed-outlined": 59271,
6592
+ "file-certified-outlined": 59272,
6593
+ "file-clone-outlined": 59273,
6594
+ "file-copy-outlined": 59274,
6595
+ "file-dispose-outlined": 59275,
6596
+ "file-dollar-certified-outlined": 59276,
6597
+ "file-dollar-outlined": 59277,
6598
+ "file-download-outlined": 59278,
6599
+ "file-export-outlined": 59279,
6600
+ "file-lock-outlined": 59280,
6601
+ "file-outlined": 59281,
6602
+ "file-search-outlined": 59282,
6603
+ "file-secured-outlined": 59283,
6604
+ "file-statutory-outlined": 59284,
6605
+ "file-verified-outlined": 59285,
6606
+ "filter-outlined": 59286,
6607
+ "folder-outlined": 59287,
6608
+ "folder-user-outlined": 59288,
6609
+ "form-outlined": 59289,
6610
+ "funnel-filter-outline": 59290,
6611
+ "graph-outlined": 59291,
6612
+ "hand-holding-user-outlined": 59292,
6613
+ "happy-sun-outlined": 59293,
6614
+ "health-bag-outlined": 59294,
6615
+ "heart-outlined": 59295,
6616
+ "home-active-outlined": 59296,
6617
+ "home-outlined": 59297,
6618
+ "id-card-outlined": 59298,
6619
+ "image-outlined": 59299,
6620
+ "import-outlined": 59300,
6621
+ "instapay-outlined": 59301,
6622
6622
  italic: italic,
6623
- "link-1": 59302,
6624
- "link-2": 59303,
6625
- "list-outlined": 59304,
6626
- "live-help-outlined": 59305,
6627
- "location-on-outlined": 59306,
6628
- "location-outlined": 59307,
6629
- "lock-outlined": 59308,
6630
- "locked-file-outlined": 59309,
6631
- "log-out": 59310,
6632
- "media-content-outlined": 59311,
6633
- "menu-close": 59312,
6634
- "menu-expand": 59313,
6635
- "menu-fold-outlined": 59314,
6636
- "menu-unfold-outlined": 59315,
6637
- "moneybag-outlined": 59316,
6638
- "moon-outlined": 59317,
6639
- "more-horizontal": 59318,
6640
- "more-vertical": 59319,
6641
- "multiple-folders-outlined": 59320,
6642
- "multiple-users-outlined": 59321,
6643
- "near-me-outlined": 59322,
6644
- "node-outlined": 59323,
6645
- "number-points": 59324,
6623
+ "link-1": 59303,
6624
+ "link-2": 59304,
6625
+ "list-outlined": 59305,
6626
+ "live-help-outlined": 59306,
6627
+ "location-on-outlined": 59307,
6628
+ "location-outlined": 59308,
6629
+ "lock-outlined": 59309,
6630
+ "locked-file-outlined": 59310,
6631
+ "log-out": 59311,
6632
+ "media-content-outlined": 59312,
6633
+ "menu-close": 59313,
6634
+ "menu-expand": 59314,
6635
+ "menu-fold-outlined": 59315,
6636
+ "menu-unfold-outlined": 59316,
6637
+ "moneybag-outlined": 59317,
6638
+ "moon-outlined": 59318,
6639
+ "more-horizontal": 59319,
6640
+ "more-vertical": 59320,
6641
+ "multiple-folders-outlined": 59321,
6642
+ "multiple-users-outlined": 59322,
6643
+ "near-me-outlined": 59323,
6644
+ "node-outlined": 59324,
6645
+ "number-points": 59325,
6646
6646
  number: number,
6647
- "overview-outlined": 59326,
6648
- "payment-summary-outlined": 59327,
6649
- "payslip-outlined": 59328,
6650
- "pencil-outlined": 59329,
6647
+ "overview-outlined": 59327,
6648
+ "payment-summary-outlined": 59328,
6649
+ "payslip-outlined": 59329,
6650
+ "pencil-outlined": 59330,
6651
6651
  percentage: percentage,
6652
- "phone-outlined": 59331,
6653
- "piggy-bank-outlined": 59332,
6654
- "plane-outlined": 59333,
6655
- "play-circle-outlined": 59334,
6656
- "print-outlined": 59335,
6657
- "qr-code-outlined": 59336,
6658
- "qualification-outlined": 59337,
6659
- "re-assign": 59338,
6652
+ "phone-outlined": 59332,
6653
+ "piggy-bank-outlined": 59333,
6654
+ "plane-outlined": 59334,
6655
+ "play-circle-outlined": 59335,
6656
+ "print-outlined": 59336,
6657
+ "qr-code-outlined": 59337,
6658
+ "qualification-outlined": 59338,
6659
+ "re-assign": 59339,
6660
6660
  redeem: redeem,
6661
6661
  refresh: refresh,
6662
6662
  remove: remove,
6663
- "reply-outlined": 59342,
6663
+ "reply-outlined": 59343,
6664
6664
  restart: restart,
6665
- "return-arrow": 59344,
6666
- "rostering-outlined": 59345,
6667
- "save-outlined": 59346,
6668
- "schedule-outlined": 59347,
6669
- "search-outlined": 59348,
6670
- "search-secured-outlined": 59349,
6671
- "send-outlined": 59350,
6672
- "share-1": 59351,
6673
- "share-2": 59352,
6674
- "share-outlined": 59353,
6675
- "show-chart-outlined": 59354,
6676
- "single-down-arrow": 59355,
6677
- "single-left-arrow": 59356,
6678
- "single-right-arrow": 59357,
6679
- "single-up-arrow": 59358,
6680
- "speaker-active-outlined": 59359,
6681
- "speaker-outlined": 59360,
6682
- "star-circle-outlined": 59361,
6683
- "star-outlined": 59362,
6684
- "stopwatch-outlined": 59363,
6665
+ "return-arrow": 59345,
6666
+ "rostering-outlined": 59346,
6667
+ "save-outlined": 59347,
6668
+ "schedule-outlined": 59348,
6669
+ "search-outlined": 59349,
6670
+ "search-secured-outlined": 59350,
6671
+ "send-outlined": 59351,
6672
+ "share-1": 59352,
6673
+ "share-2": 59353,
6674
+ "share-outlined": 59354,
6675
+ "show-chart-outlined": 59355,
6676
+ "single-down-arrow": 59356,
6677
+ "single-left-arrow": 59357,
6678
+ "single-right-arrow": 59358,
6679
+ "single-up-arrow": 59359,
6680
+ "speaker-active-outlined": 59360,
6681
+ "speaker-outlined": 59361,
6682
+ "star-circle-outlined": 59362,
6683
+ "star-outlined": 59363,
6684
+ "stopwatch-outlined": 59364,
6685
6685
  strikethrough: strikethrough,
6686
- "styler-outlined": 59365,
6687
- "suitcase-clock-outlined": 59366,
6688
- "suitcase-outlined": 59367,
6689
- "survey-outlined": 59368,
6690
- "switch-outlined": 59369,
6686
+ "styler-outlined": 59366,
6687
+ "suitcase-clock-outlined": 59367,
6688
+ "suitcase-outlined": 59368,
6689
+ "survey-outlined": 59369,
6690
+ "switch-outlined": 59370,
6691
6691
  sync: sync,
6692
- "tag-outlined": 59371,
6693
- "target-outlined": 59372,
6694
- "tennis-outlined": 59373,
6695
- "ticket-outlined": 59374,
6696
- "timesheet-outlined": 59375,
6697
- "today-outlined": 59376,
6692
+ "tag-outlined": 59372,
6693
+ "target-outlined": 59373,
6694
+ "tennis-outlined": 59374,
6695
+ "ticket-outlined": 59375,
6696
+ "timesheet-outlined": 59376,
6697
+ "today-outlined": 59377,
6698
6698
  transfer: transfer,
6699
- "trash-bin-outlined": 59378,
6700
- "umbrela-outlined": 59379,
6699
+ "trash-bin-outlined": 59379,
6700
+ "umbrela-outlined": 59380,
6701
6701
  unavailable: unavailable,
6702
6702
  underline: underline,
6703
- "union-outlined": 59382,
6704
- "unlock-outlined": 59383,
6705
- "upload-outlined": 59384,
6706
- "user-circle-outlined": 59385,
6707
- "user-gear-outlined": 59386,
6708
- "user-outlined": 59387,
6709
- "user-rectangle-outlined": 59388,
6710
- "video-1-outlined": 59389,
6711
- "video-2-outlined": 59390,
6712
- "volunteer-outlined": 59391,
6713
- "wallet-outlined": 59392
6703
+ "union-outlined": 59383,
6704
+ "unlock-outlined": 59384,
6705
+ "upload-outlined": 59385,
6706
+ "user-circle-outlined": 59386,
6707
+ "user-gear-outlined": 59387,
6708
+ "user-outlined": 59388,
6709
+ "user-rectangle-outlined": 59389,
6710
+ "video-1-outlined": 59390,
6711
+ "video-2-outlined": 59391,
6712
+ "volunteer-outlined": 59392,
6713
+ "wallet-outlined": 59393
6714
6714
  };
6715
6715
 
6716
6716
  var HeroIcon = reactNativeVectorIcons.createIconSet(glyphMap, 'hero-icons-mobile', 'hero-icons-mobile.ttf');
@@ -12903,8 +12903,7 @@ var StyledFAB$1 = index$a(reactNative.TouchableHighlight)(function (_ref) {
12903
12903
  alignItems: 'center',
12904
12904
  justifyContent: 'center',
12905
12905
  alignSelf: 'flex-start',
12906
- paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
12907
- paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
12906
+ padding: theme.__hd__.fab.space.containerPadding,
12908
12907
  flexDirection: 'row',
12909
12908
  elevation: theme.__hd__.fab.shadows.elevation,
12910
12909
  shadowColor: theme.__hd__.fab.colors.shadow,
@@ -12934,6 +12933,15 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
12934
12933
  marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
12935
12934
  };
12936
12935
  });
12936
+ var StyledIconContainer = index$a(Box)(function (_ref4) {
12937
+ var theme = _ref4.theme;
12938
+ return {
12939
+ width: theme.__hd__.fab.sizes.iconContainerWidth,
12940
+ height: theme.__hd__.fab.sizes.iconContainerHeight,
12941
+ justifyContent: 'center',
12942
+ alignItems: 'center'
12943
+ };
12944
+ });
12937
12945
 
12938
12946
  var _excluded$b = ["active"];
12939
12947
  var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
@@ -12944,7 +12952,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
12944
12952
  React.useEffect(function () {
12945
12953
  var animation = reactNative.Animated.timing(rotateAnimation.current, {
12946
12954
  toValue: active ? 1 : 0,
12947
- useNativeDriver: true
12955
+ useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
12956
+ easing: reactNative.Easing.inOut(reactNative.Easing.ease),
12957
+ duration: 300
12948
12958
  });
12949
12959
  animation.start();
12950
12960
  return function () {
@@ -12961,7 +12971,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
12961
12971
  rotate: interpolatedRotateAnimation
12962
12972
  }]
12963
12973
  }])
12964
- }, /*#__PURE__*/React__default["default"].createElement(AnimatedIcons, iconProps));
12974
+ }, /*#__PURE__*/React__default["default"].createElement(AnimatedIcons, _extends$1({
12975
+ size: "xsmall"
12976
+ }, iconProps)));
12965
12977
  };
12966
12978
 
12967
12979
  var IconOnlyContent = function IconOnlyContent(_ref) {
@@ -12969,11 +12981,11 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
12969
12981
  animated = _ref.animated,
12970
12982
  active = _ref.active;
12971
12983
  if (animated) {
12972
- return /*#__PURE__*/React__default["default"].createElement(AnimatedFABIcon, {
12984
+ return /*#__PURE__*/React__default["default"].createElement(StyledIconContainer, null, /*#__PURE__*/React__default["default"].createElement(AnimatedFABIcon, {
12973
12985
  active: active,
12974
12986
  icon: icon,
12975
12987
  testID: "animated-fab-icon"
12976
- });
12988
+ }));
12977
12989
  }
12978
12990
  return /*#__PURE__*/React__default["default"].createElement(StyledFABIcon, {
12979
12991
  icon: icon,
@@ -12983,11 +12995,11 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
12983
12995
  var IconWithTextContent = function IconWithTextContent(_ref2) {
12984
12996
  var icon = _ref2.icon,
12985
12997
  title = _ref2.title;
12986
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledFABIcon, {
12998
+ return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledIconContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledFABIcon, {
12987
12999
  size: "xsmall",
12988
13000
  icon: icon,
12989
13001
  testID: "styled-fab-icon"
12990
- }), /*#__PURE__*/React__default["default"].createElement(StyledFABText, null, title));
13002
+ })), /*#__PURE__*/React__default["default"].createElement(StyledFABText, null, title));
12991
13003
  };
12992
13004
  var FAB = function FAB(_ref3) {
12993
13005
  var onPress = _ref3.onPress,
@@ -13017,10 +13029,7 @@ var FAB = function FAB(_ref3) {
13017
13029
  var StyledActionItem = index$a(reactNative.TouchableHighlight)(function (_ref) {
13018
13030
  var theme = _ref.theme;
13019
13031
  return {
13020
- paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
13021
- paddingRight: theme.__hd__.fab.space.actionItemPaddingRight,
13022
- paddingTop: theme.__hd__.fab.space.actionItemPaddingTop,
13023
- paddingBottom: theme.__hd__.fab.space.actionItemPaddingBottom,
13032
+ padding: theme.__hd__.fab.space.actionItemPadding,
13024
13033
  margin: theme.__hd__.fab.space.actionItemMargin,
13025
13034
  marginRight: theme.__hd__.fab.space.actionItemMarginRight,
13026
13035
  backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
@@ -13060,9 +13069,10 @@ var ActionItem = function ActionItem(_ref) {
13060
13069
  style: style,
13061
13070
  onPress: onPress,
13062
13071
  testID: testID
13063
- }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
13072
+ }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledIconContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
13073
+ size: "xsmall",
13064
13074
  icon: icon
13065
- }), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title)));
13075
+ })), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title)));
13066
13076
  };
13067
13077
 
13068
13078
  var StyledContainer$2 = index$a(reactNative.View)({
@@ -13091,10 +13101,11 @@ var StyledBackdrop = index$a(reactNative.Animated.View)(function (_ref2) {
13091
13101
  var theme = _ref2.theme;
13092
13102
  return {
13093
13103
  position: 'absolute',
13094
- left: 0,
13095
- right: 0,
13096
- top: 0,
13104
+ flex: 1,
13105
+ height: '100%',
13106
+ width: '100%',
13097
13107
  bottom: 0,
13108
+ right: 0,
13098
13109
  backgroundColor: theme.__hd__.fab.colors.backdropBackground
13099
13110
  };
13100
13111
  });
@@ -13110,6 +13121,17 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
13110
13121
  textAlign: 'right'
13111
13122
  };
13112
13123
  });
13124
+ var StyledModalView = index$a(reactNative.View)({
13125
+ position: 'absolute',
13126
+ flex: 1,
13127
+ height: '100%',
13128
+ width: '100%',
13129
+ bottom: 0,
13130
+ right: 0,
13131
+ justifyContent: 'flex-end',
13132
+ alignItems: 'flex-end',
13133
+ backgroundColor: 'transparent'
13134
+ });
13113
13135
 
13114
13136
  var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
13115
13137
  var style = _ref.style,
@@ -13118,7 +13140,7 @@ var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
13118
13140
  style: style
13119
13141
  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
13120
13142
  return /*#__PURE__*/React__default["default"].createElement(ActionItem, _extends$1({
13121
- key: itemProp.icon
13143
+ key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)
13122
13144
  }, itemProp));
13123
13145
  }));
13124
13146
  };
@@ -13132,14 +13154,43 @@ var ActionGroup = function ActionGroup(_ref2) {
13132
13154
  fabTitle = _ref2.fabTitle,
13133
13155
  _ref2$fabIcon = _ref2.fabIcon,
13134
13156
  fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
13157
+ var theme = useTheme();
13158
+ // Internal state to control the animation of the action group
13159
+ var _useState = React.useState(active),
13160
+ _useState2 = _slicedToArray(_useState, 2),
13161
+ visible = _useState2[0],
13162
+ setVisibility = _useState2[1];
13135
13163
  var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
13136
13164
  React.useEffect(function () {
13165
+ if (active && !visible) {
13166
+ setVisibility(true);
13167
+ }
13168
+ }, [active]);
13169
+ React.useEffect(function () {
13170
+ if (active) {
13171
+ var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
13172
+ toValue: 1,
13173
+ useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
13174
+ easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
13175
+ });
13176
+ animation.start();
13177
+ }
13178
+ }, [active]);
13179
+ // Make sure the animation finishes running before closing the modal
13180
+ var onInternalFABPress = React.useCallback(function () {
13181
+ if (!onPress) {
13182
+ return;
13183
+ }
13137
13184
  var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
13138
- toValue: active ? 1 : 0,
13139
- useNativeDriver: true
13185
+ toValue: 0,
13186
+ useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
13187
+ easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
13140
13188
  });
13141
- animation.start();
13142
- }, [active]);
13189
+ animation.start(function () {
13190
+ setVisibility(false);
13191
+ onPress();
13192
+ });
13193
+ }, [visible]);
13143
13194
  var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
13144
13195
  inputRange: [0, 1],
13145
13196
  outputRange: [400, 0]
@@ -13156,13 +13207,18 @@ var ActionGroup = function ActionGroup(_ref2) {
13156
13207
  testID: testID,
13157
13208
  pointerEvents: "box-none",
13158
13209
  style: style
13210
+ }, /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
13211
+ visible: visible,
13212
+ transparent: true,
13213
+ statusBarTranslucent: true,
13214
+ animationType: "none"
13159
13215
  }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
13160
- pointerEvents: active ? 'auto' : 'box-none',
13161
- testID: "back-drop",
13162
13216
  style: {
13163
13217
  opacity: interpolatedBackdropOpacityAnimation
13164
- }
13165
- }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
13218
+ },
13219
+ testID: "back-drop",
13220
+ pointerEvents: active ? 'auto' : 'box-none'
13221
+ }), /*#__PURE__*/React__default["default"].createElement(StyledModalView, null, /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
13166
13222
  pointerEvents: active ? 'auto' : 'none',
13167
13223
  testID: "action-group",
13168
13224
  style: {
@@ -13175,7 +13231,17 @@ var ActionGroup = function ActionGroup(_ref2) {
13175
13231
  testID: "header-text"
13176
13232
  }, headerTitle), /*#__PURE__*/React__default["default"].createElement(ActionItemsListComponent, {
13177
13233
  items: items
13178
- })), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
13234
+ })), active && /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
13235
+ testID: "fab",
13236
+ icon: fabIcon,
13237
+ onPress: onInternalFABPress,
13238
+ animated: true,
13239
+ active: active,
13240
+ title: fabTitle,
13241
+ style: {
13242
+ marginBottom: theme.__hd__.fab.space.internalFABMarginBottom
13243
+ }
13244
+ }))), !active && /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
13179
13245
  testID: "fab",
13180
13246
  icon: fabIcon,
13181
13247
  onPress: onPress,
@@ -15072,6 +15138,7 @@ var Success = function Success(props) {
15072
15138
  return /*#__PURE__*/React__default["default"].createElement(SuccessPage, props);
15073
15139
  };
15074
15140
 
15141
+ var AnimatedView = reactNative.Animated.createAnimatedComponent(reactNative.View);
15075
15142
  var StyledWrapper$1 = index$a(reactNative.View)(function (_ref) {
15076
15143
  var theme = _ref.theme;
15077
15144
  return {
@@ -15080,25 +15147,39 @@ var StyledWrapper$1 = index$a(reactNative.View)(function (_ref) {
15080
15147
  height: theme.__hd__["switch"].sizes.selector.height,
15081
15148
  borderRadius: theme.__hd__["switch"].radii.selector["default"],
15082
15149
  backgroundColor: theme.__hd__["switch"].colors.selector.background,
15083
- padding: theme.__hd__["switch"].spaces.selector.wrapperPadding
15150
+ padding: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15151
+ position: 'relative'
15084
15152
  };
15085
15153
  });
15086
- var StyledTextWrapper = index$a(reactNative.View)(function (_ref2) {
15154
+ var StyledTextWrapper = index$a(AnimatedView)(function (_ref2) {
15087
15155
  var theme = _ref2.theme;
15088
15156
  return {
15089
15157
  flex: 1,
15090
15158
  borderRadius: theme.__hd__["switch"].radii.selector["default"],
15091
- backgroundColor: theme.__hd__["switch"].colors.selector.textBackground,
15092
15159
  justifyContent: 'center',
15093
- alignItems: 'center'
15160
+ alignItems: 'center',
15161
+ zIndex: 1
15094
15162
  };
15095
15163
  });
15096
- var StyledIconWrapper = index$a(reactNative.View)(function (_ref3) {
15164
+ var StyledIconWrapper = index$a(AnimatedView)(function (_ref3) {
15097
15165
  var theme = _ref3.theme;
15098
15166
  return {
15099
15167
  paddingHorizontal: theme.__hd__["switch"].spaces.selector.iconPadding,
15100
15168
  justifyContent: 'center',
15101
- alignItems: 'center'
15169
+ alignItems: 'center',
15170
+ zIndex: 1
15171
+ };
15172
+ });
15173
+ var StyledKnot$1 = index$a(AnimatedView)(function (_ref4) {
15174
+ var theme = _ref4.theme;
15175
+ return {
15176
+ borderRadius: theme.__hd__["switch"].radii.selector["default"],
15177
+ backgroundColor: theme.__hd__["switch"].colors.selector.textBackground,
15178
+ position: 'absolute',
15179
+ top: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15180
+ bottom: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15181
+ left: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15182
+ right: theme.__hd__["switch"].spaces.selector.wrapperPadding
15102
15183
  };
15103
15184
  });
15104
15185
 
@@ -15124,16 +15205,46 @@ var Option = function Option(_ref2) {
15124
15205
  var text = _ref2.text,
15125
15206
  icon = _ref2.icon,
15126
15207
  badge = _ref2.badge,
15127
- selected = _ref2.selected;
15208
+ selected = _ref2.selected,
15209
+ onLayout = _ref2.onLayout,
15210
+ _ref2$index = _ref2.index,
15211
+ index = _ref2$index === void 0 ? 0 : _ref2$index;
15212
+ var animatedValue = React.useRef(new reactNative.Animated.Value(1)).current;
15213
+ var translateX = animatedValue.interpolate({
15214
+ inputRange: [0, 1],
15215
+ outputRange: index === 1 ? [-5, 0] : [5, 0]
15216
+ });
15217
+ React.useEffect(function () {
15218
+ reactNative.Animated.timing(animatedValue, {
15219
+ toValue: selected ? 1 : 0,
15220
+ duration: 200,
15221
+ easing: reactNative.Easing.linear,
15222
+ useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android'
15223
+ }).start();
15224
+ }, [selected]);
15128
15225
  if (selected) {
15129
- return /*#__PURE__*/React__default["default"].createElement(StyledTextWrapper, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
15226
+ return /*#__PURE__*/React__default["default"].createElement(StyledTextWrapper, {
15227
+ style: {
15228
+ transform: [{
15229
+ translateX: translateX
15230
+ }]
15231
+ },
15232
+ onLayout: onLayout
15233
+ }, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
15130
15234
  content: /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
15131
15235
  fontSize: "large"
15132
15236
  }, text),
15133
15237
  badge: badge
15134
15238
  }));
15135
15239
  }
15136
- return /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
15240
+ return /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, {
15241
+ style: {
15242
+ transform: [{
15243
+ translateX: translateX
15244
+ }]
15245
+ },
15246
+ onLayout: onLayout
15247
+ }, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
15137
15248
  content: /*#__PURE__*/React__default["default"].createElement(Icon, {
15138
15249
  icon: icon
15139
15250
  }),
@@ -15144,25 +15255,65 @@ var Option = function Option(_ref2) {
15144
15255
  var SelectorSwitch = function SelectorSwitch(_ref) {
15145
15256
  var options = _ref.options,
15146
15257
  value = _ref.value,
15147
- onPress = _ref.onPress,
15258
+ _onPress = _ref.onPress,
15148
15259
  style = _ref.style,
15149
15260
  testID = _ref.testID;
15261
+ var theme = useTheme$1();
15262
+ var _useState = React.useState(0),
15263
+ _useState2 = _slicedToArray(_useState, 2),
15264
+ knotWidth = _useState2[0],
15265
+ setKnotWidth = _useState2[1];
15266
+ var _useState3 = React.useState(0),
15267
+ _useState4 = _slicedToArray(_useState3, 2),
15268
+ containerWidth = _useState4[0],
15269
+ setContainerWidth = _useState4[1];
15270
+ var animatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
15271
+ var translateX = animatedValue.interpolate({
15272
+ inputRange: [0, 1],
15273
+ outputRange: [0, Math.floor(containerWidth - knotWidth - theme.space.small)]
15274
+ });
15275
+ React.useEffect(function () {
15276
+ reactNative.Animated.timing(animatedValue, {
15277
+ toValue: value === options[0].value ? 0 : 1,
15278
+ duration: 200,
15279
+ easing: reactNative.Easing.inOut(reactNative.Easing.ease),
15280
+ useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android'
15281
+ }).start();
15282
+ }, [value]);
15283
+ var onContainerLayout = React.useCallback(function (e) {
15284
+ setContainerWidth(e.nativeEvent.layout.width);
15285
+ }, [options]);
15286
+ var onItemLayout = React.useCallback(function (e, optionValue) {
15287
+ if (optionValue === value) {
15288
+ setKnotWidth(e.nativeEvent.layout.width);
15289
+ }
15290
+ }, [value]);
15150
15291
  return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableWithoutFeedback, {
15151
- onPress: onPress !== undefined ? function () {
15152
- return onPress(value);
15153
- } : undefined,
15292
+ onPress: function onPress() {
15293
+ return _onPress === null || _onPress === void 0 ? void 0 : _onPress(value);
15294
+ },
15154
15295
  testID: testID
15155
15296
  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, {
15297
+ onLayout: onContainerLayout,
15156
15298
  style: style
15157
15299
  }, options.map(function (opt, index) {
15158
- return (
15159
- /*#__PURE__*/
15300
+ return /*#__PURE__*/React__default["default"].createElement(Option, _extends$1({}, opt, {
15301
+ selected: opt.value === value
15160
15302
  // eslint-disable-next-line react/no-array-index-key
15161
- React__default["default"].createElement(Option, _extends$1({}, opt, {
15162
- selected: opt.value === value,
15163
- key: index
15164
- }))
15165
- );
15303
+ ,
15304
+ key: index,
15305
+ onLayout: function onLayout(e) {
15306
+ return onItemLayout(e, opt.value);
15307
+ },
15308
+ index: index
15309
+ }));
15310
+ }), /*#__PURE__*/React__default["default"].createElement(StyledKnot$1, {
15311
+ style: {
15312
+ width: knotWidth,
15313
+ transform: [{
15314
+ translateX: translateX
15315
+ }]
15316
+ }
15166
15317
  })));
15167
15318
  };
15168
15319
 
@@ -15220,6 +15371,7 @@ var Switch = function Switch(_ref2) {
15220
15371
  reactNative.Animated.timing(animatedOffset, {
15221
15372
  toValue: offset,
15222
15373
  easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
15374
+ duration: 200,
15223
15375
  useNativeDriver: false
15224
15376
  }).start();
15225
15377
  }, [checked]);