@hero-design/rn 8.61.1 → 8.61.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.61.1",
+  "version": "8.61.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,11 +28,11 @@
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.7",
+    "@hero-design/react-native-month-year-picker": "^8.42.8",
     "@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",
+    "react-native": "^0.72.11",
     "react-native-gesture-handler": "^1.10.3 || ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
@@ -48,7 +48,7 @@
     "@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.7",
+    "@hero-design/react-native-month-year-picker": "^8.42.8",
     "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-community/slider": "4.4.3",
     "@rollup/plugin-babel": "^5.3.1",
@@ -64,6 +64,7 @@
     "@types/react": "^18.2.0",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
+    "babel-preset-expo": "9.5.2",
     "core-js": "^3.33.0",
     "eslint": "^8.56.0",
     "eslint-config-hd": "8.42.4",
@@ -74,7 +75,7 @@
     "prettier-config-hd": "8.42.4",
     "react": "18.2.0",
     "react-dom": "^18.2.0",
-    "react-native": "0.71.14",
+    "react-native": "0.72.11",
     "react-native-gesture-handler": "~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",

package/sonar-project.properties

@@ -2,6 +2,7 @@ sonar.host.url=https://sonarqube.staging.ehrocks.com
 
 sonar.projectKey=hero-design-react-native
 sonar.projectName=Hero Design React Native
