@hero-design/rn 8.25.2 → 8.26.0

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 (35) hide show
  1. package/.turbo/turbo-build.log +8 -9
  2. package/assets/fonts/hero-icons-mobile.ttf +0 -0
  3. package/es/index.js +282 -186
  4. package/lib/assets/fonts/hero-icons-mobile.ttf +0 -0
  5. package/lib/index.js +282 -186
  6. package/package.json +5 -5
  7. package/src/components/FAB/ActionGroup/ActionItem.tsx +6 -1
  8. package/src/components/FAB/ActionGroup/StyledActionItem.tsx +1 -4
  9. package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap +374 -202
  10. package/src/components/FAB/ActionGroup/index.tsx +15 -9
  11. package/src/components/FAB/AnimatedFABIcon.tsx +5 -3
  12. package/src/components/FAB/FAB.tsx +16 -3
  13. package/src/components/FAB/StyledFAB.tsx +10 -3
  14. package/src/components/FAB/__tests__/__snapshots__/AnimatedFABIcon.spec.tsx.snap +4 -4
  15. package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap +1 -2
  16. package/src/components/FAB/__tests__/__snapshots__/index.spec.tsx.snap +74 -43
  17. package/src/components/Icon/HeroIcon/glyphMap.json +1 -1
  18. package/src/components/Icon/IconList.ts +1 -0
  19. package/src/components/Switch/SelectorSwitch/Option.tsx +31 -5
  20. package/src/components/Switch/SelectorSwitch/StyledSelectorSwitch.tsx +18 -4
  21. package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap +25 -18
  22. package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap +49 -18
  23. package/src/components/Switch/SelectorSwitch/index.tsx +81 -17
  24. package/src/components/Switch/index.tsx +1 -0
  25. package/src/theme/__tests__/__snapshots__/index.spec.ts.snap +7 -9
  26. package/src/theme/components/fab.ts +7 -9
  27. package/types/components/FAB/ActionGroup/ActionItem.d.ts +1 -0
  28. package/types/components/FAB/StyledFAB.d.ts +5 -1
  29. package/types/components/Icon/IconList.d.ts +1 -1
  30. package/types/components/Icon/index.d.ts +1 -1
  31. package/types/components/Icon/utils.d.ts +1 -1
  32. package/types/components/Switch/SelectorSwitch/Option.d.ts +4 -1
  33. package/types/components/Switch/SelectorSwitch/StyledSelectorSwitch.d.ts +15 -9
  34. package/types/components/Switch/SelectorSwitch/index.d.ts +1 -1
  35. package/types/theme/components/fab.d.ts +4 -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,19 +2348,15 @@ 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,
2359
+ containerPadding: theme.space.large - theme.space.xsmall,
2362
2360
  titleMarginHorizontal: theme.space.small
2363
2361
  };
