@hero-design/rn 7.27.0 → 7.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.27.0",
+  "version": "7.28.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.27.0",
+    "@hero-design/colors": "7.28.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.12"
@@ -58,7 +58,7 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "7.27.0",
+    "eslint-config-hd": "7.28.0",
     "jest": "^27.3.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
@@ -72,7 +72,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7",
-    "prettier-config-hd": "7.27.0",
+    "prettier-config-hd": "7.28.0",
     "rn-7-23-0": "npm:@hero-design/rn@7.23.0"
   },
   "prettier": "prettier-config-hd"

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'
@@ -80,39 +81,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/Avatar/AvatarStack/__tests__/StyledAvatarStack.spec.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import { StyledWrapper, StyledAvatar } from '../StyledAvatarStack';
-import theme from '../../../../theme';
 
-beforeAll(() => {
-  theme.__hd__.avatar.colors.visualisation = [theme.colors.primary];
+beforeEach(() => {
+  jest.spyOn(Math, 'random').mockReturnValue(0.123);
+});
+
+afterEach(() => {
+  jest.spyOn(Math, 'random').mockRestore();
 });
 
 describe('StyledWrapper', () => {

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

@@ -30,7 +30,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#48000a",
         "borderRadius": 999,
         "height": 32,
         "left": 0,
@@ -87,7 +87,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#737479",
         "borderRadius": 999,
         "height": 32,
         "left": 22.4,
@@ -144,7 +144,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 32,
         "left": 44.8,
@@ -201,7 +201,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#353957",
         "borderRadius": 999,
         "height": 32,
         "left": 67.19999999999999,
@@ -258,7 +258,7 @@ exports[`AvatarStack renders correctly by default 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#25006e",
         "borderRadius": 999,
         "height": 32,
         "left": 89.6,
@@ -334,7 +334,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#48000a",
         "borderRadius": 999,
         "height": 40,
         "left": 0,
@@ -391,7 +391,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#737479",
         "borderRadius": 999,
         "height": 40,
         "left": 28,
@@ -448,7 +448,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#001f23",
         "borderRadius": 999,
         "height": 40,
         "left": 56,
@@ -505,7 +505,7 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     onStartShouldSetResponder={[Function]}
     style={
       Object {
-        "backgroundColor": "#401960",
+        "backgroundColor": "#353957",
         "borderRadius": 999,
         "height": 40,
         "left": 84,

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import Avatar from '../..';
-import theme from '../../../../theme';
 
-beforeAll(() => {
-  theme.__hd__.avatar.colors.visualisation = [theme.colors.primary];
+beforeEach(() => {
+  jest.spyOn(Math, 'random').mockReturnValue(0.123);
+});
+
+afterEach(() => {
+  jest.spyOn(Math, 'random').mockRestore();
 });
 
 describe('AvatarStack', () => {

package/src/components/Avatar/AvatarStack/utils.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { useTheme } from '../../../theme';
+import { mobileVisualisationPalette } from '@hero-design/colors';
 
 const shuffleArray = <T>(array: Array<T>): Array<T> =>
   array
@@ -11,12 +11,9 @@ const shuffleArray = <T>(array: Array<T>): Array<T> =>
  * Hook that returns a memoized and shuffled array of visualisation colors for Avatar.
  */
 export const useAvatarColors = () => {
-  const theme = useTheme();
-  const visualisationColors = theme.__hd__.avatar.colors.visualisation;
   const shuffledColors = useMemo(
-    () => shuffleArray(visualisationColors),
-    [visualisationColors]
+    () => shuffleArray(Object.values(mobileVisualisationPalette)),
+    []
   );
-
   return shuffledColors;
 };

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/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/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/Switch/index.tsx

@@ -7,6 +7,7 @@ import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { StyledKnot, StyledWrapper, Variant } from './StyledSwitch';
 import SelectorSwitch from './SelectorSwitch';
+import { useDeprecation } from '../../utils/hooks';
 
 export interface SwitchProps {
   /**
@@ -50,16 +51,23 @@ const getVariant = ({
 };
 
 const Switch = ({
-  size = 'medium',
+  size: _size,
   disabled = false,
   checked = false,
   onPress,
   style,
   testID,
 }: SwitchProps): ReactElement => {
+  const size: SwitchProps['size'] = _size === undefined ? 'medium' : _size;
+
   const theme = useTheme();
   const variant = getVariant({ disabled, checked });
 
+  useDeprecation(
+    "Switch's size prop will be removed in the next major release.",
+    _size !== undefined
+  );
+
   const offset = checked
     ? (theme.__hd__.switch.sizes.widths[size] -
         theme.__hd__.switch.sizes.thumbs[size]) /

package/src/components/Tabs/index.tsx

@@ -20,6 +20,7 @@ import ScrollableTabs from './ScrollableTabs';
 import TabWithBadge from './TabWithBadge';
 import type { BadgeConfigType } from './TabWithBadge';
 import { IconName } from '../Icon';
+import { useDeprecation } from '../../utils/hooks';
 
 export type ItemType =
   | string
@@ -113,6 +114,11 @@ const Tabs = ({
   swipeEnabled = true,
   testID: componentTestID,
 }: TabsProps): JSX.Element => {
+  useDeprecation(
+    "Tabs' showBadge will be removed in the next major release. Please use badge prop instead.",
+    tabs.some((item) => item.showBadge !== undefined)
+  );
+
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const pagerViewRef = React.useRef<PagerView>(null);

package/src/components/Tag/index.tsx

@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import { useDeprecation } from '../../utils/hooks';
 import { StyledView, StyledText } from './StyledTag';
 
 interface TagProps extends ViewProps {
@@ -39,22 +40,29 @@ const Tag = ({
   style,
   testID,
   ...nativeProps
-}: TagProps): JSX.Element => (
-  <StyledView
-    {...nativeProps}
-    themeIntent={intent}
-    themeVariant={variant}
-    style={style}
-    testID={testID}
-  >
-    {typeof content === 'string' ? (
-      <StyledText themeIntent={intent} themeVariant={variant}>
-        {content}
-      </StyledText>
-    ) : (
-      content
-    )}
-  </StyledView>
-);
+}: TagProps): JSX.Element => {
+  useDeprecation(
+    "Tag's default intent is deprecated and will be removed in the next major release.\nPlease use other intents instead.",
+    intent !== 'default'
+  );
+
+  return (
+    <StyledView
+      {...nativeProps}
+      themeIntent={intent}
+      themeVariant={variant}
+      style={style}
+      testID={testID}
+    >
+      {typeof content === 'string' ? (
+        <StyledText themeIntent={intent} themeVariant={variant}>
+          {content}
+        </StyledText>
+      ) : (
+        content
+      )}
+    </StyledView>
+  );
+};
 
 export default Tag;

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

@@ -1396,7 +1396,7 @@ exports[`TextInput idle renders correctly 1`] = `
         "width": "100%",
       },
       Object {
-        "borderColor": "#de350b",
+        "borderColor": "#f46363",
       },
     ]
   }

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

@@ -38,7 +38,7 @@ describe('TextInput', () => {
           prefix="dollar-sign"
           suffix="arrow-down"
           testID="idle-text-input"
-          style={{ borderColor: theme.colors.danger }}
+          style={{ borderColor: theme.colors.error }}
         />
       );
 

package/src/components/Typography/Text/__tests__/__snapshots__/StyledText.spec.tsx.snap

@@ -190,7 +190,7 @@ exports[`StyledText has playful typeface style 1`] = `
     Array [
       Object {
         "color": "#001f23",
-        "fontFamily": "DarkerGrotesque-Regular",
+        "fontFamily": "RebondGrotesque-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
         "lineHeight": 22,