+sonar.organization=thinkei
 
 sonar.sources=.
 sonar.inclusions=**/*

package/src/components/Calendar/StyledCalendar.tsx

@@ -40,7 +40,7 @@ const StyledCalendarRow = styled(View)<ViewProps>(({ theme }) => ({
 }));
 
 const StyledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
-  flexBasis: `${Math.floor(100.0 / 7.0).toString()}%`,
+  flexBasis: `${Math.floor(100.0 / 7.0)}%`,
   alignItems: 'center',
   width: theme.__hd__.calendar.sizes.cellWidth,
   height: theme.__hd__.calendar.sizes.cellHeight,
@@ -48,7 +48,7 @@ const StyledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
 }));
 
 const StyledDisabledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
-  flexBasis: `${Math.floor(100.0 / 7.0).toString()}%`,
+  flexBasis: `${Math.floor(100.0 / 7.0)}%`,
   alignItems: 'center',
   width: theme.__hd__.calendar.sizes.cellWidth,
   height: theme.__hd__.calendar.sizes.cellHeight,

package/src/components/Carousel/CardCarousel.tsx

@@ -160,7 +160,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     );
 
     const getItemLayout = useCallback(
-      (_: React.ReactNode, index: number) => ({
+      (_: ArrayLike<React.ReactNode> | null | undefined, index: number) => ({
         length: itemWidth,
         offset: itemWidth * index,
         index,
@@ -193,7 +193,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       theme.__hd__.cardCarousel.space;
     return (
       <StyledWrapper style={style} testID={testID}>
-        <FlatList
+        <FlatList<React.ReactNode>
           contentInset={{
             top: 0,
             left: contentContainerPaddingHorizontal,

package/src/components/Carousel/CarouselItem.tsx

@@ -35,9 +35,9 @@ const CarouselItem = ({
         return (
           <StyledCustomSizeCarouselImage
             source={image}
-            height={image.height}
-            width={image.width}
-            resizeMode={image.resizeMode}
+            themeHeight={image.height}
+            themeWidth={image.width}
+            themeResizeMode={image.resizeMode}
             style={{ marginBottom: theme.space.medium }}
           />
         );

package/src/components/Carousel/StyledCarousel.tsx

@@ -33,14 +33,14 @@ const StyledCarouselImage = styled(Image)(() => ({
 }));
 
 const StyledCustomSizeCarouselImage = styled(Image)<{
-  height?: number | `${number}%`;
-  width?: number | `${number}%`;
-  resizeMode?: ImageResizeMode;
-}>(({ height, resizeMode = 'contain', width }) => ({
+  themeHeight?: number | `${number}%`;
+  themeWidth?: number | `${number}%`;
+  themeResizeMode?: ImageResizeMode;
+}>(({ themeHeight, themeResizeMode = 'contain', themeWidth }) => ({
   alignSelf: 'center',
-  width,
-  height,
-  resizeMode,
+  width: themeWidth,
+  height: themeHeight,
+  resizeMode: themeResizeMode,
 }));
 
 const StyledCarouselContentWrapper = styled(Box)<{

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

@@ -397,8 +397,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               }
             >
               <Image
-                height={100}
-                resizeMode="cover"
                 source={
                   {
                     "height": 100,
@@ -427,7 +425,9 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     ],
                   ]
                 }
-                width={30}
+                themeHeight={100}
+                themeResizeMode="cover"
+                themeWidth={30}
               />
               <View
                 paddingHorizontal="medium"
@@ -516,7 +516,6 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               }
             >
               <Image
-                height={100}
                 source={
                   {
                     "height": 100,
@@ -544,7 +543,8 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
                     ],
                   ]
                 }
-                width={30}
+                themeHeight={100}
+                themeWidth={30}
               />
               <View
                 paddingHorizontal="medium"
@@ -1392,8 +1392,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               }
             >
               <Image
-                height={100}
-                resizeMode="cover"
                 source={
                   {
                     "height": 100,
@@ -1422,7 +1420,9 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     ],
                   ]
                 }
-                width={30}
+                themeHeight={100}
+                themeResizeMode="cover"
+                themeWidth={30}
               />
               <View
                 paddingHorizontal="medium"
@@ -1511,7 +1511,6 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               }
             >
               <Image
-                height={100}
                 source={
                   {
                     "height": 100,
@@ -1539,7 +1538,8 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
                     ],
                   ]
                 }
-                width={30}
+                themeHeight={100}
+                themeWidth={30}
               />
               <View
                 paddingHorizontal="medium"

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,"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-2":59380,"share-outlined":59381,"shopping_basket_outlined":59382,"show-chart-outlined":59383,"single-down-arrow":59384,"single-left-arrow":59385,"single-right-arrow":59386,"single-up-arrow":59387,"smart-match-outlined":59388,"sparkle-outlined":59389,"speaker-active-outlined":59390,"speaker-outlined":59391,"star-circle-outlined":59392,"star-outlined":59393,"stash-outlined":59394,"stopwatch-outlined":59395,"strikethrough":59396,"styler-outlined":59397,"suitcase-clock-outlined":59398,"suitcase-outlined":59399,"survey-outlined":59400,"switch-outlined":59401,"sync":59402,"tag-outlined":59403,"target-outlined":59404,"tennis-outlined":59405,"ticket-outlined":59406,"timesheet-outlined":59407,"timesheets-outlined":59408,"today-outlined":59409,"transfer":59410,"trash-bin-outlined":59411,"umbrela-outlined":59412,"unavailability-outlined":59413,"unavailable":59414,"underline":59415,"union-outlined":59416,"unlock-outlined":59417,"upload-outlined":59418,"user-circle-outlined":59419,"user-gear-outlined":59420,"user-outlined":59421,"user-rectangle-outlined":59422,"video-1-outlined":59423,"video-2-outlined":59424,"volunteer-outlined":59425,"wallet-outlined":59426}
+{"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-2":59380,"share-outlined":59381,"shopping_basket_outlined":59382,"show-chart-outlined":59383,"single-down-arrow":59384,"single-left-arrow":59385,"single-right-arrow":59386,"single-up-arrow":59387,"smart-match-outlined":59388,"sparkle-outlined":59389,"speaker-active-outlined":59390,"speaker-outlined":59391,"star-circle-outlined":59392,"star-outlined":59393,"stash-outlined":59394,"stopwatch-outlined":59395,"strikethrough":59396,"styler-outlined":59397,"suitcase-clock-outlined":59398,"suitcase-outlined":59399,"survey-outlined":59400,"switch-outlined":59401,"sync":59402,"tag-outlined":59403,"target-outlined":59404,"tennis-outlined":59405,"ticket-outlined":59406,"timesheet-outlined":59407,"timesheets-outlined":59408,"today-outlined":59409,"transfer":59410,"trash-bin-outlined":59411,"umbrela-outlined":59412,"unavailability-outlined":59413,"unavailable":59414,"underline":59415,"union-outlined":59416,"unlock-outlined":59417,"upload-outlined":59418,"user-circle-outlined":59419,"user-gear-outlined":59420,"user-outlined":59421,"user-rectangle-outlined":59422,"video-1-outlined":59423,"video-2-outlined":59424,"volunteer-outlined":59425,"wallet-outlined":59426,"wellness-outlined":59427}

package/src/components/Icon/IconList.ts

@@ -427,6 +427,7 @@ const IconList = [
   'video-2-outlined',
   'volunteer-outlined',
   'wallet-outlined',
+  'wellness-outlined',
 ] as const;
 
 export default IconList;

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

@@ -133,7 +133,7 @@ exports[`Success renders full screen success page correctly 1`] = `
           themeLevel="h4"
           themeTypeface="playful"
         >
-          We’re sorry, something went wrong
+          Two-Factor Authentication
         </Text>
         <Text
           allowFontScaling={false}
@@ -159,7 +159,7 @@ exports[`Success renders full screen success page correctly 1`] = `
           themeTypeface="neutral"
           themeVariant="regular"
         >
-          Please try again later
+          Protecting your sensitive data is important to us. Verifying your mobile number or using an authenticator app makes it harder for attackers to access personal and sensitive information.
         </Text>
       </View>
     </View>
@@ -187,7 +187,7 @@ exports[`Success renders full screen success page correctly 1`] = `
 </View>
 `;
 
-exports[`Success renders succe screen with custom image element correctly 1`] = `
+exports[`Success renders success screen with custom image element correctly 1`] = `
 <View
   style={
     {
@@ -280,7 +280,7 @@ exports[`Success renders succe screen with custom image element correctly 1`] =
         themeLevel="h4"
         themeTypeface="playful"
       >
-        We’re sorry, something went wrong
+        Two-Factor Authentication
       </Text>
       <Text
         allowFontScaling={false}
@@ -306,7 +306,7 @@ exports[`Success renders succe screen with custom image element correctly 1`] =
         themeTypeface="neutral"
         themeVariant="regular"
       >
-        Please try again later
+        Protecting your sensitive data is important to us. Verifying your mobile number or using an authenticator app makes it harder for attackers to access personal and sensitive information.
       </Text>
     </View>
   </View>
@@ -434,7 +434,7 @@ exports[`Success renders success screen with image correctly 1`] = `
         themeLevel="h4"
         themeTypeface="playful"
       >
-        We’re sorry, something went wrong
+        Two-Factor Authentication
       </Text>
       <Text
         allowFontScaling={false}
@@ -460,7 +460,150 @@ exports[`Success renders success screen with image correctly 1`] = `
         themeTypeface="neutral"
         themeVariant="regular"
       >
-        Please try again later
+        Protecting your sensitive data is important to us. Verifying your mobile number or using an authenticator app makes it harder for attackers to access personal and sensitive information.
+      </Text>
+    </View>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
+exports[`Success renders title and description as ReactElement correctly 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "backgroundColor": "#f6f6f7",
+          "display": "flex",
+          "flex": 1,
+          "flexDirection": "column",
+        },
+        undefined,
+      ]
+    }
+    themeVariant="in-page"
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "display": "flex",
+            "flex": 1,
+            "flexDirection": "column",
+            "justifyContent": "center",
+            "padding": 24,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "RebondGrotesque-SemiBold",
+              "fontSize": 24,
+              "letterSpacing": 0.24,
+              "lineHeight": 32,
+            },
+            [
+              {
+                "color": "#001f23",
+                "marginBottom": 8,
+                "textAlign": "center",
+              },
+              undefined,
+            ],
+          ]
+        }
+        themeIntent="body"
+        themeLevel="h4"
+        themeTypeface="playful"
+      >
+        Two-Factor Authentication
+      </Text>
+      <Text
+        allowFontScaling={false}
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "letterSpacing": 0.48,
+              "lineHeight": 24,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="body"
+        themeTypeface="neutral"
+        themeVariant="regular"
+      >
+        Protecting your sensitive data is important to us. Verifying your mobile number or using an authenticator app makes it harder for attackers to access personal and sensitive information.
+        ,
+        <Text
+          allowFontScaling={false}
+          onPress={
+            [MockFunction] {
+              "calls": [
+                [],
+              ],
+              "results": [
+                {
+                  "type": "return",
+                  "value": undefined,
+                },
+              ],
+            }
+          }
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="regular"
+        >
+          click here
+        </Text>
       </Text>
     </View>
   </View>
@@ -549,7 +692,7 @@ exports[`Success renders title only correctly 1`] = `
         themeLevel="h4"
         themeTypeface="playful"
       >
-        We’re sorry, something went wrong
+        Two-Factor Authentication
       </Text>
       <Text
         allowFontScaling={false}
@@ -575,7 +718,7 @@ exports[`Success renders title only correctly 1`] = `
         themeTypeface="neutral"
         themeVariant="regular"
       >
-        Please try again later
+        Protecting your sensitive data is important to us. Verifying your mobile number or using an authenticator app makes it harder for attackers to access personal and sensitive information.
       </Text>
     </View>
   </View>

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

@@ -4,9 +4,10 @@ import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Success from '..';
 import Image from '../../Image';
 import Portal from '../../Portal';
+import Typography from '../../Typography';
 
-const title = `We’re sorry, something went wrong`;
-const description = 'Please try again later';
+const title = `Two-Factor Authentication`;
+const description = `Protecting your sensitive data is important to us. Verifying your mobile number or using an authenticator app makes it harder for attackers to access personal and sensitive information.`;
 
 describe('Success', () => {
   it('renders title only correctly', () => {
@@ -14,10 +15,31 @@ describe('Success', () => {
       <Success title={title} description={description} />
     );
 
+    expect(toJSON()).toMatchSnapshot();
     expect(getByText(title)).toBeTruthy();
     expect(getByText(description)).toBeTruthy();
+  });
+
+  it('renders title and description as ReactElement correctly', () => {
+    const clickHereSpy = jest.fn();
+    const { toJSON, getByText } = renderWithTheme(
+      <Success
+        title="Two-Factor Authentication"
+        description={
+          <Typography.Body>
+            {description},
+            <Typography.Body onPress={clickHereSpy}>click here</Typography.Body>
+          </Typography.Body>
+        }
+      />
+    );
+
+    expect(getByText(title)).toBeTruthy();
+    fireEvent.press(getByText('click here'));
+    expect(clickHereSpy).toBeCalledTimes(1);
     expect(toJSON()).toMatchSnapshot();
   });
+
   it('renders success screen with image correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
       <Success title={title} description={description} image="path_to_image" />
@@ -28,7 +50,8 @@ describe('Success', () => {
     expect(getByTestId('success-image')).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
   });
-  it('renders succe screen with custom image element correctly', () => {
+
+  it('renders success screen with custom image element correctly', () => {
     const image = (
       <Image
         source={{
@@ -45,6 +68,7 @@ describe('Success', () => {
     expect(getByTestId('success-image')).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
   });
+
   it('renders full screen success page correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
       <Portal.Provider>
@@ -62,6 +86,7 @@ describe('Success', () => {
     expect(getByTestId('success-image')).toBeTruthy();
     expect(toJSON()).toMatchSnapshot();
   });
+
   it('handles CTA press correctly', () => {
     const onCtaPress = jest.fn();
     const onSecondCtaPress = jest.fn();

package/src/components/Success/index.tsx

@@ -34,7 +34,7 @@ export interface SuccessProps extends ViewProps {
   /**
    * Success's description.
    */
