@hero-design/rn 8.56.1 → 8.57.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.56.1",
+  "version": "8.57.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -73,6 +73,7 @@
     "jest-junit": "^16.0.0",
     "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
+    "react-dom": "^18.2.0",
     "react-native": "0.71.14",
     "react-native-gesture-handler": "~2.5.0",
     "react-native-linear-gradient": "^2.6.2",

package/src/components/Button/StyledButton.tsx

@@ -79,21 +79,7 @@ const genOutlineContainerStyles = (
   };
 };
 
-const genOutlineTextStyles = (
-  theme: Theme,
-  intent: Intent,
-  disabled?: boolean
-): ReactNativeStyle => {
-  if (disabled) {
-    return {
-      color: theme.__hd__.button.colors.disabledText,
-    };
-  }
-
-  return { color: theme.__hd__.button.colors[intent] };
-};
-
-const genTextVariantTextStyles = (
+const genTextStyles = (
   theme: Theme,
   intent: Intent,
   disabled?: boolean
@@ -156,17 +142,17 @@ const StyledButtonText = styled(Typography.Title)<{
           color: theme.__hd__.button.colors.invertedText,
         };
       case 'outlined-primary':
-        return genOutlineTextStyles(theme, 'primary', disabled);
+        return genTextStyles(theme, 'primary', disabled);
       case 'outlined-secondary':
-        return genOutlineTextStyles(theme, 'secondary', disabled);
+        return genTextStyles(theme, 'secondary', disabled);
       case 'outlined-danger':
-        return genOutlineTextStyles(theme, 'danger', disabled);
+        return genTextStyles(theme, 'danger', disabled);
       case 'text-primary':
-        return genTextVariantTextStyles(theme, 'primary', disabled);
+        return genTextStyles(theme, 'primary', disabled);
       case 'text-secondary':
-        return genTextVariantTextStyles(theme, 'secondary', disabled);
+        return genTextStyles(theme, 'secondary', disabled);
       case 'text-danger':
-        return genTextVariantTextStyles(theme, 'danger', disabled);
+        return genTextStyles(theme, 'danger', disabled);
     }
   };
   return {
@@ -183,11 +169,11 @@ const StyledButtonTitleOfVariantText = styled(Typography.Body)<{
   const themeStyling = () => {
     switch (themeButtonVariant) {
       case 'text-primary':
-        return genTextVariantTextStyles(theme, 'primary', disabled);
+        return genTextStyles(theme, 'primary', disabled);
       case 'text-secondary':
-        return genTextVariantTextStyles(theme, 'secondary', disabled);
+        return genTextStyles(theme, 'secondary', disabled);
       case 'text-danger':
-        return genTextVariantTextStyles(theme, 'danger', disabled);
+        return genTextStyles(theme, 'danger', disabled);
     }
   };
   return {
@@ -220,17 +206,17 @@ const StyledButtonIcon = styled(Icon)<{
       case 'filled-danger':
         return { color: theme.__hd__.button.colors.invertedText };
       case 'outlined-primary':
-        return genOutlineTextStyles(theme, 'primary', disabled);
+        return genTextStyles(theme, 'primary', disabled);
       case 'outlined-secondary':
-        return genOutlineTextStyles(theme, 'secondary', disabled);
+        return genTextStyles(theme, 'secondary', disabled);
       case 'outlined-danger':
-        return genOutlineTextStyles(theme, 'danger', disabled);
+        return genTextStyles(theme, 'danger', disabled);
       case 'text-primary':
-        return genTextVariantTextStyles(theme, 'primary', disabled);
+        return genTextStyles(theme, 'primary', disabled);
       case 'text-secondary':
-        return genTextVariantTextStyles(theme, 'secondary', disabled);
+        return genTextStyles(theme, 'secondary', disabled);
       case 'text-danger':
-        return genTextVariantTextStyles(theme, 'danger', disabled);
+        return genTextStyles(theme, 'danger', disabled);
     }
   };
 

package/src/components/Carousel/CardCarousel.tsx

@@ -93,11 +93,10 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     const snapToIndex = useCallback(
       (index: number) => {
         let validIndex = 0;
-        if (index < 0) {
-          validIndex = 0;
-        } else if (index >= items.length) {
+
+        if (index >= items.length) {
           validIndex = items.length - 1;
-        } else {
+        } else if (index >= 0) {
           validIndex = index;
         }
 

package/src/components/Empty/__tests__/__snapshots__/index.spec.tsx.snap

@@ -57,7 +57,7 @@ exports[`Empty renders empty state content correctly 1`] = `
         [
           {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
+            "fontFamily": "RebondGrotesque",
             "fontSize": 18,
             "letterSpacing": 0.54,
             "lineHeight": 26,
@@ -173,7 +173,7 @@ exports[`Empty renders empty state with image correctly 1`] = `
         [
           {
             "color": "#001f23",
-            "fontFamily": "BeVietnamPro-Regular",
+            "fontFamily": "RebondGrotesque",
             "fontSize": 18,
             "letterSpacing": 0.54,
             "lineHeight": 26,

package/src/components/Error/__tests__/__snapshots__/index.spec.tsx.snap

@@ -101,7 +101,7 @@ exports[`Error renders error screen with custom image element correctly 1`] = `
           [
             {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
+              "fontFamily": "RebondGrotesque",
               "fontSize": 18,
               "letterSpacing": 0.54,
               "lineHeight": 26,
@@ -255,7 +255,7 @@ exports[`Error renders error screen with image correctly 1`] = `
           [
             {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
+              "fontFamily": "RebondGrotesque",
               "fontSize": 18,
               "letterSpacing": 0.54,
               "lineHeight": 26,
@@ -441,7 +441,7 @@ exports[`Error renders full screen error page correctly 1`] = `
             [
               {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-Regular",
+                "fontFamily": "RebondGrotesque",
                 "fontSize": 18,
                 "letterSpacing": 0.54,
                 "lineHeight": 26,
@@ -557,7 +557,7 @@ exports[`Error renders title only correctly 1`] = `
           [
             {
               "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
+              "fontFamily": "RebondGrotesque",
               "fontSize": 18,
               "letterSpacing": 0.54,
               "lineHeight": 26,

package/src/components/Icon/HeroIcon/glyphMap.json

@@ -1 +1 @@
-{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark":59013,"box-check":59014,"box":59015,"bpay":59016,"buildings":59017,"cake":59018,"calendar-clock":59019,"calendar":59020,"candy-box-menu":59021,"caret-down-small":59022,"caret-down":59023,"caret-left-small":59024,"caret-left":59025,"caret-right-small":59026,"caret-right":59027,"caret-up-small":59028,"caret-up":59029,"check-radio":59030,"circle-add":59031,"circle-cancel":59032,"circle-check":59033,"circle-down":59034,"circle-info":59035,"circle-left":59036,"circle-ok":59037,"circle-pencil":59038,"circle-question":59039,"circle-remove":59040,"circle-right":59041,"circle-up":59042,"circle-warning":59043,"clock-3":59044,"clock":59045,"cloud-download":59046,"cloud-upload":59047,"cog":59048,"coin":59049,"contacts":59050,"credit-card":59051,"diamond":59052,"direction-arrows":59053,"directory":59054,"document":59055,"dollar-coin-shine":59056,"double-buildings":59057,"edit-template":59058,"envelope":59059,"exclude":59060,"expand-content":59061,"expense":59062,"eye-circle":59063,"eye-invisible":59064,"eye":59065,"face-meh":59066,"face-sad":59067,"face-smiley":59068,"feed":59069,"feedbacks":59070,"file-certified":59071,"file-clone":59072,"file-copy":59073,"file-csv":59074,"file-dispose":59075,"file-doc":59076,"file-excel":59077,"file-export":59078,"file-lock":59079,"file-pdf":59080,"file-powerpoint":59081,"file-search":59082,"file-secured":59083,"file-sheets":59084,"file-slide":59085,"file-verified":59086,"file-word":59087,"file":59088,"filter":59089,"folder-user":59090,"folder":59091,"format-bold":59092,"format-heading1":59093,"format-heading2":59094,"format-italic":59095,"format-list-bulleted":59096,"format-list-numbered":59097,"format-underlined":59098,"funnel-filter":59099,"global-dollar":59100,"globe":59101,"graduation-cap":59102,"graph":59103,"happy-sun":59104,"health-bag":59105,"heart":59106,"hero-points":59107,"home":59108,"image":59109,"import":59110,"incident-siren":59111,"instapay-daily":59112,"instapay-now":59113,"instapay":59114,"list":59115,"loading-2":59116,"loading":59117,"location-on":59118,"location":59119,"lock":59120,"looks-one":59121,"looks-two":59122,"media-content":59123,"menu":59124,"money-notes":59125,"moneybag":59126,"moon":59127,"multiple-stars":59128,"multiple-users":59129,"near-me":59130,"node":59131,"open-folder":59132,"paperclip":59133,"payment-summary":59134,"pencil":59135,"phone":59136,"piggy-bank":59137,"plane-up":59138,"plane":59139,"play-circle":59140,"print":59141,"raising-hands":59142,"reply-arrow":59143,"reply":59144,"reschedule":59145,"rostering":59146,"salary-sacrifice":59147,"save":59148,"schedule-send":59149,"schedule":59150,"search-person":59151,"send":59152,"speaker-active":59153,"speaker":59154,"star-award":59155,"star-badge":59156,"star-circle":59157,"star-medal":59158,"star":59159,"steps-circle":59160,"stopwatch":59161,"suitcase":59162,"surfing":59163,"survey":59164,"swag-pillar-benefit":59165,"swag-pillar-career":59166,"swag-pillar-money":59167,"swag-pillar-work":59168,"swag":59169,"swipe-right":59170,"switch":59171,"tag":59172,"target":59173,"teams":59174,"timesheet":59175,"touch-id":59176,"trash-bin":59177,"unlock":59178,"user":59179,"video-1":59180,"video-2":59181,"wallet":59182,"warning":59183,"activate-outlined":59184,"add-credit-card-outlined":59185,"add-person-outlined":59186,"add-section-outlined":59187,"add-time-outlined":59188,"add":59189,"adjustment-outlined":59190,"ai-outlined":59191,"alignment-2-outlined":59192,"alignment-outlined":59193,"all-caps":59194,"application-outlined":59195,"arrow-down":59196,"arrow-downwards":59197,"arrow-left":59198,"arrow-leftwards":59199,"arrow-right":59200,"arrow-rightwards":59201,"arrow-up":59202,"arrow-upwards":59203,"article-outlined":59204,"at-sign":59205,"auto-graph-outlined":59206,"beer-outlined":59207,"bell-active-outlined":59208,"bell-outlined":59209,"bell-slash-outlined":59210,"bill-management-outlined":59211,"billing-outlined":59212,"body-outlined":59213,"bold":59214,"bolt-outlined":59215,"book-outlined":59216,"bookmark-added-outlined":59217,"bookmark-outlined":59218,"box-check-outlined":59219,"box-outlined":59220,"bullet-points":59221,"cake-outlined":59222,"calendar-dates-outlined":59223,"calendar-star-outlined":59224,"call-outlined":59225,"call-split-outlined":59226,"camera-outlined":59227,"cancel":59228,"car-forward-outlined":59229,"cashback-outlined":59230,"charging-station-outlined":59231,"chat-bubble-outlined":59232,"chat-unread-outlined":59233,"checkmark":59234,"circle-add-outlined":59235,"circle-cancel-outlined":59236,"circle-down-outlined":59237,"circle-info-outlined":59238,"circle-left-outlined":59239,"circle-ok-outlined":59240,"circle-question-outlined":59241,"circle-remove-outlined":59242,"circle-right-outlined":59243,"circle-up-outlined":59244,"circle-warning-outlined":59245,"clock-2-outlined":59246,"clock-outlined":59247,"cog-outlined":59248,"coin-outlined":59249,"coin-super-outlined":59250,"comment-outlined":59251,"contacts-outlined":59252,"contacts-user-outlined":59253,"credit-card-outlined":59254,"cup-outlined":59255,"dentistry-outlined":59256,"direction-arrows-outlined":59257,"directory-outlined":59258,"document-outlined":59259,"dollar-box-outlined":59260,"dollar-card-outlined":59261,"dollar-coin-shine-outlined":59262,"dollar-credit-card-outlined":59263,"dollar-sign":59264,"double-buildings-outlined":59265,"double-left-arrows":59266,"double-right-arrows":59267,"download-box-outlined":59268,"download-outlined":59269,"edit-template-outlined":59270,"email-outlined":59271,"enter-arrow":59272,"envelope-outlined":59273,"expense-approval-outlined":59274,"expense-outlined":59275,"explore-outlined":59276,"extension-outlined":59277,"external-link":59278,"eye-invisible-outlined":59279,"eye-outlined":59280,"face-id":59281,"face-meh-outlined":59282,"face-open-smiley-outlined":59283,"face-sad-outlined":59284,"face-smiley-outlined":59285,"fastfood-outlined":59286,"feed-outlined":59287,"file-certified-outlined":59288,"file-clone-outlined":59289,"file-copy-outlined":59290,"file-dispose-outlined":59291,"file-dollar-certified-outlined":59292,"file-dollar-outlined":59293,"file-download-outlined":59294,"file-export-outlined":59295,"file-lock-outlined":59296,"file-outlined":59297,"file-search-outlined":59298,"file-secured-outlined":59299,"file-statutory-outlined":59300,"file-verified-outlined":59301,"filter-outlined":59302,"folder-outlined":59303,"folder-user-outlined":59304,"form-outlined":59305,"funnel-filter-outline":59306,"goal-outlined":59307,"graph-outlined":59308,"hand-holding-user-outlined":59309,"happy-sun-outlined":59310,"health-bag-outlined":59311,"heart-outlined":59312,"home-active-outlined":59313,"home-outlined":59314,"id-card-outlined":59315,"image-outlined":59316,"import-outlined":59317,"instapay-outlined":59318,"italic":59319,"job-search-outlined":59320,"leave-approval-outlined":59321,"link-1":59322,"link-2":59323,"list-outlined":59324,"live-help-outlined":59325,"location-on-outlined":59326,"location-outlined":59327,"lock-outlined":59328,"locked-file-outlined":59329,"log-out":59330,"mail-outlined":59331,"media-content-outlined":59332,"menu-close":59333,"menu-expand":59334,"menu-fold-outlined":59335,"menu-unfold-outlined":59336,"moneybag-outlined":59337,"moon-outlined":59338,"more-horizontal":59339,"more-vertical":59340,"multiple-folders-outlined":59341,"multiple-users-outlined":59342,"near-me-outlined":59343,"node-outlined":59344,"number-points":59345,"number":59346,"overview-outlined":59347,"payment-summary-outlined":59348,"payslip-outlined":59349,"pencil-outlined":59350,"percentage":59351,"phone-outlined":59352,"piggy-bank-outlined":59353,"plane-outlined":59354,"play-circle-outlined":59355,"print-outlined":59356,"propane-tank-outlined":59357,"qr-code-outlined":59358,"qualification-outlined":59359,"re-assign":59360,"redeem":59361,"refresh":59362,"remove":59363,"reply-outlined":59364,"restart":59365,"resume-outlined":59366,"return-arrow":59367,"rostering-outlined":59368,"safety-outlined":59369,"save-outlined":59370,"schedule-outlined":59371,"search-outlined":59372,"search-secured-outlined":59373,"send-outlined":59374,"share-1":59375,"share-2":59376,"share-outlined":59377,"show-chart-outlined":59378,"single-down-arrow":59379,"single-left-arrow":59380,"single-right-arrow":59381,"single-up-arrow":59382,"smart-match-outlined":59383,"sparkle-outlined":59384,"speaker-active-outlined":59385,"speaker-outlined":59386,"star-circle-outlined":59387,"star-outlined":59388,"stash-outlined":59389,"stopwatch-outlined":59390,"strikethrough":59391,"styler-outlined":59392,"suitcase-clock-outlined":59393,"suitcase-outlined":59394,"survey-outlined":59395,"switch-outlined":59396,"sync":59397,"tag-outlined":59398,"target-outlined":59399,"tennis-outlined":59400,"ticket-outlined":59401,"timesheet-outlined":59402,"timesheets-outlined":59403,"today-outlined":59404,"transfer":59405,"trash-bin-outlined":59406,"umbrela-outlined":59407,"unavailability-outlined":59408,"unavailable":59409,"underline":59410,"union-outlined":59411,"unlock-outlined":59412,"upload-outlined":59413,"user-circle-outlined":59414,"user-gear-outlined":59415,"user-outlined":59416,"user-rectangle-outlined":59417,"video-1-outlined":59418,"video-2-outlined":59419,"volunteer-outlined":59420,"wallet-outlined":59421}
+{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bolt":59011,"bookmark-added":59012,"bookmark":59013,"box-check":59014,"box":59015,"bpay":59016,"buildings":59017,"cake":59018,"calendar-clock":59019,"calendar":59020,"candy-box-menu":59021,"caret-down-small":59022,"caret-down":59023,"caret-left-small":59024,"caret-left":59025,"caret-right-small":59026,"caret-right":59027,"caret-up-small":59028,"caret-up":59029,"check-radio":59030,"circle-add":59031,"circle-cancel":59032,"circle-check":59033,"circle-down":59034,"circle-info":59035,"circle-left":59036,"circle-ok":59037,"circle-pencil":59038,"circle-question":59039,"circle-remove":59040,"circle-right":59041,"circle-up":59042,"circle-warning":59043,"clock-3":59044,"clock":59045,"cloud-download":59046,"cloud-upload":59047,"cog":59048,"coin":59049,"contacts":59050,"credit-card":59051,"diamond":59052,"direction-arrows":59053,"directory":59054,"document":59055,"dollar-coin-shine":59056,"double-buildings":59057,"edit-template":59058,"envelope":59059,"exclude":59060,"expand-content":59061,"expense":59062,"explore_nearby":59063,"eye-circle":59064,"eye-invisible":59065,"eye":59066,"face-meh":59067,"face-sad":59068,"face-smiley":59069,"feed":59070,"feedbacks":59071,"file-certified":59072,"file-clone":59073,"file-copy":59074,"file-csv":59075,"file-dispose":59076,"file-doc":59077,"file-excel":59078,"file-export":59079,"file-lock":59080,"file-pdf":59081,"file-powerpoint":59082,"file-search":59083,"file-secured":59084,"file-sheets":59085,"file-slide":59086,"file-verified":59087,"file-word":59088,"file":59089,"filter":59090,"folder-user":59091,"folder":59092,"format-bold":59093,"format-heading1":59094,"format-heading2":59095,"format-italic":59096,"format-list-bulleted":59097,"format-list-numbered":59098,"format-underlined":59099,"funnel-filter":59100,"global-dollar":59101,"globe":59102,"graduation-cap":59103,"graph":59104,"happy-sun":59105,"health-bag":59106,"heart":59107,"hero-points":59108,"home":59109,"image":59110,"import":59111,"incident-siren":59112,"instapay-daily":59113,"instapay-now":59114,"instapay":59115,"list":59116,"loading-2":59117,"loading":59118,"location-on":59119,"location":59120,"lock":59121,"looks-one":59122,"looks-two":59123,"media-content":59124,"menu":59125,"money-notes":59126,"moneybag":59127,"moon":59128,"multiple-stars":59129,"multiple-users":59130,"near-me":59131,"node":59132,"open-folder":59133,"paperclip":59134,"payment-summary":59135,"pencil":59136,"phone":59137,"piggy-bank":59138,"plane-up":59139,"plane":59140,"play-circle":59141,"print":59142,"raising-hands":59143,"reply-arrow":59144,"reply":59145,"reschedule":59146,"rostering":59147,"salary-sacrifice":59148,"save":59149,"schedule-send":59150,"schedule":59151,"search-person":59152,"send":59153,"speaker-active":59154,"speaker":59155,"star-award":59156,"star-badge":59157,"star-circle":59158,"star-medal":59159,"star":59160,"steps-circle":59161,"stopwatch":59162,"suitcase":59163,"surfing":59164,"survey":59165,"swag-pillar-benefit":59166,"swag-pillar-career":59167,"swag-pillar-money":59168,"swag-pillar-work":59169,"swag":59170,"swipe-right":59171,"switch":59172,"tag":59173,"target":59174,"teams":59175,"timesheet":59176,"touch-id":59177,"trash-bin":59178,"unlock":59179,"user":59180,"video-1":59181,"video-2":59182,"wallet":59183,"warning":59184,"activate-outlined":59185,"add-credit-card-outlined":59186,"add-person-outlined":59187,"add-section-outlined":59188,"add-time-outlined":59189,"add":59190,"adjustment-outlined":59191,"ai-outlined":59192,"alignment-2-outlined":59193,"alignment-outlined":59194,"all-caps":59195,"application-outlined":59196,"arrow-down":59197,"arrow-downwards":59198,"arrow-left":59199,"arrow-leftwards":59200,"arrow-right":59201,"arrow-rightwards":59202,"arrow-up":59203,"arrow-upwards":59204,"article-outlined":59205,"at-sign":59206,"auto-graph-outlined":59207,"beer-outlined":59208,"bell-active-outlined":59209,"bell-outlined":59210,"bell-slash-outlined":59211,"bill-management-outlined":59212,"billing-outlined":59213,"body-outlined":59214,"bold":59215,"bolt-outlined":59216,"book-outlined":59217,"bookmark-added-outlined":59218,"bookmark-outlined":59219,"box-check-outlined":59220,"box-outlined":59221,"bullet-points":59222,"cake-outlined":59223,"calendar-dates-outlined":59224,"calendar-star-outlined":59225,"call-outlined":59226,"call-split-outlined":59227,"camera-outlined":59228,"cancel":59229,"car-forward-outlined":59230,"cashback-outlined":59231,"charging-station-outlined":59232,"chat-bubble-outlined":59233,"chat-unread-outlined":59234,"checkmark":59235,"circle-add-outlined":59236,"circle-cancel-outlined":59237,"circle-down-outlined":59238,"circle-info-outlined":59239,"circle-left-outlined":59240,"circle-ok-outlined":59241,"circle-question-outlined":59242,"circle-remove-outlined":59243,"circle-right-outlined":59244,"circle-up-outlined":59245,"circle-warning-outlined":59246,"clock-2-outlined":59247,"clock-outlined":59248,"cog-outlined":59249,"coin-outlined":59250,"coin-super-outlined":59251,"comment-outlined":59252,"contacts-outlined":59253,"contacts-user-outlined":59254,"credit-card-outlined":59255,"cup-outlined":59256,"dentistry-outlined":59257,"direction-arrows-outlined":59258,"directory-outlined":59259,"document-outlined":59260,"dollar-box-outlined":59261,"dollar-card-outlined":59262,"dollar-coin-shine-outlined":59263,"dollar-credit-card-outlined":59264,"dollar-sign":59265,"double-buildings-outlined":59266,"double-left-arrows":59267,"double-right-arrows":59268,"download-box-outlined":59269,"download-outlined":59270,"edit-template-outlined":59271,"email-outlined":59272,"enter-arrow":59273,"envelope-outlined":59274,"expense-approval-outlined":59275,"expense-outlined":59276,"explore-outlined":59277,"extension-outlined":59278,"external-link":59279,"eye-invisible-outlined":59280,"eye-outlined":59281,"face-id":59282,"face-meh-outlined":59283,"face-open-smiley-outlined":59284,"face-sad-outlined":59285,"face-smiley-outlined":59286,"fastfood-outlined":59287,"feed-outlined":59288,"file-certified-outlined":59289,"file-clone-outlined":59290,"file-copy-outlined":59291,"file-dispose-outlined":59292,"file-dollar-certified-outlined":59293,"file-dollar-outlined":59294,"file-download-outlined":59295,"file-export-outlined":59296,"file-lock-outlined":59297,"file-outlined":59298,"file-search-outlined":59299,"file-secured-outlined":59300,"file-statutory-outlined":59301,"file-verified-outlined":59302,"filter-outlined":59303,"folder-outlined":59304,"folder-user-outlined":59305,"form-outlined":59306,"funnel-filter-outline":59307,"goal-outlined":59308,"graph-outlined":59309,"hand-holding-user-outlined":59310,"happy-sun-outlined":59311,"health-bag-outlined":59312,"heart-outlined":59313,"home-active-outlined":59314,"home-outlined":59315,"id-card-outlined":59316,"image-outlined":59317,"import-outlined":59318,"instapay-outlined":59319,"italic":59320,"job-search-outlined":59321,"leave-approval-outlined":59322,"link-1":59323,"link-2":59324,"list-outlined":59325,"live-help-outlined":59326,"local_mall_outlined":59327,"location-on-outlined":59328,"location-outlined":59329,"lock-outlined":59330,"locked-file-outlined":59331,"log-out":59332,"mail-outlined":59333,"map-outlined":59334,"media-content-outlined":59335,"menu-close":59336,"menu-expand":59337,"menu-fold-outlined":59338,"menu-unfold-outlined":59339,"moneybag-outlined":59340,"moon-outlined":59341,"more-horizontal":59342,"more-vertical":59343,"multiple-folders-outlined":59344,"multiple-users-outlined":59345,"near-me-outlined":59346,"node-outlined":59347,"number-points":59348,"number":59349,"overview-outlined":59350,"payment-summary-outlined":59351,"payslip-outlined":59352,"pencil-outlined":59353,"percentage":59354,"phone-outlined":59355,"piggy-bank-outlined":59356,"plane-outlined":59357,"play-circle-outlined":59358,"print-outlined":59359,"propane-tank-outlined":59360,"qr-code-outlined":59361,"qualification-outlined":59362,"re-assign":59363,"redeem":59364,"refresh":59365,"remove":59366,"reply-outlined":59367,"restart":59368,"resume-outlined":59369,"return-arrow":59370,"rostering-outlined":59371,"safety-outlined":59372,"save-outlined":59373,"schedule-outlined":59374,"search-outlined":59375,"search-secured-outlined":59376,"send-outlined":59377,"share-1":59378,"share-2":59379,"share-outlined":59380,"shopping_basket_outlined":59381,"show-chart-outlined":59382,"single-down-arrow":59383,"single-left-arrow":59384,"single-right-arrow":59385,"single-up-arrow":59386,"smart-match-outlined":59387,"sparkle-outlined":59388,"speaker-active-outlined":59389,"speaker-outlined":59390,"star-circle-outlined":59391,"star-outlined":59392,"stash-outlined":59393,"stopwatch-outlined":59394,"strikethrough":59395,"styler-outlined":59396,"suitcase-clock-outlined":59397,"suitcase-outlined":59398,"survey-outlined":59399,"switch-outlined":59400,"sync":59401,"tag-outlined":59402,"target-outlined":59403,"tennis-outlined":59404,"ticket-outlined":59405,"timesheet-outlined":59406,"timesheets-outlined":59407,"today-outlined":59408,"transfer":59409,"trash-bin-outlined":59410,"umbrela-outlined":59411,"unavailability-outlined":59412,"unavailable":59413,"underline":59414,"union-outlined":59415,"unlock-outlined":59416,"upload-outlined":59417,"user-circle-outlined":59418,"user-gear-outlined":59419,"user-outlined":59420,"user-rectangle-outlined":59421,"video-1-outlined":59422,"video-2-outlined":59423,"volunteer-outlined":59424,"wallet-outlined":59425}

package/src/components/Icon/IconList.ts

@@ -63,6 +63,7 @@ const IconList = [
   'exclude',
   'expand-content',
   'expense',
+  'explore_nearby',
   'eye-circle',
   'eye-invisible',
   'eye',
@@ -326,12 +327,14 @@ const IconList = [
   'link-2',
   'list-outlined',
   'live-help-outlined',
+  'local_mall_outlined',
   'location-on-outlined',
   'location-outlined',
   'lock-outlined',
   'locked-file-outlined',
   'log-out',
   'mail-outlined',
+  'map-outlined',
   'media-content-outlined',
   'menu-close',
   'menu-expand',
@@ -378,6 +381,7 @@ const IconList = [
   'share-1',
   'share-2',
   'share-outlined',
+  'shopping_basket_outlined',
   'show-chart-outlined',
   'single-down-arrow',
   'single-left-arrow',

package/src/components/PinInput/index.tsx

@@ -127,7 +127,7 @@ const PinInput = forwardRef<PinInputHandler, PinInputProps>(
 
     const changeText = useCallback(
       (text: string) => {
-        const pin = (text.match(/[0-9]/g) || []).join('');
+        const pin = (text.match(/\d/g) || []).join('');
 
         onChangeText?.(pin);
 

package/src/components/Tabs/SceneView.tsx

@@ -22,10 +22,12 @@ const SceneView = ({
   );
   const focused = index === selectedIndex;
 
-  if (isLoading && Math.abs(selectedIndex - index) <= lazyPreloadDistance) {
-    // Always render the route when it becomes focused
-    setIsLoading(false);
-  }
+  React.useEffect(() => {
+    if (isLoading && Math.abs(selectedIndex - index) <= lazyPreloadDistance) {
+      // Always render the route when it becomes focused
+      setIsLoading(false);
+    }
+  }, [isLoading, index, selectedIndex, lazyPreloadDistance]);
 
   React.useEffect(() => {
     let unsubscribe: (() => void) | undefined;

package/src/components/Tabs/ScrollableTabs.tsx

@@ -4,9 +4,13 @@ import PagerView from 'react-native-pager-view';
 import { TabContainer, ContentWrapper } from './StyledScrollableTabs';
 import type { TabsProps } from '.';
 import SceneView from './SceneView';
-import ScrollableTabHeader from './ScrollableTabsHeader';
+import ScrollableTabHeader from './ScrollableTabsHeader/ScrollableTabsHeader';
 import { ScreenContext, TabContext } from './useIsFocused';
 
+export interface ScrollableTabProps extends TabsProps {
+  variant?: 'underlined' | 'highlighted';
+}
+
 const ScrollableTab = ({
   onTabPress,
   selectedTabKey,
@@ -17,7 +21,8 @@ const ScrollableTab = ({
   lazyPreloadDistance = 1,
   swipeEnabled = true,
   testID: componentTestID,
-}: TabsProps) => {
+  variant = 'highlighted',
+}: ScrollableTabProps) => {
   const pagerViewRef = React.useRef<PagerView>(null);
   const insets = useSafeAreaInsets();
   const selectedTabIndex = tabs.findIndex(
@@ -61,6 +66,7 @@ const ScrollableTab = ({
           barStyle={barStyle}
           insets={insets}
           testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+          variant={variant}
         />
         <ContentWrapper
           initialPage={selectedTabIndex}

package/src/components/Tabs/{ScrollableTabsHeader.tsx → ScrollableTabsHeader/ScrollableTabsHeader.tsx}

@@ -1,26 +1,28 @@
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import {
-  TouchableWithoutFeedback,
   FlatList,
-  Animated,
+  Platform,
   StyleProp,
-  ViewStyle,
+  TouchableWithoutFeedback,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
-import { useTheme } from '@emotion/react';
+import type { ItemType, TabType } from '..';
+import Icon from '../../Icon';
+import { isHeroIcon } from '../../Icon/utils';
+import Typography from '../../Typography';
 import {
   HeaderTabItem,
-  HeaderTabWrapper,
+  HeaderTabItemIndicator,
   HeaderTabItemOutline,
-  HeaderTabItemWrapper,
   HeaderTabItemOutlineWrapper,
-} from './StyledScrollableTabs';
-import { useAnimatedValueArray } from './utils';
-import { isHeroIcon } from '../Icon/utils';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import type { ItemType, TabType } from '.';
-import TabWithBadge from './TabWithBadge';
+  HeaderTabItemWrapper,
+  HeaderTabWrapper,
+} from '../StyledScrollableTabs';
+import TabWithBadge from '../TabWithBadge';
+import useInitHighlightedAnimation from './hooks/useInitHighlightedAnimation';
+import useInitUnderlinedAnimation from './hooks/useInitUnderlinedAnimation';
 
 const getTabItem = ({
   item,
@@ -87,6 +89,10 @@ export interface ScrollableTabHeaderProps extends ViewProps {
     right: number;
     left: number;
   };
+  /**
+   * Variant of the tab header
+   */
+  variant?: 'underlined' | 'highlighted';
 }
 const ScrollableTabHeader = ({
   onTabPress,
@@ -95,12 +101,25 @@ const ScrollableTabHeader = ({
   barStyle,
   testID,
   insets = { top: 0, bottom: 0, right: 0, left: 0 },
+  variant = 'highlighted',
 }: ScrollableTabHeaderProps) => {
-  const flatListRef = React.useRef<FlatList>(null);
   const theme = useTheme();
-  const tabsAnims = useAnimatedValueArray(
-    tabs.map((_, i) => (i === selectedIndex ? 1 : 0))
-  );
+  const flatListRef = React.useRef<FlatList>(null);
+
+  // Init underlined animation data
+  const { underlinedTranslateX, underlinedOpacity } =
+    useInitUnderlinedAnimation({
+      tabsLength: tabs.length,
+      selectedIndex,
+      variant,
+    });
+
+  // Init highlighted animation data
+  const { tabsAnims } = useInitHighlightedAnimation({
+    selectedIndex,
+    tabsLength: tabs.length,
+    variant,
+  });
 
   React.useEffect(() => {
     const timeoutHandle: number | null = null;
@@ -111,19 +130,7 @@ const ScrollableTabHeader = ({
       });
     }
 
-    const animation = Animated.parallel([
-      ...tabs.map((_, i) =>
-        Animated.timing(tabsAnims[i], {
-          toValue: i === selectedIndex ? 1 : 0,
-          duration: 150,
-          useNativeDriver: true,
-        })
-      ),
-    ]);
-    animation.start();
-
     return () => {
-      animation.stop();
       if (timeoutHandle) {
         clearTimeout(timeoutHandle);
       }
@@ -149,8 +156,20 @@ const ScrollableTabHeader = ({
             100
           );
         }}
+        style={
+          // Border styles specified in contentContainerStyle don't work
+          // so they need to be placed here instead on Android.
+          Platform.OS === 'android'
+            ? {
+                borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+                borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
+              }
+            : undefined
+        }
         contentContainerStyle={{
           paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+          borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
+          borderBottomWidth: theme.__hd__.tabs.sizes.indicator,
         }}
         renderItem={({ item: tab, index }) => {
           const {
@@ -187,22 +206,34 @@ const ScrollableTabHeader = ({
               testID={tabItemTestID}
             >
               <HeaderTabItem isFirstItem={index === 0}>
-                <HeaderTabItemOutlineWrapper>
-                  <HeaderTabItemOutline
-                    themeActive={active}
-                    style={{
-                      flex: 1,
-                      transform: [
-                        {
-                          scaleX: outlineScale,
-                        },
-                      ],
-                    }}
-                  />
-                </HeaderTabItemOutlineWrapper>
+                {variant === 'highlighted' && (
+                  <HeaderTabItemOutlineWrapper>
+                    <HeaderTabItemOutline
+                      themeActive={active}
+                      style={{
+                        flex: 1,
+                        transform: [
+                          {
+                            scaleX: outlineScale,
+                          },
+                        ],
+                      }}
+                    />
+                  </HeaderTabItemOutlineWrapper>
+                )}
+
                 <HeaderTabItemWrapper>
                   <TabWithBadge config={badge} tabItem={tabItem} />
                 </HeaderTabItemWrapper>
+
+                {variant === 'underlined' && (
+                  <HeaderTabItemIndicator
+                    style={{
+                      opacity: underlinedOpacity[index],
+                      transform: [{ translateX: underlinedTranslateX[index] }],
+                    }}
+                  />
+                )}
               </HeaderTabItem>
             </TouchableWithoutFeedback>
           );

package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitHighlightedAnimation.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Animated, Platform } from 'react-native';
+import { useAnimatedValueArray } from '../../utils';
+
+const useInitHighlightedAnimation = ({
+  selectedIndex = 0,
+  tabsLength,
+  variant,
+}: {
+  selectedIndex?: number;
+  tabsLength: number;
+  variant: 'underlined' | 'highlighted';
+}) => {
+  const tabsAnims = useAnimatedValueArray(
+    Array.from({ length: tabsLength }).map((_, i) =>
+      i === selectedIndex ? 1 : 0
+    )
+  );
+
+  React.useEffect(() => {
+    if (variant !== 'highlighted') {
+      return;
+    }
+
+    const animation = Animated.parallel([
+      ...Array.from({ length: tabsLength }).map((_, i) =>
+        Animated.timing(tabsAnims[i], {
+          toValue: i === selectedIndex ? 1 : 0,
+          duration: 150,
+          useNativeDriver: Platform.OS !== 'web',
+        })
+      ),
+    ]);
+
+    animation.start();
+
+    return () => {
+      animation.stop();
+    };
+  }, [selectedIndex]);
+
+  return { tabsAnims };
+};
+
+export default useInitHighlightedAnimation;

package/src/components/Tabs/ScrollableTabsHeader/hooks/useInitUnderlinedAnimation.ts

@@ -0,0 +1,91 @@
+import React from 'react';
+import { Animated, Easing, Platform } from 'react-native';
+import { useAnimatedValueArray } from '../../utils';
+
+const TRANSLATE_DISTANCE = 30;
+
+const animateOpacity = (animatedValue: Animated.Value, toValue: number) => {
+  return Animated.timing(animatedValue, {
+    toValue,
+    duration: 150,
+    easing: Easing.ease,
+    useNativeDriver: Platform.OS !== 'web',
+  });
+};
+
+const animateTranslateX = (animatedValue: Animated.Value, toValue: number) => {
+  return Animated.spring(animatedValue, {
+    toValue,
+    useNativeDriver: Platform.OS !== 'web',
+  });
+};
+
+const useInitUnderlinedAnimation = ({
+  tabsLength,
+  selectedIndex = 0,
+  variant,
+}: {
+  tabsLength: number;
+  selectedIndex?: number;
+  variant: 'underlined' | 'highlighted';
+}) => {
+  const previousIndex = React.useRef<number>(0);
+  const translateXAnims = useAnimatedValueArray(
+    Array.from({ length: tabsLength }).map(() => 0)
+  );
+
+  const opacityAnims = useAnimatedValueArray(
+    Array.from({ length: tabsLength }).map((_, i) =>
+      selectedIndex !== undefined && selectedIndex === i ? 1 : 0
+    )
+  );
+
+  const underlinedTranslateX = translateXAnims.map((anim) =>
+    anim.interpolate({
+      inputRange: [-1, 0, 1],
+      outputRange: [-TRANSLATE_DISTANCE, 0, TRANSLATE_DISTANCE],
+    })
+  );
+
+  const underlinedOpacity = opacityAnims.map((anim) =>
+    anim.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, 1],
+    })
+  );
+
+  React.useEffect(() => {
+    if (
+      variant === 'underlined' &&
+      selectedIndex !== undefined &&
+      previousIndex.current !== selectedIndex
+    ) {
+      // Prepare for translateX into the right position.
+      if (selectedIndex > previousIndex.current) {
+        translateXAnims[selectedIndex].setValue(-1);
+      } else {
+        translateXAnims[selectedIndex].setValue(1);
+      }
+
+      // Split animations into 2 sets of parallel animations to prevent race condition.
+      Animated.parallel([
+        animateOpacity(opacityAnims[selectedIndex], 1),
+        animateTranslateX(translateXAnims[selectedIndex], 0),
+      ]).start();
+
+      Animated.parallel([
+        animateOpacity(opacityAnims[previousIndex.current], 0),
+        animateTranslateX(
+          translateXAnims[previousIndex.current],
+          selectedIndex > previousIndex.current ? 1 : -1
+        ),
+      ]).start();
+
+      previousIndex.current = selectedIndex;
+    }
+  }, [selectedIndex, variant, opacityAnims, translateXAnims]);
+
+  return { underlinedTranslateX, underlinedOpacity };
+};
+
+export default useInitUnderlinedAnimation;