@hero-design/rn 8.25.3 → 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/es/index.js CHANGED
@@ -2279,7 +2279,7 @@ var getFABTheme = function getFABTheme(theme) {
2279
2279
  buttonPressedBackground: theme.colors.pressedSurface,
2280
2280
  icon: theme.colors.onPrimary,
2281
2281
  headerText: theme.colors.onDefaultGlobalSurface,
2282
- actionItemBackground: theme.colors.primary,
2282
+ actionItemBackground: theme.colors.secondary,
2283
2283
  actionItemPressedBackground: theme.colors.pressedSurface,
2284
2284
  backdropBackground: theme.colors.overlayGlobalSurface,
2285
2285
  titleText: theme.colors.onPrimary,
@@ -2288,7 +2288,9 @@ var getFABTheme = function getFABTheme(theme) {
2288
2288
  };
2289
2289
  var sizes = {
2290
2290
  width: theme.sizes.xxxxxlarge,
2291
- height: theme.sizes.xxxxxlarge
2291
+ height: theme.sizes.xxxxxlarge,
2292
+ iconContainerWidth: theme.sizes.large,
2293
+ iconContainerHeight: theme.sizes.large
2292
2294
  };
2293
2295
  var fonts = {
2294
2296
  header: theme.fonts.neutral.semiBold,
@@ -2297,7 +2299,7 @@ var getFABTheme = function getFABTheme(theme) {
2297
2299
  };
2298
2300
  var fontSizes = {
2299
2301
  header: theme.fontSizes.xxxlarge,
2300
- actionItemText: theme.fontSizes.medium,
2302
+ actionItemText: theme.fontSizes.large,
2301
2303
  title: theme.fontSizes.large
2302
2304
  };
2303
2305
  var lineHeights = {
@@ -2316,19 +2318,15 @@ var getFABTheme = function getFABTheme(theme) {
2316
2318
  elevation: 2
2317
2319
  };
2318
2320
  var space = {
2319
- actionItemPaddingLeft: theme.space.medium,
2320
- actionItemPaddingRight: theme.space.medium,
2321
- actionItemPaddingTop: theme.space.small,
2322
- actionItemPaddingBottom: theme.space.small,
2321
+ actionItemPadding: theme.space.smallMedium,
2323
2322
  actionItemMargin: theme.space.small,
2324
2323
  actionItemMarginRight: theme.space.large,
2325
- actionItemTextPaddingLeft: theme.space.small,
2324
+ actionItemTextPaddingLeft: theme.space.xsmall,
2326
2325
  buttonMarginTop: theme.space.large,
2327
2326
  buttonMarginRight: theme.space.large,
2328
2327
  headerTextMarginRight: theme.space.large,
2329
2328
  headerTextMarginBottom: theme.space.large,
2330
- containerPaddingHorizontal: theme.space.medium,
2331
- containerPaddingVertical: theme.space.medium,
2329
+ containerPadding: theme.space.large - theme.space.xsmall,
2332
2330
  titleMarginHorizontal: theme.space.small
2333
2331
  };
2334
2332
  var radii = {
@@ -6198,7 +6196,7 @@ var Typography = {
6198
6196
  };
6199
6197
 
6200
6198
  // 🔴 DO NOT EDIT — This file is generated automatically.
6201
- 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'];
6199
+ 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'];
6202
6200
 
6203
6201
  var activate = 59000;
6204
6202
  var adjustment = 59003;
@@ -6275,18 +6273,18 @@ var add = 59181;
6275
6273
  var bold = 59203;
6276
6274
  var cancel = 59215;
6277
6275
  var checkmark = 59220;
6278
- var italic = 59301;
6279
- var number = 59325;
6280
- var percentage = 59330;
6281
- var redeem = 59339;
6282
- var refresh = 59340;
6283
- var remove = 59341;
6284
- var restart = 59343;
6285
- var strikethrough = 59364;
6286
- var sync = 59370;
6287
- var transfer = 59377;
6288
- var unavailable = 59380;
6289
- var underline = 59381;
6276
+ var italic = 59302;
6277
+ var number = 59326;
6278
+ var percentage = 59331;
6279
+ var redeem = 59340;
6280
+ var refresh = 59341;
6281
+ var remove = 59342;
6282
+ var restart = 59344;
6283
+ var strikethrough = 59365;
6284
+ var sync = 59371;
6285
+ var transfer = 59378;
6286
+ var unavailable = 59381;
6287
+ var underline = 59382;
6290
6288
  var glyphMap = {
6291
6289
  activate: activate,
6292
6290
  "add-emoji": 59001,
@@ -6542,145 +6540,146 @@ var glyphMap = {
6542
6540
  "double-buildings-outlined": 59251,
6543
6541
  "double-left-arrows": 59252,
6544
6542
  "double-right-arrows": 59253,
6545
- "download-outlined": 59254,
6546
- "edit-template-outlined": 59255,
6547
- "email-outlined": 59256,
6548
- "enter-arrow": 59257,
6549
- "envelope-outlined": 59258,
6550
- "expense-outlined": 59259,
6551
- "explore-outlined": 59260,
6552
- "external-link": 59261,
6553
- "eye-invisible-outlined": 59262,
6554
- "eye-outlined": 59263,
6555
- "face-id": 59264,
6556
- "face-meh-outlined": 59265,
6557
- "face-open-smiley-outlined": 59266,
6558
- "face-sad-outlined": 59267,
6559
- "face-smiley-outlined": 59268,
6560
- "fastfood-outlined": 59269,
6561
- "feed-outlined": 59270,
6562
- "file-certified-outlined": 59271,
6563
- "file-clone-outlined": 59272,
6564
- "file-copy-outlined": 59273,
6565
- "file-dispose-outlined": 59274,
6566
- "file-dollar-certified-outlined": 59275,
6567
- "file-dollar-outlined": 59276,
6568
- "file-download-outlined": 59277,
6569
- "file-export-outlined": 59278,
6570
- "file-lock-outlined": 59279,
6571
- "file-outlined": 59280,
6572
- "file-search-outlined": 59281,
6573
- "file-secured-outlined": 59282,
6574
- "file-statutory-outlined": 59283,
6575
- "file-verified-outlined": 59284,
6576
- "filter-outlined": 59285,
6577
- "folder-outlined": 59286,
6578
- "folder-user-outlined": 59287,
6579
- "form-outlined": 59288,
6580
- "funnel-filter-outline": 59289,
6581
- "graph-outlined": 59290,
6582
- "hand-holding-user-outlined": 59291,
6583
- "happy-sun-outlined": 59292,
6584
- "health-bag-outlined": 59293,
6585
- "heart-outlined": 59294,
6586
- "home-active-outlined": 59295,
6587
- "home-outlined": 59296,
6588
- "id-card-outlined": 59297,
6589
- "image-outlined": 59298,
6590
- "import-outlined": 59299,
6591
- "instapay-outlined": 59300,
6543
+ "download-box-outlined": 59254,
6544
+ "download-outlined": 59255,
6545
+ "edit-template-outlined": 59256,
6546
+ "email-outlined": 59257,
6547
+ "enter-arrow": 59258,
6548
+ "envelope-outlined": 59259,
6549
+ "expense-outlined": 59260,
6550
+ "explore-outlined": 59261,
6551
+ "external-link": 59262,
6552
+ "eye-invisible-outlined": 59263,
6553
+ "eye-outlined": 59264,
6554
+ "face-id": 59265,
6555
+ "face-meh-outlined": 59266,
6556
+ "face-open-smiley-outlined": 59267,
6557
+ "face-sad-outlined": 59268,
6558
+ "face-smiley-outlined": 59269,
6559
+ "fastfood-outlined": 59270,
6560
+ "feed-outlined": 59271,
6561
+ "file-certified-outlined": 59272,
6562
+ "file-clone-outlined": 59273,
6563
+ "file-copy-outlined": 59274,
6564
+ "file-dispose-outlined": 59275,
6565
+ "file-dollar-certified-outlined": 59276,
6566
+ "file-dollar-outlined": 59277,
6567
+ "file-download-outlined": 59278,
6568
+ "file-export-outlined": 59279,
6569
+ "file-lock-outlined": 59280,
6570
+ "file-outlined": 59281,
6571
+ "file-search-outlined": 59282,
6572
+ "file-secured-outlined": 59283,
6573
+ "file-statutory-outlined": 59284,
6574
+ "file-verified-outlined": 59285,
6575
+ "filter-outlined": 59286,
6576
+ "folder-outlined": 59287,
6577
+ "folder-user-outlined": 59288,
6578
+ "form-outlined": 59289,
6579
+ "funnel-filter-outline": 59290,
6580
+ "graph-outlined": 59291,
6581
+ "hand-holding-user-outlined": 59292,
6582
+ "happy-sun-outlined": 59293,
6583
+ "health-bag-outlined": 59294,
6584
+ "heart-outlined": 59295,
6585
+ "home-active-outlined": 59296,
6586
+ "home-outlined": 59297,
6587
+ "id-card-outlined": 59298,
6588
+ "image-outlined": 59299,
6589
+ "import-outlined": 59300,
6590
+ "instapay-outlined": 59301,
6592
6591
  italic: italic,
6593
- "link-1": 59302,
6594
- "link-2": 59303,
6595
- "list-outlined": 59304,
6596
- "live-help-outlined": 59305,
6597
- "location-on-outlined": 59306,
6598
- "location-outlined": 59307,
6599
- "lock-outlined": 59308,
6600
- "locked-file-outlined": 59309,
6601
- "log-out": 59310,
6602
- "media-content-outlined": 59311,
6603
- "menu-close": 59312,
6604
- "menu-expand": 59313,
6605
- "menu-fold-outlined": 59314,
6606
- "menu-unfold-outlined": 59315,
6607
- "moneybag-outlined": 59316,
6608
- "moon-outlined": 59317,
6609
- "more-horizontal": 59318,
6610
- "more-vertical": 59319,
6611
- "multiple-folders-outlined": 59320,
6612
- "multiple-users-outlined": 59321,
6613
- "near-me-outlined": 59322,
6614
- "node-outlined": 59323,
6615
- "number-points": 59324,
6592
+ "link-1": 59303,
6593
+ "link-2": 59304,
6594
+ "list-outlined": 59305,
6595
+ "live-help-outlined": 59306,
6596
+ "location-on-outlined": 59307,
6597
+ "location-outlined": 59308,
6598
+ "lock-outlined": 59309,
6599
+ "locked-file-outlined": 59310,
6600
+ "log-out": 59311,
6601
+ "media-content-outlined": 59312,
6602
+ "menu-close": 59313,
6603
+ "menu-expand": 59314,
6604
+ "menu-fold-outlined": 59315,
6605
+ "menu-unfold-outlined": 59316,
6606
+ "moneybag-outlined": 59317,
6607
+ "moon-outlined": 59318,
6608
+ "more-horizontal": 59319,
6609
+ "more-vertical": 59320,
6610
+ "multiple-folders-outlined": 59321,
6611
+ "multiple-users-outlined": 59322,
6612
+ "near-me-outlined": 59323,
6613
+ "node-outlined": 59324,
6614
+ "number-points": 59325,
6616
6615
  number: number,
6617
- "overview-outlined": 59326,
6618
- "payment-summary-outlined": 59327,
6619
- "payslip-outlined": 59328,
6620
- "pencil-outlined": 59329,
6616
+ "overview-outlined": 59327,
6617
+ "payment-summary-outlined": 59328,
6618
+ "payslip-outlined": 59329,
6619
+ "pencil-outlined": 59330,
6621
6620
  percentage: percentage,
6622
- "phone-outlined": 59331,
6623
- "piggy-bank-outlined": 59332,
6624
- "plane-outlined": 59333,
6625
- "play-circle-outlined": 59334,
6626
- "print-outlined": 59335,
6627
- "qr-code-outlined": 59336,
6628
- "qualification-outlined": 59337,
6629
- "re-assign": 59338,
6621
+ "phone-outlined": 59332,
6622
+ "piggy-bank-outlined": 59333,
6623
+ "plane-outlined": 59334,
6624
+ "play-circle-outlined": 59335,
6625
+ "print-outlined": 59336,
6626
+ "qr-code-outlined": 59337,
6627
+ "qualification-outlined": 59338,
6628
+ "re-assign": 59339,
6630
6629
  redeem: redeem,
6631
6630
  refresh: refresh,
6632
6631
  remove: remove,
6633
- "reply-outlined": 59342,
6632
+ "reply-outlined": 59343,
6634
6633
  restart: restart,
6635
- "return-arrow": 59344,
6636
- "rostering-outlined": 59345,
6637
- "save-outlined": 59346,
6638
- "schedule-outlined": 59347,
6639
- "search-outlined": 59348,
6640
- "search-secured-outlined": 59349,
6641
- "send-outlined": 59350,
6642
- "share-1": 59351,
6643
- "share-2": 59352,
6644
- "share-outlined": 59353,
6645
- "show-chart-outlined": 59354,
6646
- "single-down-arrow": 59355,
6647
- "single-left-arrow": 59356,
6648
- "single-right-arrow": 59357,
6649
- "single-up-arrow": 59358,
6650
- "speaker-active-outlined": 59359,
6651
- "speaker-outlined": 59360,
6652
- "star-circle-outlined": 59361,
6653
- "star-outlined": 59362,
6654
- "stopwatch-outlined": 59363,
6634
+ "return-arrow": 59345,
6635
+ "rostering-outlined": 59346,
6636
+ "save-outlined": 59347,
6637
+ "schedule-outlined": 59348,
6638
+ "search-outlined": 59349,
6639
+ "search-secured-outlined": 59350,
6640
+ "send-outlined": 59351,
6641
+ "share-1": 59352,
6642
+ "share-2": 59353,
6643
+ "share-outlined": 59354,
6644
+ "show-chart-outlined": 59355,
6645
+ "single-down-arrow": 59356,
6646
+ "single-left-arrow": 59357,
6647
+ "single-right-arrow": 59358,
6648
+ "single-up-arrow": 59359,
6649
+ "speaker-active-outlined": 59360,
6650
+ "speaker-outlined": 59361,
6651
+ "star-circle-outlined": 59362,
6652
+ "star-outlined": 59363,
6653
+ "stopwatch-outlined": 59364,
6655
6654
  strikethrough: strikethrough,
6656
- "styler-outlined": 59365,
6657
- "suitcase-clock-outlined": 59366,
6658
- "suitcase-outlined": 59367,
6659
- "survey-outlined": 59368,
6660
- "switch-outlined": 59369,
6655
+ "styler-outlined": 59366,
6656
+ "suitcase-clock-outlined": 59367,
6657
+ "suitcase-outlined": 59368,
6658
+ "survey-outlined": 59369,
6659
+ "switch-outlined": 59370,
6661
6660
  sync: sync,
6662
- "tag-outlined": 59371,
6663
- "target-outlined": 59372,
6664
- "tennis-outlined": 59373,
6665
- "ticket-outlined": 59374,
6666
- "timesheet-outlined": 59375,
6667
- "today-outlined": 59376,
6661
+ "tag-outlined": 59372,
6662
+ "target-outlined": 59373,
6663
+ "tennis-outlined": 59374,
6664
+ "ticket-outlined": 59375,
6665
+ "timesheet-outlined": 59376,
6666
+ "today-outlined": 59377,
6668
6667
  transfer: transfer,
6669
- "trash-bin-outlined": 59378,
6670
- "umbrela-outlined": 59379,
6668
+ "trash-bin-outlined": 59379,
6669
+ "umbrela-outlined": 59380,
6671
6670
  unavailable: unavailable,
6672
6671
  underline: underline,
6673
- "union-outlined": 59382,
6674
- "unlock-outlined": 59383,
6675
- "upload-outlined": 59384,
6676
- "user-circle-outlined": 59385,
6677
- "user-gear-outlined": 59386,
6678
- "user-outlined": 59387,
6679
- "user-rectangle-outlined": 59388,
6680
- "video-1-outlined": 59389,
6681
- "video-2-outlined": 59390,
6682
- "volunteer-outlined": 59391,
6683
- "wallet-outlined": 59392
6672
+ "union-outlined": 59383,
6673
+ "unlock-outlined": 59384,
6674
+ "upload-outlined": 59385,
6675
+ "user-circle-outlined": 59386,
6676
+ "user-gear-outlined": 59387,
6677
+ "user-outlined": 59388,
6678
+ "user-rectangle-outlined": 59389,
6679
+ "video-1-outlined": 59390,
6680
+ "video-2-outlined": 59391,
6681
+ "volunteer-outlined": 59392,
6682
+ "wallet-outlined": 59393
6684
6683
  };
6685
6684
 
6686
6685
  var HeroIcon = createIconSet(glyphMap, 'hero-icons-mobile', 'hero-icons-mobile.ttf');
@@ -12873,8 +12872,7 @@ var StyledFAB$1 = index$a(TouchableHighlight)(function (_ref) {
12873
12872
  alignItems: 'center',
12874
12873
  justifyContent: 'center',
12875
12874
  alignSelf: 'flex-start',
12876
- paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
12877
- paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
12875
+ padding: theme.__hd__.fab.space.containerPadding,
12878
12876
  flexDirection: 'row',
12879
12877
  elevation: theme.__hd__.fab.shadows.elevation,
12880
12878
  shadowColor: theme.__hd__.fab.colors.shadow,
@@ -12904,6 +12902,15 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
12904
12902
  marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
12905
12903
  };
12906
12904
  });
12905
+ var StyledIconContainer = index$a(Box)(function (_ref4) {
12906
+ var theme = _ref4.theme;
12907
+ return {
12908
+ width: theme.__hd__.fab.sizes.iconContainerWidth,
12909
+ height: theme.__hd__.fab.sizes.iconContainerHeight,
12910
+ justifyContent: 'center',
12911
+ alignItems: 'center'
12912
+ };
12913
+ });
12907
12914
 
12908
12915
  var _excluded$b = ["active"];
12909
12916
  var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
@@ -12914,7 +12921,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
12914
12921
  useEffect(function () {
12915
12922
  var animation = Animated.timing(rotateAnimation.current, {
12916
12923
  toValue: active ? 1 : 0,
12917
- useNativeDriver: true
12924
+ useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
12925
+ easing: Easing.inOut(Easing.ease),
12926
+ duration: 300
12918
12927
  });
12919
12928
  animation.start();
12920
12929
  return function () {
@@ -12931,7 +12940,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
12931
12940
  rotate: interpolatedRotateAnimation
12932
12941
  }]
12933
12942
  }])
12934
- }, /*#__PURE__*/React.createElement(AnimatedIcons, iconProps));
12943
+ }, /*#__PURE__*/React.createElement(AnimatedIcons, _extends$1({
12944
+ size: "xsmall"
12945
+ }, iconProps)));
12935
12946
  };
