@hero-design/rn 8.4.0 → 8.5.0

package/package.json

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

package/src/components/Carousel/CarouselItem.tsx

@@ -35,7 +35,9 @@ const CarouselItem = ({
       >
         {content}
         <StyledCarouselHeading>{heading}</StyledCarouselHeading>
-        {body ? <Typography.Text>{body}</Typography.Text> : null}
+        {body ? (
+          <Typography.Text fontSize="large">{body}</Typography.Text>
+        ) : null}
       </StyledCarouselContentWrapper>
     </Box>
   );

package/src/components/Carousel/StyledCarousel.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/native';
 import Typography from '../Typography';
 import Image from '../Image';
 import Box from '../Box';
+import { scale } from '../../utils/scale';
 
 const StyledBackDrop = styled(View)<{
   themeSlideBackground: string;
@@ -38,6 +39,7 @@ const StyledCarouselContentWrapper = styled(Box)<{
   width: number;
 }>(({ width }) => ({
   width,
+  minHeight: scale(250),
 }));
 
 const StyledCarouselFooterWrapper = styled(View)(({ theme }) => ({

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

@@ -153,6 +153,7 @@ exports[`Carousel renders basic carousel 1`] = `
                   },
                   Array [
                     Object {
+                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -174,7 +175,7 @@ exports[`Carousel renders basic carousel 1`] = `
                     Array [
                       Object {
                         "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 36,
+                        "fontSize": 32,
                         "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
@@ -196,14 +197,14 @@ exports[`Carousel renders basic carousel 1`] = `
                     Object {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
                     },
                     undefined,
                   ]
                 }
-                themeFontSize="medium"
+                themeFontSize="large"
                 themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
@@ -269,6 +270,7 @@ exports[`Carousel renders basic carousel 1`] = `
                   },
                   Array [
                     Object {
+                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -307,7 +309,7 @@ exports[`Carousel renders basic carousel 1`] = `
                     Array [
                       Object {
                         "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 36,
+                        "fontSize": 32,
                         "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
@@ -329,14 +331,14 @@ exports[`Carousel renders basic carousel 1`] = `
                     Object {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
                     },
                     undefined,
                   ]
                 }
-                themeFontSize="medium"
+                themeFontSize="large"
                 themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"
@@ -402,6 +404,7 @@ exports[`Carousel renders basic carousel 1`] = `
                   },
                   Array [
                     Object {
+                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -423,7 +426,7 @@ exports[`Carousel renders basic carousel 1`] = `
                     Array [
                       Object {
                         "fontFamily": "RebondGrotesque-SemiBold",
-                        "fontSize": 36,
+                        "fontSize": 32,
                         "lineHeight": 44,
                         "marginBottom": 16,
                         "marginTop": 8,
@@ -445,14 +448,14 @@ exports[`Carousel renders basic carousel 1`] = `
                     Object {
                       "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
-                      "fontSize": 14,
-                      "letterSpacing": 0.42,
-                      "lineHeight": 22,
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
                     },
                     undefined,
                   ]
                 }
-                themeFontSize="medium"
+                themeFontSize="large"
                 themeFontWeight="regular"
                 themeIntent="body"
                 themeTypeface="neutral"

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,"moneybag":59117,"moon":59118,"multiple-stars":59119,"multiple-users":59120,"node":59121,"open-folder":59122,"paperclip":59123,"payment-summary":59124,"pencil":59125,"phone":59126,"piggy-bank":59127,"plane":59128,"play-circle":59129,"print":59130,"raising-hands":59131,"reply-arrow":59132,"reply":59133,"reschedule":59134,"rostering":59135,"save":59136,"schedule-send":59137,"schedule":59138,"search-person":59139,"send":59140,"speaker-active":59141,"speaker":59142,"star-award":59143,"star-badge":59144,"star-circle":59145,"star-medal":59146,"star":59147,"steps-circle":59148,"stopwatch":59149,"suitcase":59150,"survey":59151,"swag":59152,"switch":59153,"tag":59154,"target":59155,"teams":59156,"timesheet":59157,"touch-id":59158,"trash-bin":59159,"unlock":59160,"user":59161,"video-1":59162,"video-2":59163,"wallet":59164,"warning":59165,"activate-outlined":59166,"add-credit-card-outlined":59167,"add-person-outlined":59168,"add-section-outlined":59169,"add-time-outlined":59170,"add":59171,"adjustment-outlined":59172,"alignment-2-outlined":59173,"alignment-outlined":59174,"all-caps":59175,"arrow-down":59176,"arrow-downwards":59177,"arrow-left":59178,"arrow-leftwards":59179,"arrow-right":59180,"arrow-rightwards":59181,"arrow-up":59182,"arrow-upwards":59183,"article-outlined":59184,"at-sign":59185,"auto-graph-outlined":59186,"bell-active-outlined":59187,"bell-outlined":59188,"bell-slash-outlined":59189,"billing-outlined":59190,"body-outlined":59191,"bold":59192,"bookmark-added-outlined":59193,"bookmark-outlined":59194,"box-check-outlined":59195,"box-outlined":59196,"bullet-points":59197,"cake-outlined":59198,"calendar-dates-outlined":59199,"calendar-star-outlined":59200,"camera-outlined":59201,"cancel":59202,"chat-bubble-outlined":59203,"chat-unread-outlined":59204,"checkmark":59205,"circle-add-outlined":59206,"circle-cancel-outlined":59207,"circle-down-outlined":59208,"circle-info-outlined":59209,"circle-left-outlined":59210,"circle-ok-outlined":59211,"circle-question-outlined":59212,"circle-remove-outlined":59213,"circle-right-outlined":59214,"circle-up-outlined":59215,"circle-warning-outlined":59216,"clock-2-outlined":59217,"clock-outlined":59218,"cog-outlined":59219,"coin-outlined":59220,"comment-outlined":59221,"contacts-outlined":59222,"credit-card-outlined":59223,"cup-outlined":59224,"direction-arrows-outlined":59225,"directory-outlined":59226,"document-outlined":59227,"dollar-card-outlined":59228,"dollar-coin-shine-outlined":59229,"dollar-sign":59230,"double-buildings-outlined":59231,"double-left-arrows":59232,"double-right-arrows":59233,"download-outlined":59234,"edit-template-outlined":59235,"email-outlined":59236,"enter-arrow":59237,"envelope-outlined":59238,"expense-outlined":59239,"explore-outlined":59240,"external-link":59241,"eye-invisible-outlined":59242,"eye-outlined":59243,"face-id":59244,"face-meh-outlined":59245,"face-open-smiley-outlined":59246,"face-sad-outlined":59247,"face-smiley-outlined":59248,"feed-outlined":59249,"file-certified-outlined":59250,"file-clone-outlined":59251,"file-copy-outlined":59252,"file-dispose-outlined":59253,"file-dollar-outlined":59254,"file-download-outlined":59255,"file-export-outlined":59256,"file-lock-outlined":59257,"file-outlined":59258,"file-search-outlined":59259,"file-secured-outlined":59260,"file-verified-outlined":59261,"filter-outlined":59262,"folder-outlined":59263,"folder-user-outlined":59264,"funnel-filter-outline":59265,"graph-outlined":59266,"hand-holding-user-outlined":59267,"happy-sun-outlined":59268,"health-bag-outlined":59269,"heart-outlined":59270,"home-active-outlined":59271,"home-outlined":59272,"id-card-outlined":59273,"image-outlined":59274,"import-outlined":59275,"instapay-outlined":59276,"italic":59277,"link-1":59278,"link-2":59279,"list-outlined":59280,"live-help-outlined":59281,"location-outlined":59282,"lock-outlined":59283,"locked-file-outlined":59284,"log-out":59285,"media-content-outlined":59286,"menu-close":59287,"menu-expand":59288,"menu-fold-outlined":59289,"menu-unfold-outlined":59290,"moneybag-outlined":59291,"moon-outlined":59292,"more-horizontal":59293,"more-vertical":59294,"multiple-folders-outlined":59295,"multiple-users-outlined":59296,"near-me-outlined":59297,"node-outlined":59298,"number-points":59299,"number":59300,"overview-outlined":59301,"payment-summary-outlined":59302,"payslip-outlined":59303,"pencil-outlined":59304,"percentage":59305,"phone-outlined":59306,"piggy-bank-outlined":59307,"plane-outlined":59308,"play-circle-outlined":59309,"print-outlined":59310,"qr-code-outlined":59311,"qualification-outlined":59312,"re-assign":59313,"redeem":59314,"refresh":59315,"remove":59316,"reply-outlined":59317,"restart":59318,"return-arrow":59319,"rostering-outlined":59320,"save-outlined":59321,"schedule-outlined":59322,"search-outlined":59323,"search-secured-outlined":59324,"send-outlined":59325,"share-1":59326,"share-2":59327,"share-outlined":59328,"show-chart-outlined":59329,"single-down-arrow":59330,"single-left-arrow":59331,"single-right-arrow":59332,"single-up-arrow":59333,"speaker-active-outlined":59334,"speaker-outlined":59335,"star-circle-outlined":59336,"star-outlined":59337,"stopwatch-outlined":59338,"strikethrough":59339,"suitcase-clock-outlined":59340,"suitcase-outlined":59341,"survey-outlined":59342,"switch-outlined":59343,"sync":59344,"target-outlined":59345,"timesheet-outlined":59346,"today-outlined":59347,"transfer":59348,"trash-bin-outlined":59349,"umbrela-outlined":59350,"unavailable":59351,"underline":59352,"unlock-outlined":59353,"upload-outlined":59354,"user-circle-outlined":59355,"user-gear-outlined":59356,"user-outlined":59357,"user-rectangle-outlined":59358,"video-1-outlined":59359,"video-2-outlined":59360,"wallet-outlined":59361}
+{"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}

package/src/components/Icon/IconList.ts

@@ -117,6 +117,7 @@ const IconList = [
   'looks-two',
   'media-content',
   'menu',
+  'money-notes',
   'moneybag',
   'moon',
   'multiple-stars',

package/src/components/Select/BaseOptionList.tsx

@@ -1,26 +1,17 @@
 import { useTheme } from '@emotion/react';
 import React, { useState } from 'react';
-import { Dimensions, SectionList, View } from 'react-native';
-import type { ReactElement } from 'react';
-import type { SectionListRenderItemInfo } from 'react-native';
+import { Dimensions, SectionList, SectionListProps, View } from 'react-native';
 import SectionHeading from '../SectionHeading';
 import Spinner from '../Spinner';
 import { OptionSpacer, SectionSpacer, StyledSectionList } from './StyledSelect';
-import type {
-  SectionData,
-  OptionType,
-  SelectProps,
-  SectionType,
-} from './types';
+import type { OptionType, SelectProps, SectionType } from './types';
 
 export type BaseOptionListProps<V, T extends OptionType<V>> = Pick<
   SelectProps<V, T>,
   'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'
 > & {
-  sections: SectionData<V, T>[];
-  renderItem: (info: SectionListRenderItemInfo<T, SectionType>) => ReactElement;
   sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
-};
+} & SectionListProps<T, SectionType>;
 
 const BaseOptionList = <V, T extends OptionType<V>>({
   keyExtractor,
@@ -30,6 +21,7 @@ const BaseOptionList = <V, T extends OptionType<V>>({
   sections,
   renderItem,
   sectionListRef,
+  ...rest
 }: BaseOptionListProps<V, T>) => {
   const theme = useTheme();
 
@@ -75,6 +67,7 @@ const BaseOptionList = <V, T extends OptionType<V>>({
       renderItem={renderItem}
       ItemSeparatorComponent={OptionSpacer}
       SectionSeparatorComponent={SectionSpacer}
+      {...rest}
     />
   );
 };

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { SectionListRenderItemInfo, SectionList } from 'react-native';
-import BaseOptionList from '../BaseOptionList';
+import type { SectionListRenderItemInfo } from 'react-native';
+import BaseOptionList, { BaseOptionListProps } from '../BaseOptionList';
 import Option from './Option';
 import type { MultiSelectProps } from '.';
-import type { OptionType, SectionData, SectionType } from '../types';
+import type { OptionType, SectionType } from '../types';
 
 type OptionListProps<V, T extends OptionType<V>> = Pick<
   MultiSelectProps<V, T>,
@@ -15,9 +15,7 @@ type OptionListProps<V, T extends OptionType<V>> = Pick<
   | 'renderOption'
 > & {
   onPress: (value: V[]) => void;
-  sections: SectionData<V, T>[];
-  sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
-};
+} & BaseOptionListProps<V, T>;
 
 const OptionList = <V, T extends OptionType<V>>({
   keyExtractor,
@@ -29,6 +27,7 @@ const OptionList = <V, T extends OptionType<V>>({
   renderOption,
   value,
   sectionListRef,
+  ...rest
 }: OptionListProps<V, T>) => {
   const renderItem = (info: SectionListRenderItemInfo<T, SectionType>) => {
     const { item } = info;
@@ -63,6 +62,7 @@ const OptionList = <V, T extends OptionType<V>>({
       sections={sections}
       renderItem={renderItem}
       sectionListRef={sectionListRef}
+      {...rest}
     />
   );
 };

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

@@ -443,6 +443,7 @@ Array [
             onScroll={[Function]}
             onScrollBeginDrag={[Function]}
             onScrollEndDrag={[Function]}
+            onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
             scrollEventThrottle={50}
             stickyHeaderIndices={
@@ -2013,6 +2014,7 @@ Array [
             onScroll={[Function]}
             onScrollBeginDrag={[Function]}
             onScrollEndDrag={[Function]}
+            onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
             scrollEventThrottle={50}
             stickyHeaderIndices={
@@ -3757,6 +3759,7 @@ Array [
             onScroll={[Function]}
             onScrollBeginDrag={[Function]}
             onScrollEndDrag={[Function]}
+            onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
             scrollEventThrottle={50}
             stickyHeaderIndices={

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

@@ -172,6 +172,15 @@ function MultiSelect<V, T extends OptionType<V>>({
           value={selectingValue}
           onPress={setSelectingValue}
           sectionListRef={sectionListRef}
+          onScrollToIndexFailed={(info) => {
+            setTimeout(() => {
+              const scrollParams = getScrollParams(value?.[0], sections);
+
+              if (scrollParams.itemIndex < info.highestMeasuredFrameIndex) {
+                sectionListRef.current?.scrollToLocation(scrollParams);
+              }
+            }, 500);
+          }}
         />
       </BottomSheet>
     </>

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

@@ -2,8 +2,9 @@ import React from 'react';
 import type { SectionListRenderItemInfo, SectionList } from 'react-native';
 import Option from './Option';
 import type { SingleSelectProps } from '.';
-import type { OptionType, SectionData, SectionType } from '../types';
+import type { OptionType, SectionType } from '../types';
 import { StyledOptionList } from './StyledSingleSelect';
+import { BaseOptionListProps } from '../BaseOptionList';
 
 type OptionListProps<V, T extends OptionType<V>> = Pick<
   SingleSelectProps<V, T>,
@@ -15,9 +16,8 @@ type OptionListProps<V, T extends OptionType<V>> = Pick<
   | 'renderOption'
 > & {
   onPress: (value: V | null) => void;
-  sections: SectionData<V, T>[];
   sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
-};
+} & BaseOptionListProps<V, T>;
 
 const OptionList = <V, T extends OptionType<V>>({
   keyExtractor,
@@ -29,6 +29,7 @@ const OptionList = <V, T extends OptionType<V>>({
   renderOption,
   value,
   sectionListRef,
+  ...rest
 }: OptionListProps<V, T>) => {
   const renderItem = (info: SectionListRenderItemInfo<T, SectionType>) => {
     const { item } = info;
@@ -63,6 +64,7 @@ const OptionList = <V, T extends OptionType<V>>({
       sections={sections}
       renderItem={renderItem}
       sectionListRef={sectionListRef}
+      {...rest}
     />
   );
 };

package/src/components/Select/SingleSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -66,7 +66,12 @@ exports[`OptionList render isLoading correctly 1`] = `
       Object {
         "paddingHorizontal": 12,
       },
-      Object {},
+      Array [
+        Object {
+          "paddingBottom": 16,
+        },
+        undefined,
+      ],
     ]
   }
 >
@@ -843,7 +848,12 @@ exports[`OptionList renders correctly 1`] = `
       Object {
         "paddingHorizontal": 12,
       },
-      Object {},
+      Array [
+        Object {
+          "paddingBottom": 16,
+        },
+        undefined,
+      ],
     ]
   }
 >
@@ -1467,7 +1477,12 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
       Object {
         "paddingHorizontal": 12,
       },
-      Object {},
+      Array [
+        Object {
+          "paddingBottom": 16,
+        },
+        undefined,
+      ],
     ]
   }
 >
@@ -2091,7 +2106,12 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
       Object {
         "paddingHorizontal": 12,
       },
-      Object {},
+      Array [
+        Object {
+          "paddingBottom": 16,
+        },
+        undefined,
+      ],
     ]
   }
 >

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

@@ -442,6 +442,7 @@ Array [
             onScroll={[Function]}
             onScrollBeginDrag={[Function]}
             onScrollEndDrag={[Function]}
+            onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
             scrollEventThrottle={50}
             stickyHeaderIndices={
@@ -455,7 +456,12 @@ Array [
                 Object {
                   "paddingHorizontal": 12,
                 },
-                Object {},
+                Array [
+                  Object {
+                    "paddingBottom": 16,
+                  },
+                  undefined,
+                ],
               ]
             }
           >
@@ -1933,6 +1939,7 @@ Array [
             onScroll={[Function]}
             onScrollBeginDrag={[Function]}
             onScrollEndDrag={[Function]}
+            onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
             scrollEventThrottle={50}
             stickyHeaderIndices={
@@ -1945,7 +1952,12 @@ Array [
                 Object {
                   "paddingHorizontal": 12,
                 },
-                Object {},
+                Array [
+                  Object {
+                    "paddingBottom": 16,
+                  },
+                  undefined,
+                ],
               ]
             }
           >
@@ -3544,6 +3556,7 @@ Array [
             onScroll={[Function]}
             onScrollBeginDrag={[Function]}
             onScrollEndDrag={[Function]}
+            onScrollToIndexFailed={[Function]}
             renderItem={[Function]}
             scrollEventThrottle={50}
             stickyHeaderIndices={
@@ -3557,7 +3570,12 @@ Array [
                 Object {
                   "paddingHorizontal": 12,
                 },
-                Object {},
+                Array [
+                  Object {
+                    "paddingBottom": 16,
+                  },
+                  undefined,
+                ],
               ]
             }
           >

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

@@ -134,6 +134,14 @@ const SingleSelect = <V, T extends OptionType<V>>({
             onConfirm(selectedValue);
           }}
           sectionListRef={sectionListRef}
+          onScrollToIndexFailed={(info) => {
+            setTimeout(() => {
+              const scrollParams = getScrollParams(value, sections);
+              if (scrollParams.itemIndex < info.highestMeasuredFrameIndex) {
+                sectionListRef.current?.scrollToLocation(scrollParams);
+              }
+            }, 500);
+          }}
         />
       </BottomSheet>
     </>

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

@@ -258,7 +258,7 @@ Object {
         "paginatorBackgroundColor": "#401960",
       },
       "fontSizes": Object {
-        "heading": 36,
+        "heading": 32,
       },
       "fonts": Object {
         "heading": "RebondGrotesque-SemiBold",

package/src/theme/components/carousel.ts

@@ -25,7 +25,7 @@ const getCarouselTheme = (theme: GlobalTheme) => {
   };
 
   const fontSizes = {
-    heading: theme.fontSizes['6xlarge'],
+    heading: theme.fontSizes['xxxxxlarge'],
   };
 
   const fonts = {

package/types/components/Icon/IconList.d.ts

@@ -1,2 +1,2 @@
-declare const IconList: readonly ["activate", "add-emoji", "add-person", "adjustment", "alignment", "antenna", "archive", "assignment-warning", "bank", "bell", "billing", "bookmark-added", "bookmark", "box-check", "box", "buildings", "cake", "calendar-clock", "calendar", "candy-box-menu", "caret-down-small", "caret-down", "caret-left-small", "caret-left", "caret-right-small", "caret-right", "caret-up-small", "caret-up", "check-radio", "circle-add", "circle-cancel", "circle-check", "circle-down", "circle-info", "circle-left", "circle-ok", "circle-pencil", "circle-question", "circle-remove", "circle-right", "circle-up", "circle-warning", "clock-3", "clock", "cloud-download", "cloud-upload", "cog", "coin", "contacts", "credit-card", "diamond", "direction-arrows", "directory", "document", "dollar-coin-shine", "double-buildings", "edit-template", "envelope", "expense", "eye-circle", "eye-invisible", "eye", "face-meh", "face-sad", "face-smiley", "feed", "feedbacks", "file-certified", "file-clone", "file-copy", "file-csv", "file-dispose", "file-doc", "file-excel", "file-export", "file-lock", "file-pdf", "file-powerpoint", "file-search", "file-secured", "file-sheets", "file-slide", "file-verified", "file-word", "file", "filter", "folder-user", "folder", "format-bold", "format-heading1", "format-heading2", "format-italic", "format-list-bulleted", "format-list-numbered", "format-underlined", "funnel-filter", "global-dollar", "globe", "graduation-cap", "graph", "happy-sun", "health-bag", "heart", "home", "image", "import", "incident-siren", "instapay", "list", "loading-2", "loading", "location", "lock", "looks-one", "looks-two", "media-content", "menu", "moneybag", "moon", "multiple-stars", "multiple-users", "node", "open-folder", "paperclip", "payment-summary", "pencil", "phone", "piggy-bank", "plane", "play-circle", "print", "raising-hands", "reply-arrow", "reply", "reschedule", "rostering", "save", "schedule-send", "schedule", "search-person", "send", "speaker-active", "speaker", "star-award", "star-badge", "star-circle", "star-medal", "star", "steps-circle", "stopwatch", "suitcase", "survey", "swag", "switch", "tag", "target", "teams", "timesheet", "touch-id", "trash-bin", "unlock", "user", "video-1", "video-2", "wallet", "warning", "activate-outlined", "add-credit-card-outlined", "add-person-outlined", "add-section-outlined", "add-time-outlined", "add", "adjustment-outlined", "alignment-2-outlined", "alignment-outlined", "all-caps", "arrow-down", "arrow-downwards", "arrow-left", "arrow-leftwards", "arrow-right", "arrow-rightwards", "arrow-up", "arrow-upwards", "article-outlined", "at-sign", "auto-graph-outlined", "bell-active-outlined", "bell-outlined", "bell-slash-outlined", "billing-outlined", "body-outlined", "bold", "bookmark-added-outlined", "bookmark-outlined", "box-check-outlined", "box-outlined", "bullet-points", "cake-outlined", "calendar-dates-outlined", "calendar-star-outlined", "camera-outlined", "cancel", "chat-bubble-outlined", "chat-unread-outlined", "checkmark", "circle-add-outlined", "circle-cancel-outlined", "circle-down-outlined", "circle-info-outlined", "circle-left-outlined", "circle-ok-outlined", "circle-question-outlined", "circle-remove-outlined", "circle-right-outlined", "circle-up-outlined", "circle-warning-outlined", "clock-2-outlined", "clock-outlined", "cog-outlined", "coin-outlined", "comment-outlined", "contacts-outlined", "credit-card-outlined", "cup-outlined", "direction-arrows-outlined", "directory-outlined", "document-outlined", "dollar-card-outlined", "dollar-coin-shine-outlined", "dollar-sign", "double-buildings-outlined", "double-left-arrows", "double-right-arrows", "download-outlined", "edit-template-outlined", "email-outlined", "enter-arrow", "envelope-outlined", "expense-outlined", "explore-outlined", "external-link", "eye-invisible-outlined", "eye-outlined", "face-id", "face-meh-outlined", "face-open-smiley-outlined", "face-sad-outlined", "face-smiley-outlined", "feed-outlined", "file-certified-outlined", "file-clone-outlined", "file-copy-outlined", "file-dispose-outlined", "file-dollar-outlined", "file-download-outlined", "file-export-outlined", "file-lock-outlined", "file-outlined", "file-search-outlined", "file-secured-outlined", "file-verified-outlined", "filter-outlined", "folder-outlined", "folder-user-outlined", "funnel-filter-outline", "graph-outlined", "hand-holding-user-outlined", "happy-sun-outlined", "health-bag-outlined", "heart-outlined", "home-active-outlined", "home-outlined", "id-card-outlined", "image-outlined", "import-outlined", "instapay-outlined", "italic", "link-1", "link-2", "list-outlined", "live-help-outlined", "location-outlined", "lock-outlined", "locked-file-outlined", "log-out", "media-content-outlined", "menu-close", "menu-expand", "menu-fold-outlined", "menu-unfold-outlined", "moneybag-outlined", "moon-outlined", "more-horizontal", "more-vertical", "multiple-folders-outlined", "multiple-users-outlined", "near-me-outlined", "node-outlined", "number-points", "number", "overview-outlined", "payment-summary-outlined", "payslip-outlined", "pencil-outlined", "percentage", "phone-outlined", "piggy-bank-outlined", "plane-outlined", "play-circle-outlined", "print-outlined", "qr-code-outlined", "qualification-outlined", "re-assign", "redeem", "refresh", "remove", "reply-outlined", "restart", "return-arrow", "rostering-outlined", "save-outlined", "schedule-outlined", "search-outlined", "search-secured-outlined", "send-outlined", "share-1", "share-2", "share-outlined", "show-chart-outlined", "single-down-arrow", "single-left-arrow", "single-right-arrow", "single-up-arrow", "speaker-active-outlined", "speaker-outlined", "star-circle-outlined", "star-outlined", "stopwatch-outlined", "strikethrough", "suitcase-clock-outlined", "suitcase-outlined", "survey-outlined", "switch-outlined", "sync", "target-outlined", "timesheet-outlined", "today-outlined", "transfer", "trash-bin-outlined", "umbrela-outlined", "unavailable", "underline", "unlock-outlined", "upload-outlined", "user-circle-outlined", "user-gear-outlined", "user-outlined", "user-rectangle-outlined", "video-1-outlined", "video-2-outlined", "wallet-outlined"];
+declare const IconList: readonly ["activate", "add-emoji", "add-person", "adjustment", "alignment", "antenna", "archive", "assignment-warning", "bank", "bell", "billing", "bookmark-added", "bookmark", "box-check", "box", "buildings", "cake", "calendar-clock", "calendar", "candy-box-menu", "caret-down-small", "caret-down", "caret-left-small", "caret-left", "caret-right-small", "caret-right", "caret-up-small", "caret-up", "check-radio", "circle-add", "circle-cancel", "circle-check", "circle-down", "circle-info", "circle-left", "circle-ok", "circle-pencil", "circle-question", "circle-remove", "circle-right", "circle-up", "circle-warning", "clock-3", "clock", "cloud-download", "cloud-upload", "cog", "coin", "contacts", "credit-card", "diamond", "direction-arrows", "directory", "document", "dollar-coin-shine", "double-buildings", "edit-template", "envelope", "expense", "eye-circle", "eye-invisible", "eye", "face-meh", "face-sad", "face-smiley", "feed", "feedbacks", "file-certified", "file-clone", "file-copy", "file-csv", "file-dispose", "file-doc", "file-excel", "file-export", "file-lock", "file-pdf", "file-powerpoint", "file-search", "file-secured", "file-sheets", "file-slide", "file-verified", "file-word", "file", "filter", "folder-user", "folder", "format-bold", "format-heading1", "format-heading2", "format-italic", "format-list-bulleted", "format-list-numbered", "format-underlined", "funnel-filter", "global-dollar", "globe", "graduation-cap", "graph", "happy-sun", "health-bag", "heart", "home", "image", "import", "incident-siren", "instapay", "list", "loading-2", "loading", "location", "lock", "looks-one", "looks-two", "media-content", "menu", "money-notes", "moneybag", "moon", "multiple-stars", "multiple-users", "node", "open-folder", "paperclip", "payment-summary", "pencil", "phone", "piggy-bank", "plane", "play-circle", "print", "raising-hands", "reply-arrow", "reply", "reschedule", "rostering", "save", "schedule-send", "schedule", "search-person", "send", "speaker-active", "speaker", "star-award", "star-badge", "star-circle", "star-medal", "star", "steps-circle", "stopwatch", "suitcase", "survey", "swag", "switch", "tag", "target", "teams", "timesheet", "touch-id", "trash-bin", "unlock", "user", "video-1", "video-2", "wallet", "warning", "activate-outlined", "add-credit-card-outlined", "add-person-outlined", "add-section-outlined", "add-time-outlined", "add", "adjustment-outlined", "alignment-2-outlined", "alignment-outlined", "all-caps", "arrow-down", "arrow-downwards", "arrow-left", "arrow-leftwards", "arrow-right", "arrow-rightwards", "arrow-up", "arrow-upwards", "article-outlined", "at-sign", "auto-graph-outlined", "bell-active-outlined", "bell-outlined", "bell-slash-outlined", "billing-outlined", "body-outlined", "bold", "bookmark-added-outlined", "bookmark-outlined", "box-check-outlined", "box-outlined", "bullet-points", "cake-outlined", "calendar-dates-outlined", "calendar-star-outlined", "camera-outlined", "cancel", "chat-bubble-outlined", "chat-unread-outlined", "checkmark", "circle-add-outlined", "circle-cancel-outlined", "circle-down-outlined", "circle-info-outlined", "circle-left-outlined", "circle-ok-outlined", "circle-question-outlined", "circle-remove-outlined", "circle-right-outlined", "circle-up-outlined", "circle-warning-outlined", "clock-2-outlined", "clock-outlined", "cog-outlined", "coin-outlined", "comment-outlined", "contacts-outlined", "credit-card-outlined", "cup-outlined", "direction-arrows-outlined", "directory-outlined", "document-outlined", "dollar-card-outlined", "dollar-coin-shine-outlined", "dollar-sign", "double-buildings-outlined", "double-left-arrows", "double-right-arrows", "download-outlined", "edit-template-outlined", "email-outlined", "enter-arrow", "envelope-outlined", "expense-outlined", "explore-outlined", "external-link", "eye-invisible-outlined", "eye-outlined", "face-id", "face-meh-outlined", "face-open-smiley-outlined", "face-sad-outlined", "face-smiley-outlined", "feed-outlined", "file-certified-outlined", "file-clone-outlined", "file-copy-outlined", "file-dispose-outlined", "file-dollar-outlined", "file-download-outlined", "file-export-outlined", "file-lock-outlined", "file-outlined", "file-search-outlined", "file-secured-outlined", "file-verified-outlined", "filter-outlined", "folder-outlined", "folder-user-outlined", "funnel-filter-outline", "graph-outlined", "hand-holding-user-outlined", "happy-sun-outlined", "health-bag-outlined", "heart-outlined", "home-active-outlined", "home-outlined", "id-card-outlined", "image-outlined", "import-outlined", "instapay-outlined", "italic", "link-1", "link-2", "list-outlined", "live-help-outlined", "location-outlined", "lock-outlined", "locked-file-outlined", "log-out", "media-content-outlined", "menu-close", "menu-expand", "menu-fold-outlined", "menu-unfold-outlined", "moneybag-outlined", "moon-outlined", "more-horizontal", "more-vertical", "multiple-folders-outlined", "multiple-users-outlined", "near-me-outlined", "node-outlined", "number-points", "number", "overview-outlined", "payment-summary-outlined", "payslip-outlined", "pencil-outlined", "percentage", "phone-outlined", "piggy-bank-outlined", "plane-outlined", "play-circle-outlined", "print-outlined", "qr-code-outlined", "qualification-outlined", "re-assign", "redeem", "refresh", "remove", "reply-outlined", "restart", "return-arrow", "rostering-outlined", "save-outlined", "schedule-outlined", "search-outlined", "search-secured-outlined", "send-outlined", "share-1", "share-2", "share-outlined", "show-chart-outlined", "single-down-arrow", "single-left-arrow", "single-right-arrow", "single-up-arrow", "speaker-active-outlined", "speaker-outlined", "star-circle-outlined", "star-outlined", "stopwatch-outlined", "strikethrough", "suitcase-clock-outlined", "suitcase-outlined", "survey-outlined", "switch-outlined", "sync", "target-outlined", "timesheet-outlined", "today-outlined", "transfer", "trash-bin-outlined", "umbrela-outlined", "unavailable", "underline", "unlock-outlined", "upload-outlined", "user-circle-outlined", "user-gear-outlined", "user-outlined", "user-rectangle-outlined", "video-1-outlined", "video-2-outlined", "wallet-outlined"];
 export default IconList;