@hero-design/rn 8.40.3 → 8.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.40.3",
+  "version": "8.41.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.40.3",
+    "@hero-design/colors": "8.41.1",
     "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.40.3",
+    "@hero-design/react-native-month-year-picker": "^8.41.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -36,7 +36,6 @@
     "react-native-gesture-handler": "^1.10.3 | ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
-    "react-native-root-siblings": "^4.1.1",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^11.2.5"
@@ -48,8 +47,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "8.40.3",
-    "@hero-design/react-native-month-year-picker": "^8.40.3",
+    "@hero-design/eslint-plugin": "8.41.1",
+    "@hero-design/react-native-month-year-picker": "^8.41.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,12 +64,12 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.40.3",
+    "eslint-config-hd": "8.41.1",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.40.3",
+    "prettier-config-hd": "8.41.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/rollup.config.js

@@ -35,7 +35,6 @@ export default {
     'react-native-vector-icons',
     'react-native-linear-gradient',
     '@hero-design/react-native-month-year-picker',
-    'react-native-root-siblings',
   ],
   plugins: [
     replace({

package/src/components/Error/StyledError.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/native';
-import { Modal, View } from 'react-native';
+import { View } from 'react-native';
 import Image from '../Image';
 import Typography from '../Typography';
 import Button from '../Button';
+import Modal from '../Modal';
 
 type ErrorVariant = 'full-screen' | 'in-page';
 

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

@@ -245,146 +245,164 @@ exports[`Error renders error screen with image correctly 1`] = `
 `;
 
 exports[`Error renders full screen error page correctly 1`] = `
-<Modal
-  animationType="slide"
-  hardwareAccelerated={false}
-  onDismiss={[Function]}
-  onRequestClose={[Function]}
-  style={
-    [
+[
+  <View
+    collapsable={false}
+    style={
       {
-        "height": "100%",
-        "width": "100%",
-      },
-      undefined,
-    ]
-  }
-  visible={true}
->
+        "backgroundColor": "#000000",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />,
   <View
+    collapsable={false}
     style={
-      [
-        {
-          "backgroundColor": "#ccd2d3",
-          "display": "flex",
-          "flex": 1,
-          "flexDirection": "column",
-        },
-        undefined,
-      ]
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 1334,
+          },
+        ],
+      }
     }
-    themeVariant="full-screen"
   >
     <View
       style={
         [
           {
-            "alignItems": "center",
+            "backgroundColor": "#ccd2d3",
             "display": "flex",
             "flex": 1,
             "flexDirection": "column",
-            "justifyContent": "center",
-            "padding": 24,
           },
           undefined,
         ]
       }
+      themeVariant="full-screen"
     >
       <View
         style={
           [
             {
-              "height": 176,
-              "marginBottom": 24,
-              "width": 176,
+              "alignItems": "center",
+              "display": "flex",
+              "flex": 1,
+              "flexDirection": "column",
+              "justifyContent": "center",
+              "padding": 24,
             },
             undefined,
           ]
         }
       >
-        <Image
-          source={
-            {
-              "uri": "path_to_image",
-            }
+        <View
+          style={
+            [
+              {
+                "height": 176,
+                "marginBottom": 24,
+                "width": 176,
+              },
+              undefined,
+            ]
           }
+        >
+          <Image
+            source={
+              {
+                "uri": "path_to_image",
+              }
+            }
+            style={
+              [
+                {
+                  "borderRadius": 0,
+                  "height": 72,
+                  "width": 72,
+                },
+                [
+                  {
+                    "height": 176,
+                    "marginBottom": 24,
+                    "resizeMode": "contain",
+                    "width": 176,
+                  },
+                  undefined,
+                ],
+              ]
+            }
+            testID="error-image"
+          />
+        </View>
+        <Text
+          allowFontScaling={false}
           style={
             [
               {
-                "borderRadius": 0,
-                "height": 72,
-                "width": 72,
+                "color": "#001f23",
+                "fontFamily": "RebondGrotesque-SemiBold",
+                "fontSize": 24,
+                "letterSpacing": 0.24,
+                "lineHeight": 32,
               },
               [
                 {
-                  "height": 176,
-                  "marginBottom": 24,
-                  "resizeMode": "contain",
-                  "width": 176,
+                  "color": "#001f23",
+                  "marginBottom": 8,
+                  "textAlign": "center",
                 },
                 undefined,
               ],
             ]
           }
-          testID="error-image"
-        />
-      </View>
-      <Text
-        allowFontScaling={false}
-        style={
-          [
-            {
-              "color": "#001f23",
-              "fontFamily": "RebondGrotesque-SemiBold",
-              "fontSize": 24,
-              "letterSpacing": 0.24,
-              "lineHeight": 32,
-            },
+          themeIntent="body"
+          themeLevel="h4"
+          themeTypeface="playful"
+        >
+          We’re sorry, something went wrong
+        </Text>
+        <Text
+          allowFontScaling={false}
+          style={
             [
               {
                 "color": "#001f23",
-                "marginBottom": 8,
-                "textAlign": "center",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 18,
+                "letterSpacing": 0.54,
+                "lineHeight": 26,
               },
-              undefined,
-            ],
-          ]
-        }
-        themeIntent="body"
-        themeLevel="h4"
-        themeTypeface="playful"
-      >
-        We’re sorry, something went wrong
-      </Text>
-      <Text
-        allowFontScaling={false}
-        style={
-          [
-            {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 18,
-              "letterSpacing": 0.54,
-              "lineHeight": 26,
-            },
-            [
-              {
-                "color": "#4d6265",
-                "textAlign": "center",
-              },
-              undefined,
-            ],
-          ]
-        }
-        themeIntent="body"
-        themeTypeface="playful"
-        themeVariant="regular"
-      >
-        Please try again later
-      </Text>
+              [
+                {
+                  "color": "#4d6265",
+                  "textAlign": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="playful"
+          themeVariant="regular"
+        >
+          Please try again later
+        </Text>
+      </View>
     </View>
-  </View>
-</Modal>
+  </View>,
+]
 `;
 
 exports[`Error renders title only correctly 1`] = `

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

@@ -3,6 +3,7 @@ import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Error from '..';
 import Image from '../../Image';
+import Portal from '../../Portal';
 
 const title = `We’re sorry, something went wrong`;
 const description = 'Please try again later';
@@ -46,12 +47,14 @@ describe('Error', () => {
   });
   it('renders full screen error page correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
-      <Error
-        variant="full-screen"
-        title={title}
-        description={description}
-        image="path_to_image"
-      />
+      <Portal.Provider>
+        <Error
+          variant="full-screen"
+          title={title}
+          description={description}
+          image="path_to_image"
+        />
+      </Portal.Provider>
     );
 
     expect(getByText(title)).toBeTruthy();

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

package/src/components/Icon/IconList.ts

@@ -366,6 +366,7 @@ const IconList = [
   'single-left-arrow',
   'single-right-arrow',
   'single-up-arrow',
+  'sparkle-outlined',
   'speaker-active-outlined',
   'speaker-outlined',
   'star-circle-outlined',

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

@@ -0,0 +1,117 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal renders correctly 1`] = `
+[
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "#000000",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />,
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Modal content
+    </Text>
+  </View>,
+]
+`;
+
+exports[`Modal renders correctly with transparent 1`] = `
+[
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "transparent",
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0.4,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+      }
+    }
+  />,
+  <View
+    collapsable={false}
+    style={
+      {
+        "bottom": 0,
+        "left": 0,
+        "opacity": 1,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
+        "transform": [
+          {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="regular"
+    >
+      Modal content
+    </Text>
+  </View>,
+]
+`;

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

@@ -0,0 +1,99 @@
+import { fireEvent } from '@testing-library/react-native';
+import React from 'react';
+import { BackHandler } from 'react-native';
+import Modal from '..';
+import { Button } from '../../..';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Portal from '../../Portal';
+import Typography from '../../Typography';
+
+describe('Modal', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <Portal.Provider>
+        <Modal visible>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('renders correctly with transparent', () => {
+    const wrapper = renderWithTheme(
+      <Portal.Provider>
+        <Modal visible transparent>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('trigger onShow callback correctly', () => {
+    const onShow = jest.fn();
+    renderWithTheme(
+      <Portal.Provider>
+        <Modal visible onShow={onShow}>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    expect(onShow).toBeCalledTimes(1);
+  });
+
+  it('trigger onRequestClose callback correctly', () => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: 'android',
+      select: () => null,
+    }));
+
+    const onRequestClose = jest.fn();
+    renderWithTheme(
+      <Portal.Provider>
+        <Modal visible onRequestClose={onRequestClose}>
+          <Typography.Body>Modal content</Typography.Body>
+        </Modal>
+      </Portal.Provider>
+    );
+
+    // @ts-expect-error: BackHandler mock
+    BackHandler.mockPressBack();
+    expect(onRequestClose).toBeCalled();
+  });
+
+  it('trigger onDismiss callback correctly', async () => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: 'ios',
+      select: () => null,
+    }));
+
+    const onDismiss = jest.fn();
+
+    const ModalExample = () => {
+      const [modalVisible, setModalVisible] = React.useState(true);
+
+      return (
+        <Portal.Provider>
+          <Modal
+            animationType="none"
+            visible={modalVisible}
+            onDismiss={onDismiss}
+            transparent
+          >
+            <Typography.Body>Modal content</Typography.Body>
+            <Button text="Close modal" onPress={() => setModalVisible(false)} />
+          </Modal>
+        </Portal.Provider>
+      );
+    };
+
+    const { getByText } = renderWithTheme(<ModalExample />);
+
+    fireEvent.press(getByText('Close modal'));
+    expect(onDismiss).toBeCalled();
+  });
+});