-  description?: string;
+  description?: string | ReactElement;
   /**
    * Success's variant.
    */
@@ -107,9 +107,10 @@ const SuccessPage = ({
         <StyledSuccessTitle level="h4" typeface="playful">
           {title}
         </StyledSuccessTitle>
-
-        {!!description && (
+        {typeof description === 'string' ? (
           <StyledSuccessDescription>{description}</StyledSuccessDescription>
+        ) : (
+          description
         )}
       </StyledSuccessContent>
 

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

@@ -451,17 +451,12 @@ describe('TextInput', () => {
 
   describe('ref', () => {
     it('ref methods work correctly', () => {
-      const mockChildMethod = jest.fn();
-      jest.spyOn(React, 'useRef').mockReturnValue({
-        current: {
-          clear: mockChildMethod,
-        },
-      });
       const ref = React.createRef<
         TextInputHandles & {
           getNativeTextInputRef(): RNTextInput;
         }
       >();
+
       const wrapper = renderWithTheme(
         <TextInput label="Amount (AUD)" value="2000" ref={ref} />
       );

package/tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "declaration": true,
     "jsx": "react-native",
@@ -13,8 +12,17 @@
     "target": "esnext",
     "types": ["jest"],
     "paths": {
-      "react": ["./node_modules/@types/react"]
-    }
+      "react": ["./node_modules/@types/react"],
+      "react-native": ["./node_modules/react-native/types"],
+    },
+    "allowJs": true,
+    "esModuleInterop": true,
+    "lib": ["DOM", "ESNext"],
+    "moduleResolution": "node",
+    "noEmit": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
 }

package/types/components/Carousel/StyledCarousel.d.ts

@@ -26,9 +26,9 @@ declare const StyledCustomSizeCarouselImage: import("@emotion/native").StyledCom
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
 } & {
-    height?: number | `${number}%` | undefined;
-    width?: number | `${number}%` | undefined;
-    resizeMode?: ImageResizeMode | undefined;
+    themeHeight?: number | `${number}%` | undefined;
+    themeWidth?: number | `${number}%` | undefined;
+    themeResizeMode?: ImageResizeMode | undefined;
 }, {}, {}>;
 declare const StyledCarouselContentWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
     theme?: import("@emotion/react").Theme | undefined;