2364
2362
  var radii = {
@@ -6228,7 +6226,7 @@ var Typography = {
6228
6226
  };
6229
6227
 
6230
6228
  // 🔴 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'];
6229
+ 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
6230
 
6233
6231
  var activate = 59000;
6234
6232
  var adjustment = 59003;
@@ -6305,18 +6303,18 @@ var add = 59181;
6305
6303
  var bold = 59203;
6306
6304
  var cancel = 59215;
6307
6305
  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;
6306
+ var italic = 59302;
6307
+ var number = 59326;
6308
+ var percentage = 59331;
6309
+ var redeem = 59340;
6310
+ var refresh = 59341;
6311
+ var remove = 59342;
6312
+ var restart = 59344;
6313
+ var strikethrough = 59365;
6314
+ var sync = 59371;
6315
+ var transfer = 59378;
6316
+ var unavailable = 59381;
6317
+ var underline = 59382;
6320
6318
  var glyphMap = {
6321
6319
  activate: activate,
6322
6320
  "add-emoji": 59001,
@@ -6572,145 +6570,146 @@ var glyphMap = {
6572
6570
  "double-buildings-outlined": 59251,
6573
6571
  "double-left-arrows": 59252,
6574
6572
  "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,
6573
+ "download-box-outlined": 59254,
6574
+ "download-outlined": 59255,
6575
+ "edit-template-outlined": 59256,
6576
+ "email-outlined": 59257,
6577
+ "enter-arrow": 59258,
6578
+ "envelope-outlined": 59259,
6579
+ "expense-outlined": 59260,
6580
+ "explore-outlined": 59261,
6581
+ "external-link": 59262,
6582
+ "eye-invisible-outlined": 59263,
6583
+ "eye-outlined": 59264,
6584
+ "face-id": 59265,
6585
+ "face-meh-outlined": 59266,
6586
+ "face-open-smiley-outlined": 59267,
6587
+ "face-sad-outlined": 59268,
6588
+ "face-smiley-outlined": 59269,
6589
+ "fastfood-outlined": 59270,
6590
+ "feed-outlined": 59271,
6591
+ "file-certified-outlined": 59272,
6592
+ "file-clone-outlined": 59273,
6593
+ "file-copy-outlined": 59274,
6594
+ "file-dispose-outlined": 59275,
6595
+ "file-dollar-certified-outlined": 59276,
6596
+ "file-dollar-outlined": 59277,
6597
+ "file-download-outlined": 59278,
6598
+ "file-export-outlined": 59279,
6599
+ "file-lock-outlined": 59280,
6600
+ "file-outlined": 59281,
6601
+ "file-search-outlined": 59282,
6602
+ "file-secured-outlined": 59283,
6603
+ "file-statutory-outlined": 59284,
6604
+ "file-verified-outlined": 59285,
6605
+ "filter-outlined": 59286,
6606
+ "folder-outlined": 59287,
6607
+ "folder-user-outlined": 59288,
6608
+ "form-outlined": 59289,
6609
+ "funnel-filter-outline": 59290,
6610
+ "graph-outlined": 59291,
6611
+ "hand-holding-user-outlined": 59292,
6612
+ "happy-sun-outlined": 59293,
6613
+ "health-bag-outlined": 59294,
6614
+ "heart-outlined": 59295,
6615
+ "home-active-outlined": 59296,
6616
+ "home-outlined": 59297,
6617
+ "id-card-outlined": 59298,
6618
+ "image-outlined": 59299,
6619
+ "import-outlined": 59300,
6620
+ "instapay-outlined": 59301,
6622
6621
  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,
6622
+ "link-1": 59303,
6623
+ "link-2": 59304,
6624
+ "list-outlined": 59305,
6625
+ "live-help-outlined": 59306,
6626
+ "location-on-outlined": 59307,
6627
+ "location-outlined": 59308,
6628
+ "lock-outlined": 59309,
6629
+ "locked-file-outlined": 59310,
6630
+ "log-out": 59311,
6631
+ "media-content-outlined": 59312,
6632
+ "menu-close": 59313,
6633
+ "menu-expand": 59314,
6634
+ "menu-fold-outlined": 59315,
6635
+ "menu-unfold-outlined": 59316,
6636
+ "moneybag-outlined": 59317,
6637
+ "moon-outlined": 59318,
6638
+ "more-horizontal": 59319,
6639
+ "more-vertical": 59320,
6640
+ "multiple-folders-outlined": 59321,
6641
+ "multiple-users-outlined": 59322,
6642
+ "near-me-outlined": 59323,
6643
+ "node-outlined": 59324,
6644
+ "number-points": 59325,
6646
6645
  number: number,
6647
- "overview-outlined": 59326,
6648
- "payment-summary-outlined": 59327,
6649
- "payslip-outlined": 59328,
6650
- "pencil-outlined": 59329,
6646
+ "overview-outlined": 59327,
6647
+ "payment-summary-outlined": 59328,
6648
+ "payslip-outlined": 59329,
6649
+ "pencil-outlined": 59330,
6651
6650
  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,
6651
+ "phone-outlined": 59332,
6652
+ "piggy-bank-outlined": 59333,
6653
+ "plane-outlined": 59334,
6654
+ "play-circle-outlined": 59335,
6655
+ "print-outlined": 59336,
6656
+ "qr-code-outlined": 59337,
6657
+ "qualification-outlined": 59338,
6658
+ "re-assign": 59339,
6660
6659
  redeem: redeem,
6661
6660
  refresh: refresh,
6662
6661
  remove: remove,
6663
- "reply-outlined": 59342,
6662
+ "reply-outlined": 59343,
6664
6663
  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,
6664
+ "return-arrow": 59345,
6665
+ "rostering-outlined": 59346,
6666
+ "save-outlined": 59347,
6667
+ "schedule-outlined": 59348,
6668
+ "search-outlined": 59349,
6669
+ "search-secured-outlined": 59350,
6670
+ "send-outlined": 59351,
6671
+ "share-1": 59352,
6672
+ "share-2": 59353,
6673
+ "share-outlined": 59354,
6674
+ "show-chart-outlined": 59355,
6675
+ "single-down-arrow": 59356,
6676
+ "single-left-arrow": 59357,
6677
+ "single-right-arrow": 59358,
6678
+ "single-up-arrow": 59359,
6679
+ "speaker-active-outlined": 59360,
6680
+ "speaker-outlined": 59361,
6681
+ "star-circle-outlined": 59362,
6682
+ "star-outlined": 59363,
6683
+ "stopwatch-outlined": 59364,
6685
6684
  strikethrough: strikethrough,
6686
- "styler-outlined": 59365,
6687
- "suitcase-clock-outlined": 59366,
6688
- "suitcase-outlined": 59367,
6689
- "survey-outlined": 59368,
6690
- "switch-outlined": 59369,
6685
+ "styler-outlined": 59366,
6686
+ "suitcase-clock-outlined": 59367,
6687
+ "suitcase-outlined": 59368,
6688
+ "survey-outlined": 59369,
6689
+ "switch-outlined": 59370,
6691
6690
  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,
6691
+ "tag-outlined": 59372,
6692
+ "target-outlined": 59373,
6693
+ "tennis-outlined": 59374,
6694
+ "ticket-outlined": 59375,
6695
+ "timesheet-outlined": 59376,
6696
+ "today-outlined": 59377,
6698
6697
  transfer: transfer,
6699
- "trash-bin-outlined": 59378,
6700
- "umbrela-outlined": 59379,
6698
+ "trash-bin-outlined": 59379,
6699
+ "umbrela-outlined": 59380,
6701
6700
  unavailable: unavailable,
6702
6701
  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
6702
+ "union-outlined": 59383,
6703
+ "unlock-outlined": 59384,
6704
+ "upload-outlined": 59385,
6705
+ "user-circle-outlined": 59386,
6706
+ "user-gear-outlined": 59387,
6707
+ "user-outlined": 59388,
6708
+ "user-rectangle-outlined": 59389,
6709
+ "video-1-outlined": 59390,
6710
+ "video-2-outlined": 59391,
6711
+ "volunteer-outlined": 59392,
6712
+ "wallet-outlined": 59393
6714
6713
  };
6715
6714
 
6716
6715
  var HeroIcon = reactNativeVectorIcons.createIconSet(glyphMap, 'hero-icons-mobile', 'hero-icons-mobile.ttf');
@@ -12903,8 +12902,7 @@ var StyledFAB$1 = index$a(reactNative.TouchableHighlight)(function (_ref) {
12903
12902
  alignItems: 'center',
12904
12903
  justifyContent: 'center',
12905
12904
  alignSelf: 'flex-start',
12906
- paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
12907
- paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
12905
+ padding: theme.__hd__.fab.space.containerPadding,
12908
12906
  flexDirection: 'row',
12909
12907
  elevation: theme.__hd__.fab.shadows.elevation,
12910
12908
  shadowColor: theme.__hd__.fab.colors.shadow,
@@ -12934,6 +12932,15 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
12934
12932
  marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
12935
12933
  };
12936
12934
  });
12935
+ var StyledIconContainer = index$a(Box)(function (_ref4) {
12936
+ var theme = _ref4.theme;
12937
+ return {
12938
+ width: theme.__hd__.fab.sizes.iconContainerWidth,
12939
+ height: theme.__hd__.fab.sizes.iconContainerHeight,
12940
+ justifyContent: 'center',
12941
+ alignItems: 'center'
12942
+ };
12943
+ });
12937
12944
 
12938
12945
  var _excluded$b = ["active"];
12939
12946
  var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
@@ -12944,7 +12951,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
12944
12951
  React.useEffect(function () {
12945
12952
  var animation = reactNative.Animated.timing(rotateAnimation.current, {
12946
12953
  toValue: active ? 1 : 0,
12947
- useNativeDriver: true
12954
+ useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
12955
+ easing: reactNative.Easing.inOut(reactNative.Easing.ease),
12956
+ duration: 300
12948
12957
  });
12949
12958
  animation.start();
12950
12959
  return function () {
@@ -12961,7 +12970,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
12961
12970
  rotate: interpolatedRotateAnimation
12962
12971
  }]
12963
12972
  }])
