@hero-design/rn 8.61.0 → 8.61.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.61.0",
+  "version": "8.61.2",
   "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/src/components/Button/Button.tsx

@@ -1,6 +1,7 @@
-import React, { ReactChild, useMemo } from 'react';
+import React, { ReactChild, ReactNode, useMemo } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { Theme, useTheme } from '../../theme';
+import { useDeprecation } from '../../utils/hooks';
 import type { IconName } from '../Icon';
 import LoadingIndicator from './LoadingIndicator';
 import type { Intent, ThemeVariant } from './StyledButton';
@@ -11,7 +12,6 @@ import {
   StyledButtonText,
   StyledButtonTitleOfVariantText,
 } from './StyledButton';
-import { useDeprecation } from '../../utils/hooks';
 
 export interface ButtonProps {
   /**
@@ -29,7 +29,7 @@ export interface ButtonProps {
   /**
    * Places an icon within the button, before the button's text
    */
-  icon?: IconName;
+  icon?: IconName | ReactNode;
   /**
    * Visual intent color to apply to button. It is required for `filled`, `outlined` and `text` variants.
    */
@@ -45,7 +45,7 @@ export interface ButtonProps {
   /**
    * Places an icon within the button, after the button's text
    */
-  rightIcon?: IconName;
+  rightIcon?: IconName | ReactNode;
   /**
    * Additional style.
    */
@@ -64,6 +64,10 @@ export interface ButtonProps {
   variant?: 'filled' | 'outlined' | 'text';
 }
 
+const isIconName = (icon: IconName | ReactNode): icon is IconName => {
+  return typeof icon === 'string';
+};
+
 const FILLED_VARIANTS = {
   primary: 'filled-primary',
   secondary: 'filled-secondary',
@@ -179,12 +183,16 @@ const Button = ({
         <>
           {icon !== undefined && (
             <StyledButtonIconWrapper themePosition="left">
-              <StyledButtonIcon
-                disabled={disabled}
-                icon={icon}
-                testID={`${testID}-left-icon`}
-                themeButtonVariant={themeVariant}
-              />
+              {isIconName(icon) ? (
+                <StyledButtonIcon
+                  disabled={disabled}
+                  icon={icon}
+                  testID={`${testID}-left-icon`}
+                  themeButtonVariant={themeVariant}
+                />
+              ) : (
+                icon
+              )}
             </StyledButtonIconWrapper>
           )}
           {isTextVariant(themeVariant) ? (
@@ -210,12 +218,16 @@ const Button = ({
           )}
           {rightIcon !== undefined && (
             <StyledButtonIconWrapper themePosition="right">
-              <StyledButtonIcon
-                disabled={disabled}
-                icon={rightIcon}
-                testID={`${testID}-right-icon`}
-                themeButtonVariant={themeVariant}
-              />
+              {isIconName(rightIcon) ? (
+                <StyledButtonIcon
+                  disabled={disabled}
+                  icon={rightIcon}
+                  testID={`${testID}-right-icon`}
+                  themeButtonVariant={themeVariant}
+                />
+              ) : (
+                rightIcon
+              )}
             </StyledButtonIconWrapper>
           )}
         </>

package/src/components/Button/__tests__/Button.spec.tsx

@@ -5,6 +5,7 @@ import renderWithTheme from '../../../testHelpers/renderWithTheme';
 
 import Button from '..';
 import { getThemeVariant } from '../Button';
+import Icon from '../../Icon';
 
 describe('Button', () => {
   it('renders button text', () => {
@@ -45,6 +46,23 @@ describe('Button', () => {
     expect(getByTestId('button-right-icon')).toBeDefined();
   });
 
+  it('allows render custom icon', () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <Button
+        text="A button"
+        icon={<Icon testID="custom-button-icon-left" icon="add" size="small" />}
+        rightIcon={
+          <Icon testID="custom-button-icon-right" icon="add" size="small" />
+        }
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('custom-button-icon-left')).toBeDefined();
+    expect(getByTestId('custom-button-icon-right')).toBeDefined();
+  });
+
   it('renders loading icon', () => {
     const { getByTestId, toJSON } = renderWithTheme(
       <Button text="A button" testID="button" onPress={jest.fn()} loading />

package/src/components/Button/__tests__/__snapshots__/Button.spec.tsx.snap

@@ -1,5 +1,161 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Button allows render custom icon 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    accessibilityState={
+      {
+        "disabled": false,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      [
+        {
+          "alignItems": "center",
+          "alignSelf": "stretch",
+          "backgroundColor": "#401960",
+          "borderRadius": 32,
+          "flexDirection": "row",
+          "height": 60,
+          "justifyContent": "center",
+          "padding": 16,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "paddingRight": 12,
+          },
+          undefined,
+        ]
+      }
+      themePosition="left"
+    >
+      <HeroIcon
+        name="add"
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        testID="custom-button-icon-left"
+        themeIntent="text"
+        themeSize="small"
+      />
+    </View>
+    <Text
+      allowFontScaling={false}
+      disabled={false}
+      ellipsizeMode="tail"
+      numberOfLines={1}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontSize": 18,
+            "letterSpacing": 0.24,
+            "lineHeight": 28,
+          },
+          [
+            {
+              "color": "#ffffff",
+              "flexShrink": 1,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeButtonVariant="filled-primary"
+      themeIntent="body"
+      themeLevel="h5"
+      themeTypeface="neutral"
+    >
+      A button
+    </Text>
+    <View
+      style={
+        [
+          {
+            "paddingLeft": 12,
+          },
+          undefined,
+        ]
+      }
+      themePosition="right"
+    >
+      <HeroIcon
+        name="add"
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        testID="custom-button-icon-right"
+        themeIntent="text"
+        themeSize="small"
+      />
+    </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[`Button renders correctly 1`] = `
 <View
   style={

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

package/src/components/Icon/IconList.ts

@@ -380,6 +380,7 @@ const IconList = [
   'send-outlined',
   'share-1',
   'share-2',
+  'share-outlined-2',
   'share-outlined',
   'shopping_basket_outlined',
   'show-chart-outlined',

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/Button/Button.d.ts

@@ -1,4 +1,4 @@
-import { ReactChild } from 'react';
+import { ReactChild, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { IconName } from '../Icon';
 import type { Intent, ThemeVariant } from './StyledButton';
@@ -18,7 +18,7 @@ export interface ButtonProps {
     /**
      * Places an icon within the button, before the button's text
      */
-    icon?: IconName;
+    icon?: IconName | ReactNode;
     /**
      * Visual intent color to apply to button. It is required for `filled`, `outlined` and `text` variants.
      */
@@ -34,7 +34,7 @@ export interface ButtonProps {
     /**
      * Places an icon within the button, after the button's text
      */
-    rightIcon?: IconName;
+    rightIcon?: IconName | ReactNode;
     /**
      * Additional style.
      */

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;