@hero-design/rn 7.27.1 → 8.0.0-rc.0

package/src/components/Alert/index.tsx

@@ -11,6 +11,7 @@ import {
   TextContainer,
 } from './StyledAlert';
 import type { IconName } from '../Icon';
+import { useDeprecation } from '../../utils/hooks';
 
 const getIntentIcon = (
   intent: 'success' | 'info' | 'warning' | 'error' | 'notification'
@@ -61,6 +62,7 @@ interface AlertProps {
    */
   onClose?: () => void;
   /**
+   * @deprecated
    * Use rounded variant.
    */
   variant?: 'default' | 'round';
@@ -80,39 +82,49 @@ const Alert = ({
   title,
   intent = 'info',
   onClose,
-  variant = 'default',
+  variant: _variant,
   style,
   testID,
-}: AlertProps): JSX.Element => (
-  <Container
-    themeVariant={variant}
-    themeIntent={intent}
-    style={style}
-    testID={testID}
-  >
-    <ContentContainer showDivider={!!onClose}>
-      {icon !== null ? (
-        <AlertIcon icon={icon || getIntentIcon(intent)} />
+}: AlertProps): JSX.Element => {
+  const variant: AlertProps['variant'] =
+    _variant === undefined ? 'default' : _variant;
+
+  useDeprecation(
+    "Alert's variant prop will be removed in the next major release. Rounded will be the only variant available.",
+    _variant !== undefined
+  );
+
+  return (
+    <Container
+      themeVariant={variant}
+      themeIntent={intent}
+      style={style}
+      testID={testID}
+    >
+      <ContentContainer showDivider={!!onClose}>
+        {icon !== null ? (
+          <AlertIcon icon={icon || getIntentIcon(intent)} />
+        ) : null}
+        <TextContainer>
+          {typeof title === 'string' ? (
+            <Typography.Text fontWeight="semi-bold">{title}</Typography.Text>
+          ) : (
+            title
+          )}
+          {typeof content === 'string' ? (
+            <Typography.Text>{content}</Typography.Text>
+          ) : (
+            content
+          )}
+        </TextContainer>
+      </ContentContainer>
+      {onClose ? (
+        <CTAWrapper onPress={onClose} testID="alert-close-icon">
+          <Icon icon="cancel" size="small" />
+        </CTAWrapper>
       ) : null}
-      <TextContainer>
-        {typeof title === 'string' ? (
-          <Typography.Text fontWeight="semi-bold">{title}</Typography.Text>
-        ) : (
-          title
-        )}
-        {typeof content === 'string' ? (
-          <Typography.Text>{content}</Typography.Text>
-        ) : (
-          content
-        )}
-      </TextContainer>
-    </ContentContainer>
-    {onClose ? (
-      <CTAWrapper onPress={onClose} testID="alert-close-icon">
-        <Icon icon="cancel" size="small" />
-      </CTAWrapper>
-    ) : null}
-  </Container>
-);
+    </Container>
+  );
+};
 
 export default Alert;

package/src/components/BottomSheet/Header.tsx

@@ -40,7 +40,7 @@ const Header = ({
             onPress={onRequestClose}
             intent="text"
             testID="bottom-sheet-close-icon"
-            size="small"
+            size="xsmall"
           />
         </StyledIconWrapper>
       ) : null}

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -46,7 +46,7 @@ const StyledBackdrop = styled(AnimatedPressable)<
 >(({ theme }) => ({
   ...StyleSheet.absoluteFillObject,
   backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
-  opacity: 0.48,
+  opacity: 0.4,
 }));
 
 const StyledHeaderWrapper = styled(View)(({ theme }) => ({

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

@@ -56,7 +56,7 @@ exports[`BottomSheet renders correctly with close state 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#000000",
             "bottom": 0,
             "left": 0,
             "opacity": 0.48,
@@ -82,8 +82,8 @@ exports[`BottomSheet renders correctly with close state 1`] = `
               "height": 3,
               "width": 0,
             },
-            "shadowOpacity": 0.27,
-            "shadowRadius": 4.65,
+            "shadowOpacity": 0.4,
+            "shadowRadius": 16,
             "transform": Array [
               Object {
                 "scaleY": 1,
@@ -179,13 +179,13 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 20,
+                      "fontSize": 16,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="small"
+                themeSize="xsmall"
               />
             </View>
           </View>
@@ -226,8 +226,8 @@ exports[`BottomSheet renders correctly with close state 1`] = `
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
                   "minHeight": 64,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 8,
+                  "paddingHorizontal": 24,
+                  "paddingVertical": 16,
                 },
                 undefined,
               ]
@@ -339,7 +339,7 @@ exports[`BottomSheet renders correctly with open state 1`] = `
         onStartShouldSetResponder={[Function]}
         style={
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#000000",
             "bottom": 0,
             "left": 0,
             "opacity": 0,
@@ -365,8 +365,8 @@ exports[`BottomSheet renders correctly with open state 1`] = `
               "height": 3,
               "width": 0,
             },
-            "shadowOpacity": 0.27,
-            "shadowRadius": 4.65,
+            "shadowOpacity": 0.4,
+            "shadowRadius": 16,
             "transform": Array [
               Object {
                 "scaleY": 1,
@@ -462,13 +462,13 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 20,
+                      "fontSize": 16,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="small"
+                themeSize="xsmall"
               />
             </View>
           </View>
@@ -509,8 +509,8 @@ exports[`BottomSheet renders correctly with open state 1`] = `
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
                   "minHeight": 64,
-                  "paddingHorizontal": 12,
-                  "paddingVertical": 8,
+                  "paddingHorizontal": 24,
+                  "paddingVertical": 16,
                 },
                 undefined,
               ]

package/src/components/Button/Button.tsx

@@ -10,6 +10,7 @@ import {
 } from './StyledButton';
 import type { IconName } from '../Icon';
 import type { Intent, ThemeVariant } from './StyledButton';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface ButtonProps {
   /**
@@ -112,6 +113,12 @@ const Button = ({
   variant = 'filled',
 }: ButtonProps): JSX.Element => {
   const themeVariant = getThemeVariant(variant, intent);
+
+  useDeprecation(
+    "Button's basic-transparent variant is deprecated and will be removed in the next major release.\nPlease use other variants instead.",
+    variant === 'basic-transparent'
+  );
+
   return (
     <StyledButtonContainer
       accessibilityHint={accessibilityHint}

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -287,7 +287,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 onStartShouldSetResponder={[Function]}
                 style={
                   Object {
-                    "backgroundColor": "#001f23",
+                    "backgroundColor": "#000000",
                     "bottom": 0,
                     "left": 0,
                     "opacity": 0.48,
@@ -313,8 +313,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       "height": 3,
                       "width": 0,
                     },
-                    "shadowOpacity": 0.27,
-                    "shadowRadius": 4.65,
+                    "shadowOpacity": 0.4,
+                    "shadowRadius": 16,
                     "transform": Array [
                       Object {
                         "scaleY": 1,
@@ -410,13 +410,13 @@ exports[`DatePickerIOS renders correctly 1`] = `
                           Array [
                             Object {
                               "color": "#001f23",
-                              "fontSize": 20,
+                              "fontSize": 16,
                             },
                             undefined,
                           ]
                         }
                         themeIntent="text"
-                        themeSize="small"
+                        themeSize="xsmall"
                       />
                     </View>
                   </View>
@@ -477,8 +477,8 @@ exports[`DatePickerIOS renders correctly 1`] = `
                           "flexDirection": "row",
                           "justifyContent": "flex-end",
                           "minHeight": 64,
-                          "paddingHorizontal": 12,
-                          "paddingVertical": 8,
+                          "paddingHorizontal": 24,
+                          "paddingVertical": 16,
                         },
                         undefined,
                       ]

package/src/components/Empty/StyledEmpty.tsx

@@ -32,7 +32,7 @@ const StyledDescription = styled(Text)<{ themeVariant: ThemeVariant }>(
     textAlign: 'center',
     color:
       themeVariant === 'dark'
-        ? theme.__hd__.empty.colors.invertedText
+        ? theme.__hd__.empty.colors.invertedSubduedText
         : theme.__hd__.empty.colors.subduedText,
   })
 );

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

@@ -21,8 +21,8 @@ exports[`Empty renders empty state content correctly 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 28,
+          "fontFamily": "RebondGrotesque-SemiBold",
+          "fontSize": 24,
           "marginBottom": 16,
           "textAlign": "center",
         },
@@ -37,9 +37,9 @@ exports[`Empty renders empty state content correctly 1`] = `
     style={
       Array [
         Object {
-          "color": "#bfc1c5",
-          "fontFamily": "BeVietnamPro-Light",
-          "fontSize": 16,
+          "color": "#4d6265",
+          "fontFamily": "RebondGrotesque-Regular",
+          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,
@@ -88,8 +88,8 @@ exports[`Empty renders empty state with image correctly 1`] = `
       Array [
         Object {
           "color": "#001f23",
-          "fontFamily": "BeVietnamPro-SemiBold",
-          "fontSize": 28,
+          "fontFamily": "RebondGrotesque-SemiBold",
+          "fontSize": 24,
           "marginBottom": 16,
           "textAlign": "center",
         },
@@ -104,9 +104,9 @@ exports[`Empty renders empty state with image correctly 1`] = `
     style={
       Array [
         Object {
-          "color": "#bfc1c5",
-          "fontFamily": "BeVietnamPro-Light",
-          "fontSize": 16,
+          "color": "#4d6265",
+          "fontFamily": "RebondGrotesque-Regular",
+          "fontSize": 18,
           "textAlign": "center",
         },
         undefined,

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

@@ -24,7 +24,7 @@ exports[`ActionGroup has active false 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#000000",
         "bottom": 0,
         "left": 0,
         "opacity": 0,
@@ -593,10 +593,10 @@ exports[`ActionGroup has active true 1`] = `
     pointerEvents="auto"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#000000",
         "bottom": 0,
         "left": 0,
-        "opacity": 0.9,
+        "opacity": 0.4,
         "position": "absolute",
         "right": 0,
         "top": 0,

package/src/components/FAB/ActionGroup/index.tsx

@@ -100,7 +100,7 @@ const ActionGroup = ({
   const interpolatedBackdropOpacityAnimation =
     tranlateXAnimation.current.interpolate({
       inputRange: [0, 1],
-      outputRange: [0, 0.9],
+      outputRange: [0, 0.4],
     });
 
   const interpolatedActionGroupOpacityAnimation =

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

@@ -11,7 +11,7 @@ describe('FAB', () => {
         <FAB
           icon="add"
           animated
-          style={{ backgroundColor: theme.colors.backgroundDark }}
+          style={{ backgroundColor: theme.colors.darkGlobalSurface }}
         />
       );
 
@@ -26,7 +26,7 @@ describe('FAB', () => {
         <FAB
           icon="pencil"
           title="Shout out"
-          style={{ backgroundColor: theme.colors.backgroundDark }}
+          style={{ backgroundColor: theme.colors.darkGlobalSurface }}
         />
       );
 
@@ -41,7 +41,7 @@ describe('FAB', () => {
       const { queryAllByTestId, toJSON } = renderWithTheme(
         <FAB
           icon="add"
-          style={{ backgroundColor: theme.colors.backgroundDark }}
+          style={{ backgroundColor: theme.colors.darkGlobalSurface }}
         />
       );
 
@@ -57,7 +57,7 @@ describe('FAB', () => {
         <FAB
           onPress={onPressSpy}
           icon="add"
-          style={{ backgroundColor: theme.colors.backgroundDark }}
+          style={{ backgroundColor: theme.colors.darkGlobalSurface }}
           testID="fab"
         />
       );

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

package/src/components/Icon/IconList.ts

@@ -330,6 +330,7 @@ const IconList = [
   'send-outlined',
   'share-1',
   'share-2',
+  'share-outlined',
   'single-down-arrow',
   'single-left-arrow',
   'single-right-arrow',

package/src/components/Icon/index.tsx

@@ -3,6 +3,7 @@ import type { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 import HeroIcon from './HeroIcon';
 import AnimatedIcon from './AnimatedIcon';
+import { useDeprecation } from '../../utils/hooks';
 
 export type IconName = typeof IconList[number];
 
@@ -49,8 +50,16 @@ const Icon = ({
   intent = 'text',
   testID,
   spin = false,
-}: IconProps) =>
-  spin ? (
+}: IconProps) => {
+  useDeprecation(
+    `${icon} icon is deprecated and will be removed in the next major release, please use ${icon.replace(
+      'carat',
+      'caret'
+    )} instead.`,
+    icon.startsWith('carat')
+  );
+
+  return spin ? (
     <AnimatedIcon
       name={icon}
       themeIntent={intent}
@@ -67,6 +76,7 @@ const Icon = ({
       testID={testID}
     />
   );
+};
 
 Icon.List = IconList;
 export default Icon;

package/src/components/List/ListItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 
 import { View } from 'react-native';
 import type { ReactNode } from 'react';
@@ -28,7 +28,7 @@ export interface ListItemProps {
   /**
    * The title of the component.
    */
-  title?: string;
+  title?: string | ReactElement;
   /**
    * The subtile title of the component.
    */

package/src/components/List/StyledListItem.tsx

@@ -29,7 +29,7 @@ const StyledListItemContainer = styled(TouchableOpacity)<{
         ...sharedStyles,
         alignItems: 'center',
         borderRadius: theme.__hd__.list.radii.card,
-        shadowColor: theme.colors.shadow,
+        shadowColor: theme.colors.secondaryOutline,
         shadowRadius: theme.__hd__.list.radii.cardShadow,
         shadowOffset: theme.__hd__.list.shadows.cardOffset,
         shadowOpacity: theme.__hd__.list.opacity.cardShadow,

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

@@ -107,7 +107,7 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
       "flexDirection": "row",
       "opacity": 1,
       "padding": 16,
-      "shadowColor": "#ccced1",
+      "shadowColor": "#e8e9ea",
       "shadowOffset": Object {
         "height": 2,
         "width": 0,
@@ -207,7 +207,7 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
       "flexDirection": "row",
       "opacity": 1,
       "padding": 16,
-      "shadowColor": "#ccced1",
+      "shadowColor": "#e8e9ea",
       "shadowOffset": Object {
         "height": 2,
         "width": 0,

package/src/components/RichTextEditor/MentionList.tsx

@@ -76,7 +76,7 @@ const MentionList = <TMetaData,>({
           borderRadius: theme.__hd__.richTextEditor.radii.mention,
           padding: highlighted ? theme.__hd__.richTextEditor.space.mention : 0,
           background: highlighted
-            ? theme.colors.lightHighlightedSurface
+            ? theme.colors.highlightedSurface
             : 'transparent',
           marginTop: theme.space.xxsmall,
           marginBottom: theme.space.xxsmall,

package/src/components/RichTextEditor/StyledToolbar.ts

@@ -28,5 +28,5 @@ export const StyledSeparator = styled(View)(({ theme }) => ({
   flexDirection: 'row',
   alignItems: 'center',
   marginHorizontal: theme.space.small,
-  backgroundColor: theme.colors.outline,
+  backgroundColor: theme.colors.secondaryOutline,
 }));

package/src/components/RichTextEditor/__tests__/EditorToolbar.spec.tsx

@@ -96,7 +96,7 @@ describe('EditorToolbar', () => {
 
           fireEvent(wrapper.getByTestId(testID), 'press');
           expect(wrapper.getByTestId(testID)).toHaveStyle({
-            backgroundColor: theme.colors.lightHighlightedSurface,
+            backgroundColor: theme.colors.highlightedSurface,
           });
         });
 

package/src/components/Select/{StyledOptionList.tsx → BaseOptionList.tsx}

@@ -5,7 +5,7 @@ import type { ReactElement } from 'react';
 import type { SectionListRenderItemInfo } from 'react-native';
 import SectionHeading from '../SectionHeading';
 import Spinner from '../Spinner';
-import { OptionSpacer, SectionSpacer } from './StyledSelect';
+import { OptionSpacer, SectionSpacer, StyledSectionList } from './StyledSelect';
 import type {
   SectionData,
   OptionType,
@@ -13,7 +13,7 @@ import type {
   SectionType,
 } from './types';
 
-export type StyledOptionListProps<V, T extends OptionType<V>> = Pick<
+export type BaseOptionListProps<V, T extends OptionType<V>> = Pick<
   SelectProps<V, T>,
   'keyExtractor' | 'loading' | 'onEndReached' | 'onQueryChange'
 > & {
@@ -22,7 +22,7 @@ export type StyledOptionListProps<V, T extends OptionType<V>> = Pick<
   sectionListRef?: React.RefObject<SectionList<T, SectionType>>;
 };
 
-const StyledOptionList = <V, T extends OptionType<V>>({
+const BaseOptionList = <V, T extends OptionType<V>>({
   keyExtractor,
   loading,
   onEndReached,
@@ -30,13 +30,13 @@ const StyledOptionList = <V, T extends OptionType<V>>({
   sections,
   renderItem,
   sectionListRef,
-}: StyledOptionListProps<V, T>) => {
+}: BaseOptionListProps<V, T>) => {
   const theme = useTheme();
 
   const [onEndReachedCalled, setOnEndReachedCalled] = useState(false);
 
   return (
-    <SectionList<T, SectionType>
+    <StyledSectionList<T, SectionType>
       ref={sectionListRef}
       style={{
         ...(onQueryChange ? { height: Dimensions.get('screen').height } : {}),
@@ -79,4 +79,4 @@ const StyledOptionList = <V, T extends OptionType<V>>({
   );
 };
 
-export default StyledOptionList;
+export default BaseOptionList;