12936
12947
 
12937
12948
  var IconOnlyContent = function IconOnlyContent(_ref) {
@@ -12939,11 +12950,11 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
12939
12950
  animated = _ref.animated,
12940
12951
  active = _ref.active;
12941
12952
  if (animated) {
12942
- return /*#__PURE__*/React.createElement(AnimatedFABIcon, {
12953
+ return /*#__PURE__*/React.createElement(StyledIconContainer, null, /*#__PURE__*/React.createElement(AnimatedFABIcon, {
12943
12954
  active: active,
12944
12955
  icon: icon,
12945
12956
  testID: "animated-fab-icon"
12946
- });
12957
+ }));
12947
12958
  }
12948
12959
  return /*#__PURE__*/React.createElement(StyledFABIcon, {
12949
12960
  icon: icon,
@@ -12953,11 +12964,11 @@ var IconOnlyContent = function IconOnlyContent(_ref) {
12953
12964
  var IconWithTextContent = function IconWithTextContent(_ref2) {
12954
12965
  var icon = _ref2.icon,
12955
12966
  title = _ref2.title;
12956
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledFABIcon, {
12967
+ return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledIconContainer, null, /*#__PURE__*/React.createElement(StyledFABIcon, {
12957
12968
  size: "xsmall",
12958
12969
  icon: icon,
12959
12970
  testID: "styled-fab-icon"
12960
- }), /*#__PURE__*/React.createElement(StyledFABText, null, title));
12971
+ })), /*#__PURE__*/React.createElement(StyledFABText, null, title));
12961
12972
  };
