@hero-design/rn 7.27.1 → 7.28.0

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 83503c617021ad80
+@hero-design/rn:build: cache hit, replaying output 8ade5cdfeb1cbdab
 @hero-design/rn:build: $ yarn build:js && yarn build:types
 @hero-design/rn:build: $ rollup -c
 @hero-design/rn:build: 
 @hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
 @hero-design/rn:build: (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 @hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 24.5s
+@hero-design/rn:build: created lib/index.js, es/index.js in 32.3s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -230,7 +230,7 @@ var BASE_BORDER_WIDTH = 1;
 var BASE_SPACE = 8;
 var BASE_SIZE = 8;
 var NEUTRAL_FONT = 'BeVietnamPro';
-var PLAYFUL_FONT = 'DarkerGrotesque';
+var PLAYFUL_FONT = 'RebondGrotesque';
 var BASE_FONT_SIZE = 10;
 var BASE_RADIUS = 4;
 var scale$1 = {
@@ -1601,7 +1601,7 @@ var getAvatarTheme = function getAvatarTheme(theme) {
     danger: theme.colors.error,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    text: theme.colors.invertedText
+    text: theme.colors.onDarkGlobalSurface
   };
   var sizes = {
     small: theme.sizes.xlarge,
@@ -5660,7 +5660,9 @@ var useDeprecation = function useDeprecation(message) {
   var cond = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   useEffect(function () {
     // eslint-disable-next-line no-console
-    console.warn(message);
+    if (cond) {
+      console.warn(message);
+    }
   }, [message, cond]);
 };
 
@@ -5780,7 +5782,7 @@ var Typography = {
 };
 
 // 🔴 DO NOT EDIT — This file is generated automatically.
-var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bookmark', 'box-check', 'box', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'carat-down-small', 'carat-down', 'carat-left-small', 'carat-left', 'carat-right-small', 'carat-right', 'carat-up-small', 'carat-up', '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-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', 'at-sign', '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', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'qr-code-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', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'speaker-active-outlined', 'speaker-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'target-outlined', 'timesheet-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'];
+var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bookmark', 'box-check', 'box', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'carat-down-small', 'carat-down', 'carat-left-small', 'carat-left', 'carat-right-small', 'carat-right', 'carat-up-small', 'carat-up', '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-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', 'at-sign', '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', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'qr-code-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', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'speaker-active-outlined', 'speaker-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'target-outlined', 'timesheet-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'];
 
 var activate = 59000;
 var adjustment = 59003;
@@ -5860,11 +5862,11 @@ var redeem = 59316;
 var refresh = 59317;
 var remove = 59318;
 var restart = 59320;
-var strikethrough = 59338;
-var sync = 59343;
-var transfer = 59346;
-var unavailable = 59349;
-var underline = 59350;
+var strikethrough = 59339;
+var sync = 59344;
+var transfer = 59347;
+var unavailable = 59350;
+var underline = 59351;
 var glyphMap = {
 	activate: activate,
 	"add-emoji": 59001,
@@ -6196,36 +6198,37 @@ var glyphMap = {
 	"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,
+	"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: strikethrough,
-	"suitcase-clock-outlined": 59339,
-	"suitcase-outlined": 59340,
-	"survey-outlined": 59341,
-	"switch-outlined": 59342,
+	"suitcase-clock-outlined": 59340,
+	"suitcase-outlined": 59341,
+	"survey-outlined": 59342,
+	"switch-outlined": 59343,
 	sync: sync,
-	"target-outlined": 59344,
-	"timesheet-outlined": 59345,
+	"target-outlined": 59345,
+	"timesheet-outlined": 59346,
 	transfer: transfer,
-	"trash-bin-outlined": 59347,
-	"umbrela-outlined": 59348,
+	"trash-bin-outlined": 59348,
+	"umbrela-outlined": 59349,
 	unavailable: unavailable,
 	underline: underline,
-	"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
+	"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
 };
 
 var HeroIcon = createIconSet(glyphMap, 'hero-icons-mobile', 'hero-icons-mobile.ttf');
@@ -6290,6 +6293,7 @@ var Icon = function Icon(_ref) {
     testID = _ref.testID,
     _ref$spin = _ref.spin,
     spin = _ref$spin === void 0 ? false : _ref$spin;
+  useDeprecation("".concat(icon, " icon is deprecated and will be removed in the next major release, please use ").concat(icon.replace('carat', 'caret'), " instead."), icon.startsWith('carat'));
   return spin ? /*#__PURE__*/React.createElement(AnimatedIcon, {
     name: icon,
     themeIntent: intent,
@@ -6446,10 +6450,11 @@ var Alert = function Alert(_ref2) {
     _ref2$intent = _ref2.intent,
     intent = _ref2$intent === void 0 ? 'info' : _ref2$intent,
     onClose = _ref2.onClose,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+    _variant = _ref2.variant,
     style = _ref2.style,
     testID = _ref2.testID;
+  var 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 /*#__PURE__*/React.createElement(Container$1, {
     themeVariant: variant,
     themeIntent: intent,
@@ -7456,6 +7461,7 @@ var Button = function Button(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
   var 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 /*#__PURE__*/React.createElement(StyledButtonContainer, {
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
@@ -11740,7 +11746,7 @@ var StyledListItemContainer$1 = index$a(TouchableOpacity)(function (_ref) {
       return _objectSpread2(_objectSpread2({}, 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,
@@ -13439,8 +13445,7 @@ var getVariant = function getVariant(_ref) {
   return checked ? 'checked' : 'unchecked';
 };
 var Switch = function Switch(_ref2) {
-  var _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+  var _size = _ref2.size,
     _ref2$disabled = _ref2.disabled,
     disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
     _ref2$checked = _ref2.checked,
@@ -13448,11 +13453,13 @@ var Switch = function Switch(_ref2) {
     onPress = _ref2.onPress,
     style = _ref2.style,
     testID = _ref2.testID;
+  var size = _size === undefined ? 'medium' : _size;
   var theme = useTheme$1();
   var variant = getVariant({
     disabled: disabled,
     checked: checked
   });
+  useDeprecation("Switch's size prop will be removed in the next major release.", _size !== undefined);
   var offset = checked ? (theme.__hd__["switch"].sizes.widths[size] - theme.__hd__["switch"].sizes.thumbs[size]) / 2 + theme.__hd__["switch"].sizes.thumbs[size] / 2 : 0;
   var _useState = useState(function () {
       return new Animated.Value(offset);
@@ -13847,6 +13854,9 @@ var Tabs = function Tabs(_ref2) {
     _ref2$swipeEnabled = _ref2.swipeEnabled,
     swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
     componentTestID = _ref2.testID;
+  useDeprecation("Tabs' showBadge will be removed in the next major release. Please use badge prop instead.", tabs.some(function (item) {
+    return item.showBadge !== undefined;
+  }));
   var theme = useTheme$1();
   var insets = useSafeAreaInsets();
   var pagerViewRef = React.useRef(null);
@@ -14004,6 +14014,7 @@ var Tag = function Tag(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded);
+  useDeprecation("Tag's default intent is deprecated and will be removed in the next major release.\nPlease use other intents instead.", intent !== 'default');
   return /*#__PURE__*/React.createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -14612,7 +14623,7 @@ var StyledSeparator = index$a(View)(function (_ref3) {
     flexDirection: 'row',
     alignItems: 'center',
     marginHorizontal: theme.space.small,
-    backgroundColor: theme.colors.outline
+    backgroundColor: theme.colors.secondaryOutline
   };
 });
 
@@ -14803,7 +14814,7 @@ var MentionList = function MentionList(_ref) {
       color: theme.colors.secondary,
       borderRadius: theme.__hd__.richTextEditor.radii.mention,
       padding: highlighted ? theme.__hd__.richTextEditor.space.mention : 0,
-      background: highlighted ? theme.colors.lightHighlightedSurface : 'transparent',
+      background: highlighted ? theme.colors.highlightedSurface : 'transparent',
       marginTop: theme.space.xxsmall,
       marginBottom: theme.space.xxsmall,
       display: 'inline-flex'

package/lib/index.js

@@ -259,7 +259,7 @@ var BASE_BORDER_WIDTH = 1;
 var BASE_SPACE = 8;
 var BASE_SIZE = 8;
 var NEUTRAL_FONT = 'BeVietnamPro';
-var PLAYFUL_FONT = 'DarkerGrotesque';
+var PLAYFUL_FONT = 'RebondGrotesque';
 var BASE_FONT_SIZE = 10;
 var BASE_RADIUS = 4;
 var scale$1 = {
@@ -1630,7 +1630,7 @@ var getAvatarTheme = function getAvatarTheme(theme) {
     danger: theme.colors.error,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    text: theme.colors.invertedText
+    text: theme.colors.onDarkGlobalSurface
   };
   var sizes = {
     small: theme.sizes.xlarge,
@@ -5689,7 +5689,9 @@ var useDeprecation = function useDeprecation(message) {
   var cond = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
   React.useEffect(function () {
     // eslint-disable-next-line no-console
-    console.warn(message);
+    if (cond) {
+      console.warn(message);
+    }
   }, [message, cond]);
 };
 
@@ -5809,7 +5811,7 @@ var Typography = {
 };
 
 // 🔴 DO NOT EDIT — This file is generated automatically.
-var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bookmark', 'box-check', 'box', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'carat-down-small', 'carat-down', 'carat-left-small', 'carat-left', 'carat-right-small', 'carat-right', 'carat-up-small', 'carat-up', '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-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', 'at-sign', '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', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'qr-code-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', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'speaker-active-outlined', 'speaker-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'target-outlined', 'timesheet-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'];
+var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bookmark', 'box-check', 'box', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'carat-down-small', 'carat-down', 'carat-left-small', 'carat-left', 'carat-right-small', 'carat-right', 'carat-up-small', 'carat-up', '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-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', 'at-sign', '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', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'qr-code-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', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'speaker-active-outlined', 'speaker-outlined', 'star-outlined', 'stopwatch-outlined', 'strikethrough', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'target-outlined', 'timesheet-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'];
 
 var activate = 59000;
 var adjustment = 59003;
@@ -5889,11 +5891,11 @@ var redeem = 59316;
 var refresh = 59317;
 var remove = 59318;
 var restart = 59320;
-var strikethrough = 59338;
-var sync = 59343;
-var transfer = 59346;
-var unavailable = 59349;
-var underline = 59350;
+var strikethrough = 59339;
+var sync = 59344;
+var transfer = 59347;
+var unavailable = 59350;
+var underline = 59351;
 var glyphMap = {
 	activate: activate,
 	"add-emoji": 59001,
@@ -6225,36 +6227,37 @@ var glyphMap = {
 	"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,
+	"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: strikethrough,
-	"suitcase-clock-outlined": 59339,
-	"suitcase-outlined": 59340,
-	"survey-outlined": 59341,
-	"switch-outlined": 59342,
+	"suitcase-clock-outlined": 59340,
+	"suitcase-outlined": 59341,
+	"survey-outlined": 59342,
+	"switch-outlined": 59343,
 	sync: sync,
-	"target-outlined": 59344,
-	"timesheet-outlined": 59345,
+	"target-outlined": 59345,
+	"timesheet-outlined": 59346,
 	transfer: transfer,
-	"trash-bin-outlined": 59347,
-	"umbrela-outlined": 59348,
+	"trash-bin-outlined": 59348,
+	"umbrela-outlined": 59349,
 	unavailable: unavailable,
 	underline: underline,
-	"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
+	"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
 };
 
 var HeroIcon = reactNativeVectorIcons.createIconSet(glyphMap, 'hero-icons-mobile', 'hero-icons-mobile.ttf');
@@ -6319,6 +6322,7 @@ var Icon = function Icon(_ref) {
     testID = _ref.testID,
     _ref$spin = _ref.spin,
     spin = _ref$spin === void 0 ? false : _ref$spin;
+  useDeprecation("".concat(icon, " icon is deprecated and will be removed in the next major release, please use ").concat(icon.replace('carat', 'caret'), " instead."), icon.startsWith('carat'));
   return spin ? /*#__PURE__*/React__default["default"].createElement(AnimatedIcon, {
     name: icon,
     themeIntent: intent,
@@ -6475,10 +6479,11 @@ var Alert = function Alert(_ref2) {
     _ref2$intent = _ref2.intent,
     intent = _ref2$intent === void 0 ? 'info' : _ref2$intent,
     onClose = _ref2.onClose,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+    _variant = _ref2.variant,
     style = _ref2.style,
     testID = _ref2.testID;
+  var 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 /*#__PURE__*/React__default["default"].createElement(Container$1, {
     themeVariant: variant,
     themeIntent: intent,
@@ -7485,6 +7490,7 @@ var Button = function Button(_ref) {
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'filled' : _ref$variant;
   var 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 /*#__PURE__*/React__default["default"].createElement(StyledButtonContainer, {
     accessibilityHint: accessibilityHint,
     accessibilityLabel: accessibilityLabel,
@@ -11769,7 +11775,7 @@ var StyledListItemContainer$1 = index$a(reactNative.TouchableOpacity)(function (
       return _objectSpread2(_objectSpread2({}, 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,
@@ -13468,8 +13474,7 @@ var getVariant = function getVariant(_ref) {
   return checked ? 'checked' : 'unchecked';
 };
 var Switch = function Switch(_ref2) {
-  var _ref2$size = _ref2.size,
-    size = _ref2$size === void 0 ? 'medium' : _ref2$size,
+  var _size = _ref2.size,
     _ref2$disabled = _ref2.disabled,
     disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
     _ref2$checked = _ref2.checked,
@@ -13477,11 +13482,13 @@ var Switch = function Switch(_ref2) {
     onPress = _ref2.onPress,
     style = _ref2.style,
     testID = _ref2.testID;
+  var size = _size === undefined ? 'medium' : _size;
   var theme = useTheme$1();
   var variant = getVariant({
     disabled: disabled,
     checked: checked
   });
+  useDeprecation("Switch's size prop will be removed in the next major release.", _size !== undefined);
   var offset = checked ? (theme.__hd__["switch"].sizes.widths[size] - theme.__hd__["switch"].sizes.thumbs[size]) / 2 + theme.__hd__["switch"].sizes.thumbs[size] / 2 : 0;
   var _useState = React.useState(function () {
       return new reactNative.Animated.Value(offset);
@@ -13876,6 +13883,9 @@ var Tabs = function Tabs(_ref2) {
     _ref2$swipeEnabled = _ref2.swipeEnabled,
     swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
     componentTestID = _ref2.testID;
+  useDeprecation("Tabs' showBadge will be removed in the next major release. Please use badge prop instead.", tabs.some(function (item) {
+    return item.showBadge !== undefined;
+  }));
   var theme = useTheme$1();
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   var pagerViewRef = React__default["default"].useRef(null);
@@ -14033,6 +14043,7 @@ var Tag = function Tag(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded);
+  useDeprecation("Tag's default intent is deprecated and will be removed in the next major release.\nPlease use other intents instead.", intent !== 'default');
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -14641,7 +14652,7 @@ var StyledSeparator = index$a(reactNative.View)(function (_ref3) {
     flexDirection: 'row',
     alignItems: 'center',
     marginHorizontal: theme.space.small,
-    backgroundColor: theme.colors.outline
+    backgroundColor: theme.colors.secondaryOutline
   };
 });
 
@@ -14832,7 +14843,7 @@ var MentionList = function MentionList(_ref) {
       color: theme.colors.secondary,
       borderRadius: theme.__hd__.richTextEditor.radii.mention,
       padding: highlighted ? theme.__hd__.richTextEditor.space.mention : 0,
-      background: highlighted ? theme.colors.lightHighlightedSurface : 'transparent',
+      background: highlighted ? theme.colors.highlightedSurface : 'transparent',
       marginTop: theme.space.xxsmall,
       marginBottom: theme.space.xxsmall,
       display: 'inline-flex'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.27.1",
+  "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.1",
+    "@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.1",
+    "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.1",
+    "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;