12964
- }, /*#__PURE__*/React__default["default"].createElement(AnimatedIcons, iconProps));
12973
+ }, /*#__PURE__*/React__default["default"].createElement(AnimatedIcons, _extends$1({
12974
+ size: "xsmall"
12975
+ }, iconProps)));
12965
12976
  };
12966
12977
 
12967
12978
  var IconOnlyContent = function IconOnlyContent(_ref) {
@@ -12969,11 +12980,11 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
12969
12980
  animated = _ref.animated,
12970
12981
  active = _ref.active;
12971
12982
  if (animated) {
12972
- return /*#__PURE__*/React__default["default"].createElement(AnimatedFABIcon, {
12983
+ return /*#__PURE__*/React__default["default"].createElement(StyledIconContainer, null, /*#__PURE__*/React__default["default"].createElement(AnimatedFABIcon, {
12973
12984
  active: active,
12974
12985
  icon: icon,
12975
12986
  testID: "animated-fab-icon"
12976
- });
12987
+ }));
12977
12988
  }
12978
12989
  return /*#__PURE__*/React__default["default"].createElement(StyledFABIcon, {
12979
12990
  icon: icon,
@@ -12983,11 +12994,11 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
12983
12994
  var IconWithTextContent = function IconWithTextContent(_ref2) {
12984
12995
  var icon = _ref2.icon,
12985
12996
  title = _ref2.title;
12986
- return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledFABIcon, {
12997
+ 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
12998
  size: "xsmall",
12988
12999
  icon: icon,
12989
13000
  testID: "styled-fab-icon"
12990
- }), /*#__PURE__*/React__default["default"].createElement(StyledFABText, null, title));
13001
+ })), /*#__PURE__*/React__default["default"].createElement(StyledFABText, null, title));
12991
13002
  };