12962
12973
  var FAB = function FAB(_ref3) {
12963
12974
  var onPress = _ref3.onPress,
@@ -12987,10 +12998,7 @@ var FAB = function FAB(_ref3) {
12987
12998
  var StyledActionItem = index$a(TouchableHighlight)(function (_ref) {
12988
12999
  var theme = _ref.theme;
12989
13000
  return {
12990
- paddingLeft: theme.__hd__.fab.space.actionItemPaddingLeft,
12991
- paddingRight: theme.__hd__.fab.space.actionItemPaddingRight,
12992
- paddingTop: theme.__hd__.fab.space.actionItemPaddingTop,
12993
- paddingBottom: theme.__hd__.fab.space.actionItemPaddingBottom,
13001
+ padding: theme.__hd__.fab.space.actionItemPadding,
12994
13002
  margin: theme.__hd__.fab.space.actionItemMargin,
12995
13003
  marginRight: theme.__hd__.fab.space.actionItemMarginRight,
12996
13004
  backgroundColor: theme.__hd__.fab.colors.actionItemBackground,
@@ -13030,9 +13038,10 @@ var ActionItem = function ActionItem(_ref) {
13030
13038
  style: style,
13031
13039
  onPress: onPress,
13032
13040
  testID: testID
13033
- }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledIcon, {
13041
+ }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledIconContainer, null, /*#__PURE__*/React.createElement(StyledIcon, {
13042
+ size: "xsmall",
13034
13043
  icon: icon
13035
- }), /*#__PURE__*/React.createElement(StyledActionItemText, null, title)));
13044
+ })), /*#__PURE__*/React.createElement(StyledActionItemText, null, title)));
13036
13045
  };
