@hero-design/rn 8.5.0 → 8.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.5.0",
+  "version": "8.6.1",
   "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.5.0",
+    "@hero-design/colors": "8.6.1",
     "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.5.0",
+    "@hero-design/eslint-plugin": "8.6.1",
     "@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.5.0",
+    "eslint-config-hd": "8.6.1",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.5.0",
+    "prettier-config-hd": "8.6.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Carousel/CarouselItem.tsx

@@ -1,18 +1,24 @@
 import React from 'react';
-
 import {
   StyledCarouselContentWrapper,
   StyledCarouselHeading,
   StyledCarouselImage,
+  StyledCustomSizeCarouselImage,
 } from './StyledCarousel';
 import Box from '../Box';
 import Typography from '../Typography';
-import { CarouselData } from './types';
+import { CarouselData, CarouselImageProps } from './types';
 
 interface CarouselItemProps extends Omit<CarouselData, 'background'> {
   width: number;
 }
 
+function isCarouselImageProps(
+  image: CarouselImageProps | string
+): image is CarouselImageProps {
+  return typeof image !== 'string';
+}
+
 const CarouselItem = ({
   width,
   image,
@@ -22,11 +28,17 @@ const CarouselItem = ({
 }: CarouselItemProps) => {
   return (
     <Box style={{ width }}>
-      {image && (
-        <StyledCarouselImage
-          source={typeof image === 'string' ? { uri: image } : image}
-        />
-      )}
+      {image &&
+        (isCarouselImageProps(image) ? (
+          <StyledCustomSizeCarouselImage
+            source={image}
+            height={image.height}
+            width={image.width}
+            resizeMode={image.resizeMode}
+          />
+        ) : (
+          <StyledCarouselImage source={{ uri: image }} />
+        ))}
 
       <StyledCarouselContentWrapper
         paddingHorizontal="large"

package/src/components/Carousel/StyledCarousel.tsx

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { View, ImageResizeMode } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 import Image from '../Image';
@@ -35,6 +35,17 @@ const StyledCarouselImage = styled(Image)(() => ({
   resizeMode: 'contain',
 }));
 
+const StyledCustomSizeCarouselImage = styled(Image)<{
+  height?: number;
+  width?: number;
+  resizeMode?: ImageResizeMode;
+}>(({ height, resizeMode = 'contain', width }) => ({
+  alignSelf: 'center',
+  width,
+  height,
+  resizeMode,
+}));
+
 const StyledCarouselContentWrapper = styled(Box)<{
   width: number;
 }>(({ width }) => ({
@@ -57,4 +68,5 @@ export {
   StyledCarouselImage,
   StyledCarouselContentWrapper,
   StyledCarouselFooterWrapper,
+  StyledCustomSizeCarouselImage,
 };

package/src/components/Carousel/index.tsx

@@ -46,6 +46,10 @@ interface CarouselProps extends ViewProps {
    * Render action elements function.
    */
   renderActions?: (pageIndex: number) => JSX.Element;
+  /**
+   * Should show paginations
+   */
+  shouldShowPagination?: (pageIndex: number) => boolean;
   /**
    * Current selected item index.
    */
@@ -68,6 +72,7 @@ const Carousel = ({
   renderActions,
   selectedItemIndex = 0,
   style,
+  shouldShowPagination = () => true,
   ...nativeProps
 }: CarouselProps) => {
   const carouselRef = useRef<FlatList>(null);
@@ -147,7 +152,12 @@ const Carousel = ({
         />
         <StyledCarouselFooterWrapper>
           {renderActions && renderActions(currentSlideIndex)}
-          <CarouselPaginator numberOfSlides={items.length} scrollX={scrollX} />
+          {shouldShowPagination(currentSlideIndex) && (
+            <CarouselPaginator
+              numberOfSlides={items.length}
+              scrollX={scrollX}
+            />
+          )}
         </StyledCarouselFooterWrapper>
       </StyledCarouselView>
     </View>

package/src/components/Carousel/types.ts

@@ -1,8 +1,14 @@
 import { ReactNode } from 'react';
-import { ImageSourcePropType } from 'react-native';
+import { ImageSourcePropType, ImageResizeMode } from 'react-native';
+
+export type CarouselImageProps = ImageSourcePropType & {
+  height?: number;
+  width?: number;
+  resizeMode?: ImageResizeMode;
+};
 
 export type CarouselData = {
-  image: ImageSourcePropType | string;
+  image: CarouselImageProps | string;
   content?: ReactNode;
   heading: string;
   body?: string;

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

package/src/components/Icon/IconList.ts

@@ -231,6 +231,7 @@ const IconList = [
   'document-outlined',
   'dollar-card-outlined',
   'dollar-coin-shine-outlined',
+  'dollar-credit-card-outlined',
   'dollar-sign',
   'double-buildings-outlined',
   'double-left-arrows',
@@ -262,6 +263,7 @@ const IconList = [
   'file-outlined',
   'file-search-outlined',
   'file-secured-outlined',
+  'file-statutory-outlined',
   'file-verified-outlined',
   'filter-outlined',
   'folder-outlined',

package/src/components/List/ListItem.tsx

@@ -117,11 +117,7 @@ const ListItem = ({
               </StyledPrefixContainer>
             )}
             <StyledTitleContainer>
-              <Typography.Text
-                intent="body"
-                fontSize="large"
-                fontWeight="semi-bold"
-              >
+              <Typography.Text intent="body" fontSize="large">
                 {title}
               </Typography.Text>
               {!!subtitle && (

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

@@ -131,7 +131,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 16,
                 "letterSpacing": 0.48,
                 "lineHeight": 24,
@@ -140,7 +140,7 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
             ]
           }
           themeFontSize="large"
-          themeFontWeight="semi-bold"
+          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
         >
@@ -372,7 +372,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 16,
                 "letterSpacing": 0.48,
                 "lineHeight": 24,
@@ -381,7 +381,7 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
             ]
           }
           themeFontSize="large"
-          themeFontWeight="semi-bold"
+          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
         >
@@ -514,7 +514,7 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 16,
                 "letterSpacing": 0.48,
                 "lineHeight": 24,
@@ -523,7 +523,7 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
             ]
           }
           themeFontSize="large"
-          themeFontWeight="semi-bold"
+          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
         >
@@ -692,7 +692,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
             Array [
               Object {
                 "color": "#001f23",
-                "fontFamily": "BeVietnamPro-SemiBold",
+                "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 16,
                 "letterSpacing": 0.48,
                 "lineHeight": 24,
@@ -701,7 +701,7 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
             ]
           }
           themeFontSize="large"
-          themeFontWeight="semi-bold"
+          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
         >

package/src/components/SwipeableV2/StyledSwipeable.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/native';
+import { Animated, View } from 'react-native';
+
+export type ActionIntent = 'primary' | 'success' | 'danger';
+
+const StyledWrapper = styled(View)(() => ({
+  flexDirection: 'row',
+}));
+
+const StyledContent = styled(Animated.View)(() => ({
+  flex: 1,
+}));
+
+export { StyledWrapper, StyledContent };

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

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Swipeable renders correctly 1`] = `
+<View
+  onLayout={[Function]}
+  onMoveShouldSetResponder={[Function]}
+  onMoveShouldSetResponderCapture={[Function]}
+  onResponderEnd={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderReject={[Function]}
+  onResponderRelease={[Function]}
+  onResponderStart={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  onStartShouldSetResponderCapture={[Function]}
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+      },
+      Array [
+        Object {
+          "flexDirection": "row",
+        },
+        undefined,
+      ],
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "marginLeft": -0,
+        "transform": Array [
+          Object {
+            "translateX": 0.5,
+          },
+        ],
+        "width": 0,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-end",
+            "flex": 1,
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        Archive
+      </Text>
+    </View>
+  </View>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "flex": 1,
+        "transform": Array [
+          Object {
+            "translateX": 0.5,
+          },
+        ],
+      }
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+      themeTypeface="neutral"
+    >
+      Swipeable Item
+    </Text>
+  </View>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "marginRight": -0,
+        "transform": Array [
+          Object {
+            "translateX": 0.5,
+          },
+        ],
+        "width": 0,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+            "flex": 1,
+            "justifyContent": "center",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        Approve
+      </Text>
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { View } from 'react-native';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Typography from '../../Typography';
+import SwipeableV2 from '..';
+
+describe('Swipeable', () => {
+  it('renders correctly', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <SwipeableV2
+        leftContent={
+          <View
+            style={[
+              {
+                flex: 1,
+                alignItems: 'flex-end',
+                justifyContent: 'center',
+              },
+            ]}
+          >
+            <Typography.Text>Archive</Typography.Text>
+          </View>
+        }
+        rightContent={
+          <View
+            style={[
+              {
+                flex: 1,
+                alignItems: 'flex-start',
+                justifyContent: 'center',
+              },
+            ]}
+          >
+            <Typography.Text>Approve</Typography.Text>
+          </View>
+        }
+        rightActionsWidth={168}
+      >
+        <Typography.Text>Swipeable Item</Typography.Text>
+      </SwipeableV2>
+    );
+
+    expect(getByText('Swipeable Item')).toBeDefined();
+    expect(getByText('Archive')).toBeDefined();
+    expect(getByText('Approve')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});