12992
13003
  var FAB = function FAB(_ref3) {
12993
13004
  var onPress = _ref3.onPress,
@@ -13017,10 +13028,7 @@ var FAB = function FAB(_ref3) {
13017
13028
  var StyledActionItem = index$a(reactNative.TouchableHighlight)(function (_ref) {
13018
13029
  var theme = _ref.theme;
13019
13030
  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,
13031
+ padding: theme.__hd__.fab.space.actionItemPadding,
13024
13032
  margin: theme.__hd__.fab.space.actionItemMargin,
13025
13033
  marginRight: theme.__hd__.fab.space.actionItemMarginRight,
13026
13034
  backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
@@ -13060,9 +13068,10 @@ var ActionItem = function ActionItem(_ref) {
13060
13068
  style: style,
13061
13069
  onPress: onPress,
13062
13070
  testID: testID
13063
- }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
13071
+ }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledIconContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
13072
+ size: "xsmall",
13064
13073
  icon: icon
13065
- }), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title)));
13074
+ })), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title)));
13066
13075
  };
13067
13076
 
13068
13077
  var StyledContainer$2 = index$a(reactNative.View)({
@@ -13118,7 +13127,7 @@ var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
13118
13127
  style: style
13119
13128
  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
13120
13129
  return /*#__PURE__*/React__default["default"].createElement(ActionItem, _extends$1({
13121
- key: itemProp.icon
13130
+ key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)
13122
13131
  }, itemProp));
13123
13132
  }));
13124
13133
  };
@@ -13136,7 +13145,8 @@ var ActionGroup = function ActionGroup(_ref2) {
13136
13145
  React.useEffect(function () {
13137
13146
  var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
13138
13147
  toValue: active ? 1 : 0,
13139
- useNativeDriver: true
13148
+ useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
13149
+ easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
13140
13150
  });
13141
13151
  animation.start();
13142
13152
  }, [active]);
@@ -15072,6 +15082,7 @@ var Success = function Success(props) {
15072
15082
  return /*#__PURE__*/React__default["default"].createElement(SuccessPage, props);
15073
15083
  };