13037
13046
 
13038
13047
  var StyledContainer$2 = index$a(View)({
@@ -13088,7 +13097,7 @@ var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
13088
13097
  style: style
13089
13098
  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
13090
13099
  return /*#__PURE__*/React.createElement(ActionItem, _extends$1({
13091
- key: itemProp.icon
13100
+ key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)
13092
13101
  }, itemProp));
13093
13102
  }));
13094
13103
  };
@@ -13106,7 +13115,8 @@ var ActionGroup = function ActionGroup(_ref2) {
13106
13115
  useEffect(function () {
13107
13116
  var animation = Animated.timing(tranlateXAnimation.current, {
13108
13117
  toValue: active ? 1 : 0,
13109
- useNativeDriver: true
13118
+ useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
13119
+ easing: Easing.inOut(Easing.cubic)
13110
13120
  });
13111
13121
  animation.start();
13112
13122
  }, [active]);
@@ -15042,6 +15052,7 @@ var Success = function Success(props) {
15042
15052
  return /*#__PURE__*/React.createElement(SuccessPage, props);
15043
15053
  };
15044
15054
 
15055
+ var AnimatedView = Animated.createAnimatedComponent(View);
15045
15056
  var StyledWrapper$1 = index$a(View)(function (_ref) {
15046
15057
  var theme = _ref.theme;
15047
15058
  return {
@@ -15050,25 +15061,39 @@ var StyledWrapper$1 = index$a(View)(function (_ref) {
15050
15061
  height: theme.__hd__["switch"].sizes.selector.height,
15051
15062
  borderRadius: theme.__hd__["switch"].radii.selector["default"],
15052
15063
  backgroundColor: theme.__hd__["switch"].colors.selector.background,
15053
- padding: theme.__hd__["switch"].spaces.selector.wrapperPadding
15064
+ padding: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15065
+ position: 'relative'
15054
15066
  };
15055
15067
  });
15056
- var StyledTextWrapper = index$a(View)(function (_ref2) {
15068
+ var StyledTextWrapper = index$a(AnimatedView)(function (_ref2) {
15057
15069
  var theme = _ref2.theme;
15058
15070
  return {
15059
15071
  flex: 1,
15060
15072
  borderRadius: theme.__hd__["switch"].radii.selector["default"],
15061
- backgroundColor: theme.__hd__["switch"].colors.selector.textBackground,
15062
15073
  justifyContent: 'center',
15063
- alignItems: 'center'
15074
+ alignItems: 'center',
15075
+ zIndex: 1
15064
15076
  };
15065
15077
  });
15066
- var StyledIconWrapper = index$a(View)(function (_ref3) {
15078
+ var StyledIconWrapper = index$a(AnimatedView)(function (_ref3) {
15067
15079
  var theme = _ref3.theme;
15068
15080
  return {
15069
15081
  paddingHorizontal: theme.__hd__["switch"].spaces.selector.iconPadding,
15070
15082
  justifyContent: 'center',
15071
- alignItems: 'center'
15083
+ alignItems: 'center',
15084
+ zIndex: 1
15085
+ };
15086
+ });
15087
+ var StyledKnot$1 = index$a(AnimatedView)(function (_ref4) {
15088
+ var theme = _ref4.theme;
15089
+ return {
15090
+ borderRadius: theme.__hd__["switch"].radii.selector["default"],
15091
+ backgroundColor: theme.__hd__["switch"].colors.selector.textBackground,
15092
+ position: 'absolute',
15093
+ top: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15094
+ bottom: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15095
+ left: theme.__hd__["switch"].spaces.selector.wrapperPadding,
15096
+ right: theme.__hd__["switch"].spaces.selector.wrapperPadding
15072
15097
  };
15073
15098
  });
15074
15099
 
@@ -15094,16 +15119,46 @@ var Option = function Option(_ref2) {
15094
15119
  var text = _ref2.text,
15095
15120
  icon = _ref2.icon,
15096
15121
  badge = _ref2.badge,
15097
- selected = _ref2.selected;
15122
+ selected = _ref2.selected,
15123
+ onLayout = _ref2.onLayout,
15124
+ _ref2$index = _ref2.index,
15125
+ index = _ref2$index === void 0 ? 0 : _ref2$index;
15126
+ var animatedValue = useRef(new Animated.Value(1)).current;
15127
+ var translateX = animatedValue.interpolate({
15128
+ inputRange: [0, 1],
15129
+ outputRange: index === 1 ? [-5, 0] : [5, 0]
15130
+ });
15131
+ useEffect(function () {
15132
+ Animated.timing(animatedValue, {
15133
+ toValue: selected ? 1 : 0,
15134
+ duration: 200,
15135
+ easing: Easing.linear,
15136
+ useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android'
15137
+ }).start();
15138
+ }, [selected]);
15098
15139
  if (selected) {
15099
- return /*#__PURE__*/React.createElement(StyledTextWrapper, null, /*#__PURE__*/React.createElement(OptionContent, {
15140
+ return /*#__PURE__*/React.createElement(StyledTextWrapper, {
15141
+ style: {
15142
+ transform: [{
15143
+ translateX: translateX
15144
+ }]
15145
+ },
15146
+ onLayout: onLayout
15147
+ }, /*#__PURE__*/React.createElement(OptionContent, {
15100
15148
  content: /*#__PURE__*/React.createElement(Typography.Text, {
15101
15149
  fontSize: "large"
15102
15150
  }, text),
15103
15151
  badge: badge
15104
15152
  }));
15105
15153
  }
15106
- return /*#__PURE__*/React.createElement(StyledIconWrapper, null, /*#__PURE__*/React.createElement(OptionContent, {
15154
+ return /*#__PURE__*/React.createElement(StyledIconWrapper, {
15155
+ style: {
15156
+ transform: [{
15157
+ translateX: translateX
15158
+ }]
15159
+ },
15160
+ onLayout: onLayout
15161
+ }, /*#__PURE__*/React.createElement(OptionContent, {
15107
15162
  content: /*#__PURE__*/React.createElement(Icon, {
15108
15163
  icon: icon
15109
15164
  }),
@@ -15114,25 +15169,65 @@ var Option = function Option(_ref2) {
15114
15169
  var SelectorSwitch = function SelectorSwitch(_ref) {
15115
15170
  var options = _ref.options,
15116
15171
  value = _ref.value,
15117
- onPress = _ref.onPress,
15172
+ _onPress = _ref.onPress,
15118
15173
  style = _ref.style,
15119
15174
  testID = _ref.testID;
15175
+ var theme = useTheme$1();
15176
+ var _useState = useState(0),
15177
+ _useState2 = _slicedToArray(_useState, 2),
15178
+ knotWidth = _useState2[0],
15179
+ setKnotWidth = _useState2[1];
15180
+ var _useState3 = useState(0),
15181
+ _useState4 = _slicedToArray(_useState3, 2),
15182
+ containerWidth = _useState4[0],
15183
+ setContainerWidth = _useState4[1];
15184
+ var animatedValue = useRef(new Animated.Value(0)).current;
15185
+ var translateX = animatedValue.interpolate({
15186
+ inputRange: [0, 1],
15187
+ outputRange: [0, Math.floor(containerWidth - knotWidth - theme.space.small)]
15188
+ });
15189
+ useEffect(function () {
15190
+ Animated.timing(animatedValue, {
15191
+ toValue: value === options[0].value ? 0 : 1,
15192
+ duration: 200,
15193
+ easing: Easing.inOut(Easing.ease),
15194
+ useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android'
15195
+ }).start();
15196
+ }, [value]);
15197
+ var onContainerLayout = useCallback(function (e) {
15198
+ setContainerWidth(e.nativeEvent.layout.width);
15199
+ }, [options]);
15200
+ var onItemLayout = useCallback(function (e, optionValue) {
15201
+ if (optionValue === value) {
15202
+ setKnotWidth(e.nativeEvent.layout.width);
15203
+ }
15204
+ }, [value]);
15120
15205
  return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
15121
- onPress: onPress !== undefined ? function () {
15122
- return onPress(value);
15123
- } : undefined,
15206
+ onPress: function onPress() {
15207
+ return _onPress === null || _onPress === void 0 ? void 0 : _onPress(value);
15208
+ },
15124
15209
  testID: testID
15125
15210
  }, /*#__PURE__*/React.createElement(StyledWrapper$1, {
15211
+ onLayout: onContainerLayout,
15126
15212
  style: style
15127
15213
  }, options.map(function (opt, index) {
15128
- return (
15129
- /*#__PURE__*/
15214
+ return /*#__PURE__*/React.createElement(Option, _extends$1({}, opt, {
15215
+ selected: opt.value === value
15130
15216
  // eslint-disable-next-line react/no-array-index-key
15131
- React.createElement(Option, _extends$1({}, opt, {
15132
- selected: opt.value === value,
15133
- key: index
15134
- }))
15135
- );
15217
+ ,
15218
+ key: index,
15219
+ onLayout: function onLayout(e) {
15220
+ return onItemLayout(e, opt.value);
15221
+ },
15222
+ index: index
15223
+ }));
15224
+ }), /*#__PURE__*/React.createElement(StyledKnot$1, {
15225
+ style: {
15226
+ width: knotWidth,
15227
+ transform: [{
15228
+ translateX: translateX
15229
+ }]
15230
+ }
15136
15231
  })));
15137
15232
  };
15138
15233
 
@@ -15190,6 +15285,7 @@ var Switch = function Switch(_ref2) {
15190
15285
  Animated.timing(animatedOffset, {
15191
15286
  toValue: offset,
15192
15287
  easing: Easing.inOut(Easing.cubic),
15288
+ duration: 200,
15193
15289
  useNativeDriver: false
15194
15290
  }).start();
15195
15291
  }, [checked]);