@hero-design/rn 7.23.0 → 7.25.0

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -102,7 +102,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -181,7 +181,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -260,7 +260,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -339,7 +339,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -418,7 +418,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -498,7 +498,7 @@ exports[`ActionGroup has active false 1`] = `
         Object {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "backgroundColor": "#001f23",
+          "backgroundColor": "#401960",
           "borderRadius": 999,
           "flexDirection": "row",
           "justifyContent": "center",
@@ -665,7 +665,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -744,7 +744,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -823,7 +823,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -902,7 +902,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -981,7 +981,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -1061,7 +1061,7 @@ exports[`ActionGroup has active true 1`] = `
         Object {
           "alignItems": "center",
           "alignSelf": "flex-start",
-          "backgroundColor": "#001f23",
+          "backgroundColor": "#401960",
           "borderRadius": 999,
           "flexDirection": "row",
           "justifyContent": "center",

package/src/components/FAB/__tests__/__snapshots__/StyledFAB.spec.tsx.snap

@@ -16,7 +16,7 @@ exports[`StyledFABContainer renders correctly 1`] = `
       Object {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "flexDirection": "row",
         "justifyContent": "center",

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

@@ -16,7 +16,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
       Object {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -72,7 +72,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
       Object {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -142,7 +142,7 @@ exports[`FAB when title has value renders correctly 1`] = `
       Object {
         "alignItems": "center",
         "alignSelf": "flex-start",
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "flexDirection": "row",
         "justifyContent": "center",

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

@@ -0,0 +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,"bookmark":59011,"box-check":59012,"box":59013,"buildings":59014,"cake":59015,"calendar-clock":59016,"calendar":59017,"candy-box-menu":59018,"carat-down-small":59019,"carat-down":59020,"carat-left-small":59021,"carat-left":59022,"carat-right-small":59023,"carat-right":59024,"carat-up-small":59025,"carat-up":59026,"check-radio":59027,"circle-add":59028,"circle-cancel":59029,"circle-check":59030,"circle-down":59031,"circle-info":59032,"circle-left":59033,"circle-ok":59034,"circle-pencil":59035,"circle-question":59036,"circle-remove":59037,"circle-right":59038,"circle-up":59039,"circle-warning":59040,"clock-3":59041,"clock":59042,"cloud-download":59043,"cloud-upload":59044,"cog":59045,"coin":59046,"contacts":59047,"credit-card":59048,"diamond":59049,"direction-arrows":59050,"directory":59051,"document":59052,"dollar-coin-shine":59053,"double-buildings":59054,"edit-template":59055,"envelope":59056,"expense":59057,"eye-circle":59058,"eye-invisible":59059,"eye":59060,"face-meh":59061,"face-sad":59062,"face-smiley":59063,"feed":59064,"feedbacks":59065,"file-certified":59066,"file-clone":59067,"file-copy":59068,"file-csv":59069,"file-dispose":59070,"file-doc":59071,"file-excel":59072,"file-export":59073,"file-lock":59074,"file-pdf":59075,"file-powerpoint":59076,"file-search":59077,"file-secured":59078,"file-sheets":59079,"file-slide":59080,"file-verified":59081,"file-word":59082,"file":59083,"filter":59084,"folder-user":59085,"folder":59086,"format-bold":59087,"format-heading1":59088,"format-heading2":59089,"format-italic":59090,"format-list-bulleted":59091,"format-list-numbered":59092,"format-underlined":59093,"funnel-filter":59094,"global-dollar":59095,"globe":59096,"graduation-cap":59097,"graph":59098,"happy-sun":59099,"health-bag":59100,"heart":59101,"home":59102,"image":59103,"import":59104,"incident-siren":59105,"instapay":59106,"list":59107,"loading-2":59108,"loading":59109,"location":59110,"lock":59111,"looks-one":59112,"looks-two":59113,"media-content":59114,"menu":59115,"moneybag":59116,"moon":59117,"multiple-stars":59118,"multiple-users":59119,"node":59120,"open-folder":59121,"paperclip":59122,"payment-summary":59123,"pencil":59124,"phone":59125,"piggy-bank":59126,"plane":59127,"play-circle":59128,"print":59129,"raising-hands":59130,"reply-arrow":59131,"reply":59132,"reschedule":59133,"rostering":59134,"save":59135,"schedule-send":59136,"schedule":59137,"search-person":59138,"send":59139,"speaker-active":59140,"speaker":59141,"star-award":59142,"star-badge":59143,"star-medal":59144,"star":59145,"steps-circle":59146,"stopwatch":59147,"suitcase":59148,"survey":59149,"swag":59150,"switch":59151,"tag":59152,"target":59153,"teams":59154,"timesheet":59155,"touch-id":59156,"trash-bin":59157,"unlock":59158,"user":59159,"video-1":59160,"video-2":59161,"wallet":59162,"warning":59163,"activate-outlined":59164,"add-credit-card-outlined":59165,"add-person-outlined":59166,"add-section-outlined":59167,"add-time-outlined":59168,"add":59169,"adjustment-outlined":59170,"alignment-2-outlined":59171,"alignment-outlined":59172,"all-caps":59173,"arrow-down":59174,"arrow-downwards":59175,"arrow-left":59176,"arrow-leftwards":59177,"arrow-right":59178,"arrow-rightwards":59179,"arrow-up":59180,"arrow-upwards":59181,"at-sign":59182,"bell-active-outlined":59183,"bell-outlined":59184,"bell-slash-outlined":59185,"billing-outlined":59186,"body-outlined":59187,"bold":59188,"bookmark-added-outlined":59189,"bookmark-outlined":59190,"box-check-outlined":59191,"box-outlined":59192,"bullet-points":59193,"cake-outlined":59194,"calendar-dates-outlined":59195,"calendar-star-outlined":59196,"camera-outlined":59197,"cancel":59198,"chat-bubble-outlined":59199,"chat-unread-outlined":59200,"checkmark":59201,"circle-add-outlined":59202,"circle-cancel-outlined":59203,"circle-down-outlined":59204,"circle-info-outlined":59205,"circle-left-outlined":59206,"circle-ok-outlined":59207,"circle-question-outlined":59208,"circle-remove-outlined":59209,"circle-right-outlined":59210,"circle-up-outlined":59211,"circle-warning-outlined":59212,"clock-2-outlined":59213,"clock-outlined":59214,"cog-outlined":59215,"coin-outlined":59216,"comment-outlined":59217,"contacts-outlined":59218,"credit-card-outlined":59219,"cup-outlined":59220,"direction-arrows-outlined":59221,"directory-outlined":59222,"document-outlined":59223,"dollar-card-outlined":59224,"dollar-coin-shine-outlined":59225,"dollar-sign":59226,"double-buildings-outlined":59227,"double-left-arrows":59228,"double-right-arrows":59229,"download-outlined":59230,"edit-template-outlined":59231,"email-outlined":59232,"enter-arrow":59233,"envelope-outlined":59234,"expense-outlined":59235,"explore-outlined":59236,"external-link":59237,"eye-invisible-outlined":59238,"eye-outlined":59239,"face-id":59240,"face-meh-outlined":59241,"face-open-smiley-outlined":59242,"face-sad-outlined":59243,"face-smiley-outlined":59244,"feed-outlined":59245,"file-certified-outlined":59246,"file-clone-outlined":59247,"file-copy-outlined":59248,"file-dispose-outlined":59249,"file-dollar-outlined":59250,"file-download-outlined":59251,"file-export-outlined":59252,"file-lock-outlined":59253,"file-outlined":59254,"file-search-outlined":59255,"file-secured-outlined":59256,"file-verified-outlined":59257,"filter-outlined":59258,"folder-outlined":59259,"folder-user-outlined":59260,"funnel-filter-outline":59261,"graph-outlined":59262,"happy-sun-outlined":59263,"health-bag-outlined":59264,"heart-outlined":59265,"home-active-outlined":59266,"home-outlined":59267,"id-card-outlined":59268,"image-outlined":59269,"import-outlined":59270,"instapay-outlined":59271,"italic":59272,"link-1":59273,"link-2":59274,"list-outlined":59275,"live-help-outlined":59276,"location-outlined":59277,"lock-outlined":59278,"locked-file-outlined":59279,"log-out":59280,"media-content-outlined":59281,"menu-close":59282,"menu-expand":59283,"menu-fold-outlined":59284,"menu-unfold-outlined":59285,"moneybag-outlined":59286,"moon-outlined":59287,"more-horizontal":59288,"more-vertical":59289,"multiple-folders-outlined":59290,"multiple-users-outlined":59291,"near-me-outlined":59292,"node-outlined":59293,"number-points":59294,"number":59295,"payment-summary-outlined":59296,"payslip-outlined":59297,"pencil-outlined":59298,"percentage":59299,"phone-outlined":59300,"piggy-bank-outlined":59301,"plane-outlined":59302,"play-circle-outlined":59303,"print-outlined":59304,"qr-code-outlined":59305,"re-assign":59306,"redeem":59307,"refresh":59308,"remove":59309,"reply-outlined":59310,"restart":59311,"return-arrow":59312,"rostering-outlined":59313,"save-outlined":59314,"schedule-outlined":59315,"search-outlined":59316,"search-secured-outlined":59317,"send-outlined":59318,"share-1":59319,"share-2":59320,"single-down-arrow":59321,"single-left-arrow":59322,"single-right-arrow":59323,"single-up-arrow":59324,"speaker-active-outlined":59325,"speaker-outlined":59326,"star-outlined":59327,"stopwatch-outlined":59328,"strikethrough":59329,"suitcase-outlined":59330,"survey-outlined":59331,"switch-outlined":59332,"sync":59333,"target-outlined":59334,"timesheet-outlined":59335,"transfer":59336,"trash-bin-outlined":59337,"umbrela-outlined":59338,"unavailable":59339,"underline":59340,"unlock-outlined":59341,"upload-outlined":59342,"user-circle-outlined":59343,"user-outlined":59344,"user-rectangle-outlined":59345,"video-1-outlined":59346,"video-2-outlined":59347,"wallet-outlined":59348}

package/src/components/Icon/HeroIcon/index.tsx

@@ -1,6 +1,6 @@
-import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
+import { createIconSet } from 'react-native-vector-icons';
 import styled from '@emotion/native';
-import heroIconConfig from './selection.json';
+import glyphMap from './glyphMap.json';
 
 type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type ThemeIntent =
@@ -14,11 +14,7 @@ type ThemeIntent =
   | 'disabled-text'
   | 'text-inverted';
 
-const HeroIcon = createIconSetFromIcoMoon(
-  heroIconConfig,
-  'hero-icons',
-  'hero-icons.ttf'
-);
+const HeroIcon = createIconSet(glyphMap, 'hero-icons', 'hero-icons.ttf');
 
 const COLOR_INTENTS = {
   text: 'text',

package/src/components/Icon/IconList.ts

@@ -1,10 +1,13 @@
+// 🔴 DO NOT EDIT — This file is generated automatically.
 const IconList = [
   'activate',
   'add-emoji',
   'add-person',
   'adjustment',
   'alignment',
+  'antenna',
   'archive',
+  'assignment-warning',
   'bank',
   'bell',
   'billing',
@@ -18,9 +21,13 @@ const IconList = [
   'candy-box-menu',
   'carat-down-small',
   'carat-down',
+  'carat-left-small',
   'carat-left',
+  'carat-right-small',
   'carat-right',
+  'carat-up-small',
   'carat-up',
+  'check-radio',
   'circle-add',
   'circle-cancel',
   'circle-check',
@@ -34,8 +41,8 @@ const IconList = [
   'circle-right',
   'circle-up',
   'circle-warning',
-  'clock',
   'clock-3',
+  'clock',
   'cloud-download',
   'cloud-upload',
   'cog',
@@ -77,7 +84,7 @@ const IconList = [
   'file-verified',
   'file-word',
   'file',
-  'filter-outlined',
+  'filter',
   'folder-user',
   'folder',
   'format-bold',
@@ -101,13 +108,12 @@ const IconList = [
   'incident-siren',
   'instapay',
   'list',
-  'loading',
   'loading-2',
+  'loading',
   'location',
   'lock',
   'looks-one',
   'looks-two',
-  'mandatory',
   'media-content',
   'menu',
   'moneybag',
@@ -125,8 +131,8 @@ const IconList = [
   'play-circle',
   'print',
   'raising-hands',
-  'reply',
   'reply-arrow',
+  'reply',
   'reschedule',
   'rostering',
   'save',
@@ -134,6 +140,7 @@ const IconList = [
   'schedule',
   'search-person',
   'send',
+  'speaker-active',
   'speaker',
   'star-award',
   'star-badge',
@@ -155,7 +162,10 @@ const IconList = [
   'user',
   'video-1',
   'video-2',
+  'wallet',
+  'warning',
   'activate-outlined',
+  'add-credit-card-outlined',
   'add-person-outlined',
   'add-section-outlined',
   'add-time-outlined',
@@ -165,14 +175,21 @@ const IconList = [
   'alignment-outlined',
   'all-caps',
   'arrow-down',
+  'arrow-downwards',
   'arrow-left',
+  'arrow-leftwards',
   'arrow-right',
+  'arrow-rightwards',
   'arrow-up',
+  'arrow-upwards',
   'at-sign',
+  'bell-active-outlined',
   'bell-outlined',
+  'bell-slash-outlined',
   'billing-outlined',
   'body-outlined',
   'bold',
+  'bookmark-added-outlined',
   'bookmark-outlined',
   'box-check-outlined',
   'box-outlined',
@@ -182,6 +199,8 @@ const IconList = [
   'calendar-star-outlined',
   'camera-outlined',
   'cancel',
+  'chat-bubble-outlined',
+  'chat-unread-outlined',
   'checkmark',
   'circle-add-outlined',
   'circle-cancel-outlined',
@@ -201,9 +220,11 @@ const IconList = [
   'comment-outlined',
   'contacts-outlined',
   'credit-card-outlined',
+  'cup-outlined',
   'direction-arrows-outlined',
   'directory-outlined',
   'document-outlined',
+  'dollar-card-outlined',
   'dollar-coin-shine-outlined',
   'dollar-sign',
   'double-buildings-outlined',
@@ -215,6 +236,7 @@ const IconList = [
   'enter-arrow',
   'envelope-outlined',
   'expense-outlined',
+  'explore-outlined',
   'external-link',
   'eye-invisible-outlined',
   'eye-outlined',
@@ -228,6 +250,7 @@ const IconList = [
   'file-clone-outlined',
   'file-copy-outlined',
   'file-dispose-outlined',
+  'file-dollar-outlined',
   'file-download-outlined',
   'file-export-outlined',
   'file-lock-outlined',
@@ -235,6 +258,7 @@ const IconList = [
   'file-search-outlined',
   'file-secured-outlined',
   'file-verified-outlined',
+  'filter-outlined',
   'folder-outlined',
   'folder-user-outlined',
   'funnel-filter-outline',
@@ -242,7 +266,9 @@ const IconList = [
   'happy-sun-outlined',
   'health-bag-outlined',
   'heart-outlined',
+  'home-active-outlined',
   'home-outlined',
+  'id-card-outlined',
   'image-outlined',
   'import-outlined',
   'instapay-outlined',
@@ -250,6 +276,7 @@ const IconList = [
   'link-1',
   'link-2',
   'list-outlined',
+  'live-help-outlined',
   'location-outlined',
   'lock-outlined',
   'locked-file-outlined',
@@ -265,6 +292,7 @@ const IconList = [
   'more-vertical',
   'multiple-folders-outlined',
   'multiple-users-outlined',
+  'near-me-outlined',
   'node-outlined',
   'number-points',
   'number',
@@ -289,6 +317,7 @@ const IconList = [
   'save-outlined',
   'schedule-outlined',
   'search-outlined',
+  'search-secured-outlined',
   'send-outlined',
   'share-1',
   'share-2',
@@ -296,6 +325,7 @@ const IconList = [
   'single-left-arrow',
   'single-right-arrow',
   'single-up-arrow',
+  'speaker-active-outlined',
   'speaker-outlined',
   'star-outlined',
   'stopwatch-outlined',
@@ -308,6 +338,7 @@ const IconList = [
   'timesheet-outlined',
   'transfer',
   'trash-bin-outlined',
+  'umbrela-outlined',
   'unavailable',
   'underline',
   'unlock-outlined',
@@ -318,7 +349,6 @@ const IconList = [
   'video-1-outlined',
   'video-2-outlined',
   'wallet-outlined',
-  'warning',
 ] as const;
 
 export default IconList;

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

@@ -71,7 +71,7 @@ exports[`Icon renders correctly with intent 1`] = `
   style={
     Array [
       Object {
-        "color": "#001f23",
+        "color": "#401960",
         "fontSize": 24,
       },
       undefined,

package/src/components/Icon/index.tsx

@@ -68,4 +68,5 @@ const Icon = ({
     />
   );
 
+Icon.List = IconList;
 export default Icon;

package/src/components/List/BasicListItem.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../theme';
 import Icon from '../Icon';
 import Typography from '../Typography';
 import {
@@ -61,8 +60,6 @@ const BasicListItem = ({
   disabled = false,
   onPress,
 }: ListItemProps): JSX.Element => {
-  const theme = useTheme();
-
   return (
     <StyledListItemContainer
       style={style}
@@ -71,14 +68,18 @@ const BasicListItem = ({
       themeDisabled={disabled}
       onPress={onPress}
       disabled={disabled}
-      underlayColor={
-        theme.__hd__.list.colors.highlightedListItemContainerBackground
-      }
     >
       <>
         {prefix && (
           <StyledPrefixContainer>
-            {typeof prefix === 'string' ? <Icon icon={prefix} /> : prefix}
+            {typeof prefix === 'string' ? (
+              <Icon
+                icon={prefix}
+                intent={disabled ? 'disabled-text' : 'primary'}
+              />
+            ) : (
+              prefix
+            )}
           </StyledPrefixContainer>
         )}
         <StyledTitleContainer>
@@ -98,7 +99,11 @@ const BasicListItem = ({
         {suffix && (
           <StyledSuffixContainer>
             {typeof suffix === 'string' ? (
-              <Icon icon={suffix} intent="text" size="small" />
+              <Icon
+                icon={suffix}
+                size="small"
+                intent={disabled ? 'disabled-text' : 'primary'}
+              />
             ) : (
               suffix
             )}

package/src/components/List/ListItem.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import { View } from 'react-native';
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { useTheme } from '../../theme';
 import Icon from '../Icon';
 import Typography from '../Typography';
 import {
@@ -82,7 +81,6 @@ const ListItem = ({
   onPress,
   disabled = false,
 }: ListItemProps): JSX.Element => {
-  const theme = useTheme();
   return (
     <StyledListItemContainer
       style={style}
@@ -91,9 +89,6 @@ const ListItem = ({
       themeVariant={variant}
       onPress={onPress}
       disabled={disabled}
-      underlayColor={
-        theme.__hd__.list.colors.highlightedListItemContainerBackground
-      }
     >
       <>
         {leadingStatus && (
@@ -111,7 +106,14 @@ const ListItem = ({
           >
             {prefix && (
               <StyledPrefixContainer>
-                {typeof prefix === 'string' ? <Icon icon={prefix} /> : prefix}
+                {typeof prefix === 'string' ? (
+                  <Icon
+                    icon={prefix}
+                    intent={disabled ? 'disabled-text' : 'primary'}
+                  />
+                ) : (
+                  prefix
+                )}
               </StyledPrefixContainer>
             )}
             <StyledTitleContainer>

package/src/components/List/StyledBasicListItem.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { TouchableHighlight, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 const StyledPrefixContainer = styled(View)(({ theme }) => ({
   marginRight: theme.__hd__.list.space.prefixContainerMarginRight,
@@ -11,7 +11,7 @@ const StyledTitleContainer = styled(View)(() => ({
   flex: 1,
 }));
 
-const StyledListItemContainer = styled(TouchableHighlight)<{
+const StyledListItemContainer = styled(TouchableOpacity)<{
   themeSelected?: boolean;
   themeDisabled?: boolean;
 }>(({ theme, themeSelected, themeDisabled }) => ({

package/src/components/List/StyledListItem.tsx

@@ -1,4 +1,4 @@
-import { TouchableHighlight, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import styled from '@emotion/native';
 
 export type Variant = 'full-width' | 'card';
@@ -9,7 +9,7 @@ export type LeadingStatusIntent =
   | 'info'
   | 'archived';
 
-const StyledListItemContainer = styled(TouchableHighlight)<{
+const StyledListItemContainer = styled(TouchableOpacity)<{
   themeSelected?: boolean;
   themeVariant?: Variant;
 }>(({ theme, themeSelected = false, themeVariant = 'basic' }) => {

package/src/components/List/__tests__/__snapshots__/BasicListItem.spec.tsx.snap

@@ -2,13 +2,10 @@
 
 exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`] = `
 <View
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -17,17 +14,14 @@ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "opacity": 1,
-        "padding": 16,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#ffffff",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
   }
   testID="basic-list-item"
 >
@@ -46,13 +40,13 @@ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontSize": 24,
           },
           undefined,
         ]
       }
-      themeIntent="text"
+      themeIntent="primary"
       themeSize="medium"
     />
   </View>
@@ -120,13 +114,13 @@ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`
       style={
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#401960",
             "fontSize": 20,
           },
           undefined,
         ]
       }
-      themeIntent="text"
+      themeIntent="primary"
       themeSize="small"
     />
   </View>
@@ -135,13 +129,10 @@ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`
 
 exports[`BasicListItem when suffix and prefix are react element renders correctly 1`] = `
 <View
-  accessibilityState={
-    Object {
-      "disabled": false,
-    }
-  }
   accessible={true}
+  collapsable={false}
   focusable={false}
+  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -150,17 +141,14 @@ exports[`BasicListItem when suffix and prefix are react element renders correctl
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 4,
-        "flexDirection": "row",
-        "opacity": 1,
-        "padding": 16,
-      },
-      undefined,
-    ]
+    Object {
+      "alignItems": "center",
+      "backgroundColor": "#ffffff",
+      "borderRadius": 4,
+      "flexDirection": "row",
+      "opacity": 1,
+      "padding": 16,
+    }
   }
   testID="basic-list-item"
 >