@hero-design/rn 8.56.1 → 8.57.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.56.1",
+  "version": "8.57.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,13 +24,12 @@
     "@emotion/react": "^11.9.3",
     "@hero-design/colors": "8.42.5",
     "date-fns": "^2.16.1",
-    "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.6",
-    "@react-native-community/datetimepicker": "^3.5.2",
+    "@hero-design/react-native-month-year-picker": "^8.42.7",
+    "@react-native-community/datetimepicker": "^3.5.2 || ^7.2.0",
     "@react-native-community/slider": "4.4.3",
     "react": "18.2.0",
     "react-native": "^0.71.0",
@@ -49,8 +48,8 @@
     "@babel/runtime": "^7.20.0",
     "@emotion/jest": "^11.11.0",
     "@hero-design/eslint-plugin": "9.0.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.6",
-    "@react-native-community/datetimepicker": "3.5.2",
+    "@hero-design/react-native-month-year-picker": "^8.42.7",
+    "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-community/slider": "4.4.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
@@ -60,6 +59,7 @@
     "@rollup/plugin-typescript": "^8.3.0",
     "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-native": "^9.1.0",
+    "@types/events": "^3.0.3",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.0",
     "@types/react-native-vector-icons": "^6.4.10",
@@ -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/Calendar/__tests__/index.spec.tsx

@@ -114,9 +114,9 @@ describe('Calendar', () => {
     platform
     ${'ios'}
     ${'android'}
-  `('renders correct picker on $platform', ({ platform }) => {
+  `('renders correct picker on $platform', ({ platform: mockedPlatform }) => {
     jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-      OS: platform,
+      OS: mockedPlatform,
       select: () => null,
     }));
 
@@ -133,7 +133,7 @@ describe('Calendar', () => {
     fireEvent.press(getByTestId('calendar-month-picker'));
 
     // Pickers are mocked at packages/rn/testUtils/setup.tsx
-    if (platform === 'ios') {
+    if (mockedPlatform === 'ios') {
       expect(queryByText('IOS picker')).toBeDefined();
     } else {
       expect(queryByText('Android picker')).toBeDefined();
@@ -146,9 +146,9 @@ describe('Calendar', () => {
     ${'android'}
   `(
     'onToggleMonthPicker is called when toggling month year picker on $platform',
-    ({ platform }) => {
+    ({ platform: mockedPlatform }) => {
       jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-        OS: platform,
+        OS: mockedPlatform,
         select: () => null,
       }));
 

package/src/components/Carousel/CardCarousel.tsx

@@ -67,6 +67,10 @@ export interface CardCarouselProps {
   onLayout?: (event: LayoutChangeEvent) => void;
 }
 
+export const getCardCarouselValidIndex = (index: number, length: number) => {
+  return Math.min(Math.max(index, 0), length - 1);
+};
+
 export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
   (
     {
@@ -92,14 +96,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
     const snapToIndex = useCallback(
       (index: number) => {
-        let validIndex = 0;
-        if (index < 0) {
-          validIndex = 0;
-        } else if (index >= items.length) {
-          validIndex = items.length - 1;
-        } else {
-          validIndex = index;
-        }
+        const validIndex = getCardCarouselValidIndex(index, items.length);
 
         carouselRef.current?.scrollToIndex({
           index: validIndex,
@@ -107,7 +104,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
           viewPosition,
         });
       },
-      [carouselRef, itemWidth]
+      [items.length, viewPosition]
     );
 
     /*
@@ -123,7 +120,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
         animated: true,
         viewPosition,
       });
-    }, [carouselRef, currentIndex, itemWidth, items.length]);
+    }, [currentIndex, items.length, viewPosition]);
 
     React.useImperativeHandle(
       ref,

package/src/components/Carousel/__tests__/index.spec.tsx

@@ -7,6 +7,7 @@ import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Button from '../../Button/Button';
 import HeroDesignProvider from '../../HeroDesignProvider';
 import Image from '../../Image';
+import { getCardCarouselValidIndex } from '../CardCarousel';
 
 const carouselData = [
   {
@@ -180,3 +181,16 @@ describe('Carousel', () => {
     expect(queryByTestId('page-control-indicator1')).toBeFalsy();
   });
 });
+
+// write test for getCardCarouselValidIndex
+describe('getCardCarouselValidIndex', () => {
+  it('should return 0 when index is less than 0', () => {
+    expect(getCardCarouselValidIndex(-1, 3)).toBe(0);
+  });
+  it('should return 2 when index is equal to 2', () => {
+    expect(getCardCarouselValidIndex(2, 3)).toBe(2);
+  });
+  it('should return 2 when index is greater than 2', () => {
+    expect(getCardCarouselValidIndex(3, 3)).toBe(2);
+  });
+});

package/src/components/DatePicker/__tests__/DatePickerCalendar.spec.tsx

@@ -63,38 +63,41 @@ describe('DatePickerCalendar', () => {
     platform
     ${'ios'}
     ${'android'}
-  `('renders month year picker when pressing on title', ({ platform }) => {
-    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-      OS: platform,
-      select: () => null,
-    }));
+  `(
+    'renders month year picker when pressing on title',
+    ({ platform: mockedPlatform }) => {
+      jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+        OS: mockedPlatform,
+        select: () => null,
+      }));
 
-    const { queryByText, getByText, getByTestId } = renderWithTheme(
-      <DatePickerCalendar
-        value={new Date('December 21, 1995')}
-        label="Start date"
-        confirmLabel="Confirm"
-        helpText="This is help text"
-        onChange={jest.fn()}
-      />
-    );
+      const { queryByText, getByText, getByTestId } = renderWithTheme(
+        <DatePickerCalendar
+          value={new Date('December 21, 1995')}
+          label="Start date"
+          confirmLabel="Confirm"
+          helpText="This is help text"
+          onChange={jest.fn()}
+        />
+      );
 
-    fireEvent.press(getByText('Start date'));
-    fireEvent.press(getByText('December 1995'));
+      fireEvent.press(getByText('Start date'));
+      fireEvent.press(getByText('December 1995'));
 
-    if (platform === 'ios') {
-      expect(queryByText('IOS picker')).toBeDefined();
-    } else {
-      expect(queryByText('Android picker')).toBeDefined();
-    }
+      if (mockedPlatform === 'ios') {
+        expect(queryByText('IOS picker')).toBeDefined();
+      } else {
+        expect(queryByText('Android picker')).toBeDefined();
+      }
 
-    // Selecting month
-    fireEvent(
-      getByTestId('calendar'),
-      'onMonthChange',
-      new Date('January 17, 1993')
-    );
+      // Selecting month
+      fireEvent(
+        getByTestId('calendar'),
+        'onMonthChange',
+        new Date('January 17, 1993')
+      );
 
-    expect(queryByText('January 1993')).toBeDefined();
-  });
+      expect(queryByText('January 1993')).toBeDefined();
+    }
+  );
 });

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}