@hero-design/rn 8.13.0 → 8.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.13.0",
+  "version": "8.15.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.13.0",
+    "@hero-design/colors": "8.15.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.13.0",
+    "@hero-design/eslint-plugin": "8.15.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@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.13.0",
+    "eslint-config-hd": "8.15.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.13.0",
+    "prettier-config-hd": "8.15.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap

@@ -36,7 +36,6 @@ exports[`StyledAvatar renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
-          "display": "flex",
           "height": "100%",
           "justifyContent": "center",
           "width": "100%",

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap

@@ -50,7 +50,6 @@ exports[`AvatarStack renders correctly by default 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "display": "flex",
             "height": "100%",
             "justifyContent": "center",
             "width": "100%",
@@ -128,7 +127,6 @@ exports[`AvatarStack renders correctly by default 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "display": "flex",
             "height": "100%",
             "justifyContent": "center",
             "width": "100%",
@@ -206,7 +204,6 @@ exports[`AvatarStack renders correctly by default 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "display": "flex",
             "height": "100%",
             "justifyContent": "center",
             "width": "100%",
@@ -284,7 +281,6 @@ exports[`AvatarStack renders correctly by default 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "display": "flex",
             "height": "100%",
             "justifyContent": "center",
             "width": "100%",
@@ -362,7 +358,6 @@ exports[`AvatarStack renders correctly by default 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "display": "flex",
             "height": "100%",
             "justifyContent": "center",
             "width": "100%",
@@ -459,7 +454,6 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "display": "flex",
             "height": "100%",
             "justifyContent": "center",
             "width": "100%",
@@ -537,7 +531,6 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "display": "flex",
             "height": "100%",
             "justifyContent": "center",
             "width": "100%",
@@ -615,7 +608,6 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "display": "flex",
             "height": "100%",
             "justifyContent": "center",
             "width": "100%",
@@ -693,7 +685,6 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
         Array [
           Object {
             "alignItems": "center",
-            "display": "flex",
             "height": "100%",
             "justifyContent": "center",
             "width": "100%",

package/src/components/Avatar/StyledAvatar.tsx

@@ -1,4 +1,4 @@
-import { View, Image, TouchableOpacity } from 'react-native';
+import { View, Image, TouchableOpacity, Platform } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 import { TextProps } from '../Typography/Text';
@@ -28,7 +28,6 @@ const StyledWrapper = styled(TouchableOpacity)<{
 const StyledTextWrapper = styled(View)(() => ({
   alignItems: 'center',
   justifyContent: 'center',
-  display: 'flex',
   width: '100%',
   height: '100%',
 }));
@@ -40,11 +39,22 @@ const StyledText = styled(Typography.Text)<
 >(({ themeSize, theme }) => ({
   fontFamily: theme.__hd__.avatar.fonts.default,
   fontSize: theme.__hd__.avatar.fontSizes[themeSize],
-  lineHeight: 0, // auto center
   textAlignVertical: 'center',
   textAlign: 'center',
   color: theme.__hd__.avatar.colors.text,
   overflow: 'hidden',
+  ...Platform.select({
+    ios: {
+      lineHeight: 0, // center on ios
+    },
+    android: {
+      lineHeight: null as unknown as number, // center on android
+      marginTop: theme.__hd__.avatar.spaces.titleMarginTopForAndroid[themeSize],
+    },
+    web: {
+      lineHeight: null as unknown as number, // center on android
+    },
+  }),
 }));
 
 const StyledImage = styled(Image)<{

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

@@ -33,7 +33,6 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
       Array [
         Object {
           "alignItems": "center",
-          "display": "flex",
           "height": "100%",
           "justifyContent": "center",
           "width": "100%",
@@ -187,7 +186,6 @@ exports[`Avatar shows title when there is no source 1`] = `
       Array [
         Object {
           "alignItems": "center",
-          "display": "flex",
           "height": "100%",
           "justifyContent": "center",
           "width": "100%",

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

@@ -57,6 +57,7 @@ exports[`Error renders error screen with image correctly 1`] = `
       testID="error-image"
     />
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -86,6 +87,7 @@ exports[`Error renders error screen with image correctly 1`] = `
       We’re sorry, something went wrong
     </Text>
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -190,6 +192,7 @@ exports[`Error renders full screen error page correctly 1`] = `
         testID="error-image"
       />
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -219,6 +222,7 @@ exports[`Error renders full screen error page correctly 1`] = `
         We’re sorry, something went wrong
       </Text>
       <Text
+        allowFontScaling={false}
         style={
           Array [
             Object {
@@ -282,6 +286,7 @@ exports[`Error renders title only correctly 1`] = `
     }
   >
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {
@@ -311,6 +316,7 @@ exports[`Error renders title only correctly 1`] = `
       We’re sorry, something went wrong
     </Text>
     <Text
+      allowFontScaling={false}
       style={
         Array [
           Object {

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

@@ -9,7 +9,7 @@ const description = 'Please try again later';
 describe('Error', () => {
   it('renders title only correctly', () => {
     const { toJSON, getByText } = renderWithTheme(
-      <Error visible title={title} description={description} />
+      <Error title={title} description={description} />
     );
 
     expect(getByText(title)).toBeTruthy();
@@ -18,12 +18,7 @@ describe('Error', () => {
   });
   it('renders error screen with image correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
-      <Error
-        visible
-        title={title}
-        description={description}
-        image="path_to_image"
-      />
+      <Error title={title} description={description} image="path_to_image" />
     );
 
     expect(getByText(title)).toBeTruthy();
@@ -34,7 +29,6 @@ describe('Error', () => {
   it('renders full screen error page correctly', () => {
     const { toJSON, getByText, getByTestId } = renderWithTheme(
       <Error
-        visible
         variant="full-screen"
         title={title}
         description={description}
@@ -52,7 +46,6 @@ describe('Error', () => {
     const onSecondaryCtaPress = jest.fn();
     const { getByText } = renderWithTheme(
       <Error
-        visible
         title={title}
         description={description}
         image="path_to_image"

package/src/components/Error/index.tsx

@@ -13,8 +13,15 @@ import {
   StyledErrorModal,
   StyledErrorTitle,
 } from './StyledError';
+import { useDeprecation } from '../../utils/hooks';
 
-interface ErrorPageProps extends ViewProps {
+interface ErrorProps extends ViewProps {
+  /**
+   * @deprecated use conditional rendering instead
+   *
+   * Visibility of the error
+   */
+  visible?: boolean;
   /**
    * Variant of the error
    */
@@ -53,13 +60,6 @@ interface ErrorPageProps extends ViewProps {
   onSecondaryCtaPress?: () => void;
 }
 
-type ErrorProps = ErrorPageProps & {
-  /**
-   * Visibility of the error
-   */
-  visible: boolean;
-};
-
 type onCloseCallbackType = 'cta' | 'secondaryCta' | null;
 
 const ErrorPage = ({
@@ -73,7 +73,7 @@ const ErrorPage = ({
   secondaryCtaText,
   onSecondaryCtaPress,
   ...nativeProps
-}: ErrorPageProps): ReactElement => {
+}: ErrorProps): ReactElement => {
   const showCta = ctaText && onCtaPress !== undefined;
   const showSecondaryCta =
     secondaryCtaText && onSecondaryCtaPress !== undefined;
@@ -127,6 +127,7 @@ const Error = ({
   variant = 'in-page',
   title,
   description,
+  image,
   testID,
   ctaText,
   onCtaPress,
@@ -134,6 +135,11 @@ const Error = ({
   onSecondaryCtaPress,
   ...nativeProps
 }: ErrorProps): ReactElement => {
+  useDeprecation(
+    `Visible prop is deprecated. Use conditional rendering instead`,
+    visible
+  );
+
   const [isVisible, setIsVisible] = useState(visible);
   const [ctaPressed, setCtaPressed] = useState<onCloseCallbackType>(null);
 
@@ -176,6 +182,7 @@ const Error = ({
           variant={variant}
           title={title}
           description={description}
+          image={image}
           testID={testID}
           ctaText={ctaText}
           onCtaPress={
@@ -202,6 +209,7 @@ const Error = ({
       variant={variant}
       title={title}
       description={description}
+      image={image}
       testID={testID}
       ctaText={ctaText}
       onCtaPress={onCtaPress}

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

package/src/components/Icon/IconList.ts

@@ -11,6 +11,7 @@ const IconList = [
   'bank',
   'bell',
   'billing',
+  'bolt',
   'bookmark-added',
   'bookmark',
   'box-check',
@@ -155,6 +156,7 @@ const IconList = [
   'steps-circle',
   'stopwatch',
   'suitcase',
+  'surfing',
   'survey',
   'swag-pillar-benefit',
   'swag-pillar-career',
@@ -195,12 +197,14 @@ const IconList = [
   'article-outlined',
   'at-sign',
   'auto-graph-outlined',
+  'beer-outlined',
   'bell-active-outlined',
   'bell-outlined',
   'bell-slash-outlined',
   'billing-outlined',
   'body-outlined',
   'bold',
+  'book-outlined',
   'bookmark-added-outlined',
   'bookmark-outlined',
   'box-check-outlined',
@@ -237,6 +241,7 @@ const IconList = [
   'contacts-user-outlined',
   'credit-card-outlined',
   'cup-outlined',
+  'dentistry-outlined',
   'direction-arrows-outlined',
   'directory-outlined',
   'document-outlined',
@@ -263,6 +268,7 @@ const IconList = [
   'face-open-smiley-outlined',
   'face-sad-outlined',
   'face-smiley-outlined',
+  'fastfood-outlined',
   'feed-outlined',
   'file-certified-outlined',
   'file-clone-outlined',
@@ -281,6 +287,7 @@ const IconList = [
   'filter-outlined',
   'folder-outlined',
   'folder-user-outlined',
+  'form-outlined',
   'funnel-filter-outline',
   'graph-outlined',
   'hand-holding-user-outlined',
@@ -357,12 +364,16 @@ const IconList = [
   'star-outlined',
   'stopwatch-outlined',
   'strikethrough',
+  'styler-outlined',
   'suitcase-clock-outlined',
   'suitcase-outlined',
   'survey-outlined',
   'switch-outlined',
   'sync',
+  'tag-outlined',
   'target-outlined',
+  'tennis-outlined',
+  'ticket-outlined',
   'timesheet-outlined',
   'today-outlined',
   'transfer',
@@ -379,6 +390,7 @@ const IconList = [
   'user-rectangle-outlined',
   'video-1-outlined',
   'video-2-outlined',
+  'volunteer-outlined',
   'wallet-outlined',
 ] as const;
 

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

@@ -89,7 +89,6 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               Array [
                 Object {
                   "alignItems": "center",
-                  "display": "flex",
                   "height": "100%",
                   "justifyContent": "center",
                   "width": "100%",
@@ -679,7 +678,6 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
               Array [
                 Object {
                   "alignItems": "center",
-                  "display": "flex",
                   "height": "100%",
                   "justifyContent": "center",
                   "width": "100%",

package/src/components/Select/MultiSelect/__tests__/index.spec.tsx

@@ -218,6 +218,25 @@ describe('rendering', () => {
     expect(queryByText('Custom value')).toBeNull();
   });
 
+  it('renders initial value when renderSelectedValue is passed', () => {
+    const { queryByText } = renderWithTheme(
+      <MultiSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        footerLabel="Confirm"
+        options={collaboratorSections}
+        value={['Jack', 'Jane']}
+        onConfirm={jest.fn()}
+        renderSelectedValue={(selectedValue, _inputProps) => (
+          <Typography.Text>{`Selected: ${selectedValue.join(
+            ', '
+          )}`}</Typography.Text>
+        )}
+      />
+    );
+
+    expect(queryByText('Selected: Jack, Jane')).toBeTruthy();
+  });
+
   it('allows custom footer', () => {
     const { getByText, queryByText } = renderWithTheme(
       <MultiSelect<string, CustomOptionType>

package/src/components/Select/MultiSelect/index.tsx

@@ -80,6 +80,7 @@ function MultiSelect<V, T extends OptionType<V>>({
     .filter((opt) => value.includes(opt.value))
     .map((opt) => opt.text)
     .join(', ');
+  const rawValue = value.length > 0 ? value.join(', ') : '';
 
   useEffect(() => {
     setSelectingValue(value);
@@ -100,7 +101,7 @@ function MultiSelect<V, T extends OptionType<V>>({
             <TextInput
               {...inputProps}
               label={label}
-              value={displayedValue}
+              value={renderSelectedValue ? rawValue : displayedValue}
               suffix="arrow-down"
               multiline
               error={error}
@@ -111,7 +112,7 @@ function MultiSelect<V, T extends OptionType<V>>({
               style={style}
               testID={testID}
               renderInputValue={
-                renderSelectedValue !== undefined && displayedValue?.length > 0
+                renderSelectedValue !== undefined && rawValue?.length > 0
                   ? (props) => renderSelectedValue(value, props)
                   : undefined
               }
@@ -121,8 +122,10 @@ function MultiSelect<V, T extends OptionType<V>>({
       </View>
       <BottomSheet
         open={open}
-        onRequestClose={() => setOpen(false)}
-        onDismiss={onDismiss}
+        onRequestClose={() => {
+          onDismiss?.();
+          setOpen(false);
+        }}
         header={label}
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,

package/src/components/Select/SingleSelect/__tests__/index.spec.tsx

@@ -197,6 +197,22 @@ describe('rendering', () => {
     );
     expect(queryByText('Custom value')).toBeNull();
   });
+
+  it('renders initial value when renderSelectedValue is passed', () => {
+    const { getByText } = renderWithTheme(
+      <SingleSelect<string, CustomOptionType>
+        label="Choose collaborators"
+        options={collaboratorSections}
+        value="Jack"
+        onConfirm={jest.fn()}
+        renderSelectedValue={(selectedValue) => (
+          <Typography.Text>{`Selected: ${selectedValue}`}</Typography.Text>
+        )}
+      />
+    );
+
+    expect(getByText('Selected: Jack')).toBeTruthy();
+  });
 });
 
 describe('behavior', () => {

package/src/components/Select/SingleSelect/index.tsx

@@ -61,6 +61,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
   const sections = toSections(options);
   const flatOptions = toFlatOptions(options);
   const displayedValue = flatOptions.find((opt) => value === opt.value)?.text;
+  const rawValue = value ? String(value) : undefined;
 
   return (
     <>
@@ -77,7 +78,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
             <TextInput
               {...inputProps}
               label={label}
-              value={displayedValue}
+              value={renderSelectedValue ? rawValue : displayedValue}
               suffix="arrow-down"
               multiline
               error={error}
@@ -88,7 +89,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
               style={style}
               testID={testID}
               renderInputValue={
-                renderSelectedValue !== undefined && !!displayedValue
+                renderSelectedValue !== undefined && !!rawValue
                   ? (props) => renderSelectedValue(value, props)
                   : undefined
               }
@@ -98,8 +99,10 @@ const SingleSelect = <V, T extends OptionType<V>>({
       </View>
       <BottomSheet
         open={open}
-        onRequestClose={() => setOpen(false)}
-        onDismiss={onDismiss}
+        onRequestClose={() => {
+          onDismiss?.();
+          setOpen(false);
+        }}
         header={label}
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -80,16 +80,6 @@ Object {
       "fonts": Object {
         "default": "BeVietnamPro-Regular",
       },
-      "lineHeights": Object {
-        "large": 28,
-        "medium": 26,
-        "small": 24,
-        "xlarge": 32,
-        "xxlarge": 44,
-        "xxxlarge": 36,
-        "xxxxlarge": 39,
-        "xxxxxlarge": 42,
-      },
       "radii": Object {
         "rounded": 999,
       },
@@ -103,6 +93,18 @@ Object {
         "xxxxlarge": 96,
         "xxxxxlarge": 136,
       },
+      "spaces": Object {
+        "titleMarginTopForAndroid": Object {
+          "large": -4,
+          "medium": -4,
+          "small": -2,
+          "xlarge": -4,
+          "xxlarge": -6,
+          "xxxlarge": -6,
+          "xxxxlarge": -8,
+          "xxxxxlarge": -8,
+        },
+      },
     },
     "badge": Object {
       "colors": Object {