15074
15084
 
15085
+ var AnimatedView = reactNative.Animated.createAnimatedComponent(reactNative.View);
15075
15086
  var StyledWrapper$1 = index$a(reactNative.View)(function (_ref) {
15076
15087
  var theme = _ref.theme;
15077
15088
  return {
@@ -15080,25 +15091,39 @@ var StyledWrapper$1 = index$a(reactNative.View)(function (_ref) {
15080
15091
  height: theme.__hd__["switch"].sizes.selector.height,
15081
15092
  borderRadius: theme.__hd__["switch"].radii.selector["default"],
15082
15093
  backgroundColor: theme.__hd__["switch"].colors.selector.background,
15083
- padding: theme.__hd__["switch"].spaces.selector.wrapperPadding
15094
+ padding: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15095
+ position: 'relative'
15084
15096
  };
15085
15097
  });
15086
- var StyledTextWrapper = index$a(reactNative.View)(function (_ref2) {
15098
+ var StyledTextWrapper = index$a(AnimatedView)(function (_ref2) {
15087
15099
  var theme = _ref2.theme;
15088
15100
  return {
15089
15101
  flex: 1,
15090
15102
  borderRadius: theme.__hd__["switch"].radii.selector["default"],
15091
- backgroundColor: theme.__hd__["switch"].colors.selector.textBackground,
15092
15103
  justifyContent: 'center',
15093
- alignItems: 'center'
15104
+ alignItems: 'center',
15105
+ zIndex: 1
15094
15106
  };
15095
15107
  });
15096
- var StyledIconWrapper = index$a(reactNative.View)(function (_ref3) {
15108
+ var StyledIconWrapper = index$a(AnimatedView)(function (_ref3) {
15097
15109
  var theme = _ref3.theme;
15098
15110
  return {
15099
15111
  paddingHorizontal: theme.__hd__["switch"].spaces.selector.iconPadding,
15100
15112
  justifyContent: 'center',
15101
- alignItems: 'center'
15113
+ alignItems: 'center',
15114
+ zIndex: 1
15115
+ };
15116
+ });
15117
+ var StyledKnot$1 = index$a(AnimatedView)(function (_ref4) {
15118
+ var theme = _ref4.theme;
15119
+ return {
15120
+ borderRadius: theme.__hd__["switch"].radii.selector["default"],
15121
+ backgroundColor: theme.__hd__["switch"].colors.selector.textBackground,
15122
+ position: 'absolute',
15123
+ top: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15124
+ bottom: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15125
+ left: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15126
+ right: theme.__hd__["switch"].spaces.selector.wrapperPadding
15102
15127
  };
15103
15128
  });
15104
15129
 
@@ -15124,16 +15149,46 @@ var Option = function Option(_ref2) {
15124
15149
  var text = _ref2.text,
15125
15150
  icon = _ref2.icon,
15126
15151
  badge = _ref2.badge,
15127
- selected = _ref2.selected;
15152
+ selected = _ref2.selected,
15153
+ onLayout = _ref2.onLayout,
15154
+ _ref2$index = _ref2.index,
15155
+ index = _ref2$index === void 0 ? 0 : _ref2$index;
15156
+ var animatedValue = React.useRef(new reactNative.Animated.Value(1)).current;
15157
+ var translateX = animatedValue.interpolate({
15158
+ inputRange: [0, 1],
15159
+ outputRange: index === 1 ? [-5, 0] : [5, 0]
15160
+ });
15161
+ React.useEffect(function () {
15162
+ reactNative.Animated.timing(animatedValue, {
15163
+ toValue: selected ? 1 : 0,
15164
+ duration: 200,
15165
+ easing: reactNative.Easing.linear,
15166
+ useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android'
15167
+ }).start();
15168
+ }, [selected]);
15128
15169
  if (selected) {
15129
- return /*#__PURE__*/React__default["default"].createElement(StyledTextWrapper, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
15170
+ return /*#__PURE__*/React__default["default"].createElement(StyledTextWrapper, {
15171
+ style: {
15172
+ transform: [{
15173
+ translateX: translateX
15174
+ }]
15175
+ },
15176
+ onLayout: onLayout
15177
+ }, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
15130
15178
  content: /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
15131
15179
  fontSize: "large"
15132
15180
  }, text),
15133
15181
  badge: badge
15134
15182
  }));
15135
15183
  }
15136
- return /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, null, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
15184
+ return /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper, {
15185
+ style: {
15186
+ transform: [{
15187
+ translateX: translateX
15188
+ }]
15189
+ },
15190
+ onLayout: onLayout
15191
+ }, /*#__PURE__*/React__default["default"].createElement(OptionContent, {
15137
15192
  content: /*#__PURE__*/React__default["default"].createElement(Icon, {
15138
15193
  icon: icon
15139
15194
  }),
@@ -15144,25 +15199,65 @@ var Option = function Option(_ref2) {
15144
15199
  var SelectorSwitch = function SelectorSwitch(_ref) {
15145
15200
  var options = _ref.options,
15146
15201
  value = _ref.value,
15147
- onPress = _ref.onPress,
15202
+ _onPress = _ref.onPress,
15148
15203
  style = _ref.style,
15149
15204
  testID = _ref.testID;
15205
+ var theme = useTheme$1();
15206
+ var _useState = React.useState(0),
15207
+ _useState2 = _slicedToArray(_useState, 2),
15208
+ knotWidth = _useState2[0],
15209
+ setKnotWidth = _useState2[1];
15210
+ var _useState3 = React.useState(0),
15211
+ _useState4 = _slicedToArray(_useState3, 2),
15212
+ containerWidth = _useState4[0],
15213
+ setContainerWidth = _useState4[1];
15214
+ var animatedValue = React.useRef(new reactNative.Animated.Value(0)).current;
15215
+ var translateX = animatedValue.interpolate({
15216
+ inputRange: [0, 1],
15217
+ outputRange: [0, Math.floor(containerWidth - knotWidth - theme.space.small)]
15218
+ });
15219
+ React.useEffect(function () {
15220
+ reactNative.Animated.timing(animatedValue, {
15221
+ toValue: value === options[0].value ? 0 : 1,
15222
+ duration: 200,
15223
+ easing: reactNative.Easing.inOut(reactNative.Easing.ease),
15224
+ useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android'
15225
+ }).start();
15226
+ }, [value]);
15227
+ var onContainerLayout = React.useCallback(function (e) {
15228
+ setContainerWidth(e.nativeEvent.layout.width);
15229
+ }, [options]);
15230
+ var onItemLayout = React.useCallback(function (e, optionValue) {
15231
+ if (optionValue === value) {
15232
+ setKnotWidth(e.nativeEvent.layout.width);
15233
+ }
15234
+ }, [value]);
15150
15235
  return /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableWithoutFeedback, {
15151
- onPress: onPress !== undefined ? function () {
15152
- return onPress(value);
15153
- } : undefined,
15236
+ onPress: function onPress() {
15237
+ return _onPress === null || _onPress === void 0 ? void 0 : _onPress(value);
15238
+ },
15154
15239
  testID: testID
15155
15240
  }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, {
15241
+ onLayout: onContainerLayout,
15156
15242
  style: style
15157
15243
  }, options.map(function (opt, index) {
15158
- return (
15159
- /*#__PURE__*/
15244
+ return /*#__PURE__*/React__default["default"].createElement(Option, _extends$1({}, opt, {
15245
+ selected: opt.value === value
15160
15246
  // 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
- );
15247
+ ,
15248
+ key: index,
15249
+ onLayout: function onLayout(e) {
15250
+ return onItemLayout(e, opt.value);
15251
+ },
15252
+ index: index
15253
+ }));
15254
+ }), /*#__PURE__*/React__default["default"].createElement(StyledKnot$1, {
15255
+ style: {
15256
+ width: knotWidth,
15257
+ transform: [{
15258
+ translateX: translateX
15259
+ }]
15260
+ }
15166
15261
  })));
15167
15262
  };
15168
15263
 
@@ -15220,6 +15315,7 @@ var Switch = function Switch(_ref2) {
15220
15315
  reactNative.Animated.timing(animatedOffset, {
15221
15316
  toValue: offset,
15222
15317
  easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
15318
+ duration: 200,
15223
15319
  useNativeDriver: false
15224
15320
  }).start();
15225
15321
  }, [checked]);