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

package/lib/index.js

@@ -105,7 +105,7 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 function _extends$1() {
-  _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
+  _extends$1 = Object.assign || function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -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 = {
@@ -1260,6 +1260,7 @@ var globalPalette = {
   disabledOnDefaultGlobalSurface: palette$6.greyLight30,
   darkGlobalSurface: palette$6.maasstrichtBlue,
   onDarkGlobalSurface: palette$6.white,
+  overlayGlobalSurface: palette$6.black,
   // Outlines
   primaryOutline: palette$6.maasstrichtBlue,
   secondaryOutline: palette$6.greyLight75,
@@ -1445,7 +1446,7 @@ var getFonts = function getFonts(_ref) {
   };
 };
 var getFontSizes = function getFontSizes(baseFontSize) {
-  var fontSizes = Array.from(new Array(9));
+  var fontSizes = Array.from(new Array(11));
   fontSizes.forEach(function (_, index) {
     if (index === 0) {
       fontSizes[0] = baseFontSize;
@@ -1455,6 +1456,7 @@ var getFontSizes = function getFontSizes(baseFontSize) {
     return undefined;
   });
   return {
+    '7xlarge': scale(fontSizes[10]),
     xxxxxlarge: scale(fontSizes[8]),
     xxxxlarge: scale(fontSizes[7]),
     xxxlarge: scale(fontSizes[6]),
@@ -1470,6 +1472,7 @@ var getFontSizes = function getFontSizes(baseFontSize) {
 var getLineHeights = function getLineHeights(fontSizes) {
   var additionalSpace = 8;
   return {
+    '7xlarge': fontSizes['7xlarge'] + additionalSpace,
     xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
     xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
     xxxlarge: fontSizes.xxxlarge + additionalSpace,
@@ -1630,7 +1633,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,
@@ -1735,7 +1738,7 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
   var colors = {
     shadow: theme.colors.primaryOutline,
     background: theme.colors.defaultGlobalSurface,
-    backdrop: theme.colors.darkGlobalSurface
+    backdrop: theme.colors.overlayGlobalSurface
   };
   var sizes = {
     sectionHeight: theme.sizes.xxxxxlarge,
@@ -1745,16 +1748,16 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     headerWrapperVerticalPadding: theme.space.small,
     headerWrapperHorizontalPadding: theme.space.medium,
     closeIconMargin: theme.space.smallMedium,
-    footerVerticalPadding: theme.space.small,
-    footerHorizontalPadding: theme.space.smallMedium
+    footerVerticalPadding: theme.space.medium,
+    footerHorizontalPadding: theme.space.large
   };
   var shadows = {
     offset: {
       width: 0,
       height: 3
     },
-    opacity: 0.27,
-    radius: 4.65,
+    opacity: 0.4,
+    radius: theme.radii.xlarge,
     elevation: 10
   };
   var radii = {
@@ -1993,15 +1996,16 @@ var getEmptyTheme = function getEmptyTheme(theme) {
   var colors = {
     text: theme.colors.onDefaultGlobalSurface,
     invertedText: theme.colors.onDarkGlobalSurface,
-    subduedText: theme.colors.disabledOnDefaultGlobalSurface
+    subduedText: theme.colors.mutedOnDefaultGlobalSurface,
+    invertedSubduedText: theme.colors.onDarkGlobalSurface
   };
   var fontSizes = {
-    title: theme.fontSizes.xxxxlarge,
-    description: theme.fontSizes.large
+    title: theme.fontSizes.xxxlarge,
+    description: theme.fontSizes.xlarge
   };
   var fonts = {
-    title: theme.fonts.neutral.semiBold,
-    description: theme.fonts.neutral.light
+    title: theme.fonts.playful.semiBold,
+    description: theme.fonts.playful.regular
   };
   return {
     fontSizes: fontSizes,
@@ -2018,7 +2022,7 @@ var getFABTheme = function getFABTheme(theme) {
     icon: theme.colors.onPrimary,
     headerText: theme.colors.onDarkGlobalSurface,
     actionItemBackground: theme.colors.primary,
-    backdropBackground: theme.colors.darkGlobalSurface,
+    backdropBackground: theme.colors.overlayGlobalSurface,
     titleText: theme.colors.onDarkGlobalSurface,
     actionItemText: theme.colors.onPrimary
   };
@@ -2339,10 +2343,12 @@ var getSelectTheme = function getSelectTheme(theme) {
     minimumOptionListHeight: theme.space.xxxxlarge * 5,
     sectionSpacing: theme.space.smallMedium,
     optionSpacing: theme.space.xsmall,
-    optionHorizontalMargin: theme.space.smallMedium,
+    optionListHorizontalPadding: theme.space.smallMedium,
     searchBarMarginTopSpacing: theme.space.small,
     searchBarHorizontalSpacing: theme.space.medium,
-    searchBarBottomSpacing: theme.space.small
+    searchBarBottomSpacing: theme.space.small,
+    singleSelectContentPaddingBottom: theme.space.medium,
+    suffixMarginRight: theme.space.smallMedium
   };
   var radii = {
     option: theme.radii.base
@@ -2718,7 +2724,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     large: theme.fontSizes.large,
     xlarge: theme.fontSizes.xlarge,
     xxxlarge: theme.fontSizes.xxxlarge,
-    xxxxxlarge: theme.fontSizes.xxxxxlarge
+    xxxxxlarge: theme.fontSizes.xxxxxlarge,
+    '7xlarge': theme.fontSizes['7xlarge']
   };
   var lineHeights = {
     small: theme.lineHeights.small,
@@ -2726,7 +2733,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     large: theme.lineHeights.large,
     xlarge: theme.lineHeights.xlarge,
     xxxlarge: theme.lineHeights.xxxlarge,
-    xxxxxlarge: theme.lineHeights.xxxxxlarge
+    xxxxxlarge: theme.lineHeights.xxxxxlarge,
+    '7xlarge': theme.lineHeights['7xlarge']
   };
   return {
     colors: colors,
@@ -5689,7 +5697,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 +5819,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 +5899,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 +6235,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 +6330,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 +6487,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,
@@ -7068,7 +7081,7 @@ var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref2) {
   var theme = _ref2.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
-    opacity: 0.48
+    opacity: 0.4
   });
 });
 var StyledHeaderWrapper = index$a(reactNative.View)(function (_ref3) {
@@ -7485,6 +7498,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,
@@ -7620,7 +7634,7 @@ var Header = function Header(_ref) {
     onPress: onRequestClose,
     intent: "text",
     testID: "bottom-sheet-close-icon",
-    size: "small"
+    size: "xsmall"
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
@@ -11190,7 +11204,7 @@ var calculateSnapPointsData = function calculateSnapPointsData(minimumHeight, he
   var uniqSnapPointOffsetValues = Array.from(new Set([].concat(_toConsumableArray(snapPointsOffsetValues), [0])));
   return {
     list: uniqSnapPointOffsetValues,
-    minHeightOffset: Math.max.apply(Math, uniqSnapPointOffsetValues),
+    minHeightOffset: Math.max.apply(Math, _toConsumableArray(uniqSnapPointOffsetValues)),
     maxHeightOffset: 0 // Max height
   };
 };
@@ -11416,7 +11430,7 @@ var StyledDescription = index$a(reactNative.Text)(function (_ref3) {
     fontFamily: theme.__hd__.empty.fonts.description,
     fontSize: theme.__hd__.empty.fontSizes.description,
     textAlign: 'center',
-    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedText : theme.__hd__.empty.colors.subduedText
+    color: themeVariant === 'dark' ? theme.__hd__.empty.colors.invertedSubduedText : theme.__hd__.empty.colors.subduedText
   };
 });
 
@@ -11687,7 +11701,7 @@ var ActionGroup = function ActionGroup(_ref2) {
   });
   var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [0, 0.9]
+    outputRange: [0, 0.4]
   });
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
@@ -11769,7 +11783,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,
@@ -12867,6 +12881,12 @@ var StyledSearchBar = index$a(reactNative.View)(function (_ref4) {
     paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing
   };
 });
+var StyledSectionList = index$a(reactNative.SectionList)(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
+  };
+});
 
 var Footer = function Footer(_ref) {
   var label = _ref.label,
@@ -12941,7 +12961,7 @@ var useKeyboard = function useKeyboard() {
   };
 };
 
-var StyledOptionList = function StyledOptionList(_ref) {
+var BaseOptionList = function BaseOptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
     onEndReached = _ref.onEndReached,
@@ -12954,7 +12974,7 @@ var StyledOptionList = function StyledOptionList(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     onEndReachedCalled = _useState2[0],
     setOnEndReachedCalled = _useState2[1];
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.SectionList, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledSectionList, {
     ref: sectionListRef,
     style: _objectSpread2({}, onQueryChange ? {
       height: reactNative.Dimensions.get('screen').height
@@ -12996,18 +13016,25 @@ var Option$2 = function Option(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     selected = _ref.selected,
-    onPress = _ref.onPress;
+    onPress = _ref.onPress,
+    _ref$highlighted = _ref.highlighted,
+    highlighted = _ref$highlighted === void 0 ? false : _ref$highlighted;
   var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+  var props = {
     selected: selected,
     disabled: disabled,
     onPress: onPress,
     title: text,
-    suffix: selected ? 'checkmark' : undefined,
-    style: {
-      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
-    }
-  });
+    suffix: selected === true ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: "checkmark",
+      intent: disabled ? 'disabled-text' : 'primary',
+      size: "small",
+      style: {
+        marginRight: theme.__hd__.select.space.suffixMarginRight
+      }
+    }) : undefined
+  };
+  return highlighted === true ? /*#__PURE__*/React__default["default"].createElement(List.Item, props) : /*#__PURE__*/React__default["default"].createElement(List.BasicItem, props);
 };
 
 var OptionList$1 = function OptionList(_ref) {
@@ -13039,10 +13066,11 @@ var OptionList$1 = function OptionList(_ref) {
       selected: selected,
       text: item.text,
       disabled: item.disabled,
-      onPress: onItemPress
+      onPress: onItemPress,
+      highlighted: item.highlighted
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement(StyledOptionList, {
+  return /*#__PURE__*/React__default["default"].createElement(BaseOptionList, {
     keyExtractor: keyExtractor,
     loading: loading,
     onEndReached: onEndReached,
@@ -13097,6 +13125,9 @@ function MultiSelect(_ref) {
   }).map(function (opt) {
     return opt.text;
   }).join(', ');
+  useDeprecation("Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.", onDimiss !== undefined);
+  useDeprecation("Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.", numberOfLines !== undefined);
+  useDeprecation("Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.", (inputProps === null || inputProps === void 0 ? void 0 : inputProps.required) !== undefined);
   React.useEffect(function () {
     setSelectingValue(value);
   }, [open]);
@@ -13181,19 +13212,25 @@ var Option$1 = function Option(_ref) {
     _ref$disabled = _ref.disabled,
     disabled = _ref$disabled === void 0 ? false : _ref$disabled,
     selected = _ref.selected,
-    onPress = _ref.onPress;
-  var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(List.BasicItem, {
+    onPress = _ref.onPress,
+    _ref$highlighted = _ref.highlighted,
+    highlighted = _ref$highlighted === void 0 ? false : _ref$highlighted;
+  var props = {
     selected: selected,
     disabled: disabled,
     onPress: onPress,
-    title: text,
-    style: {
-      marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin
-    }
-  });
+    title: text
+  };
+  return highlighted === true ? /*#__PURE__*/React__default["default"].createElement(List.Item, props) : /*#__PURE__*/React__default["default"].createElement(List.BasicItem, props);
 };
 
+var StyledOptionList = index$a(BaseOptionList)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    paddingBottom: theme.__hd__.select.space.singleSelectContentPaddingBottom
+  };
+});
+
 var OptionList = function OptionList(_ref) {
   var keyExtractor = _ref.keyExtractor,
     loading = _ref.loading,
@@ -13221,7 +13258,8 @@ var OptionList = function OptionList(_ref) {
       selected: selected,
       text: item.text,
       disabled: item.disabled,
-      onPress: onItemPress
+      onPress: onItemPress,
+      highlighted: item.highlighted
     });
   };
   return /*#__PURE__*/React__default["default"].createElement(StyledOptionList, {
@@ -13273,6 +13311,9 @@ var SingleSelect = function SingleSelect(_ref) {
   var displayedValue = (_flatOptions$find = flatOptions.find(function (opt) {
     return value === opt.value;
   })) === null || _flatOptions$find === void 0 ? void 0 : _flatOptions$find.text;
+  useDeprecation("Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.", onDimiss !== undefined);
+  useDeprecation("Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.", numberOfLines !== undefined);
+  useDeprecation("Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.", (inputProps === null || inputProps === void 0 ? void 0 : inputProps.required) !== undefined);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
@@ -13468,8 +13509,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 +13517,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);
@@ -13687,7 +13729,9 @@ var getTabItem$1 = function getTabItem(_ref) {
       icon: item,
       testID: "hero-icon-".concat(item),
       size: "small",
-      intent: active ? 'info' : 'text'
+      style: {
+        color: color
+      }
     });
   }
   if (typeof item === 'string') {
@@ -13876,6 +13920,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 +14080,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 primary intent instead.", intent !== 'default');
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
     themeVariant: variant,
@@ -14388,7 +14436,7 @@ var ToastContainer = /*#__PURE__*/React__default["default"].forwardRef(function
   var _ref2$displayType = _ref2.displayType,
     displayType = _ref2$displayType === void 0 ? 'single' : _ref2$displayType,
     _ref2$position = _ref2.position,
-    position = _ref2$position === void 0 ? 'top' : _ref2$position,
+    position = _ref2$position === void 0 ? 'bottom' : _ref2$position,
     style = _ref2.style;
   var theme = useTheme$1();
   var _useState = React.useState([]),
@@ -14451,8 +14499,9 @@ var ToastProvider = function ToastProvider(_ref) {
   var children = _ref.children,
     _ref$displayType = _ref.displayType,
     displayType = _ref$displayType === void 0 ? 'single' : _ref$displayType,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 'top' : _ref$position;
+    _position = _ref.position;
+  var position = _position === undefined ? 'bottom' : _position;
+  useDeprecation("Toast's position prop is deprecated and will be removed in the next major release.\nPlease remove it.", _position !== undefined);
   var toastRef = React.useRef(null);
   // @ts-expect-error: TODO: @tungv Fix this type error
   var _useState = React.useState(null),
@@ -14641,7 +14690,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 +14881,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'
@@ -25638,7 +25687,8 @@ function checkDCE() {
                       voids: a
                     }));
                     if (v.length > 0) if ("continue" === function () {
-                      var r = v[0],
+                      var _v = _slicedToArray(v, 1),
+                        r = _v[0],
                         n = v[v.length - 1],
                         _r4 = _slicedToArray(r, 2),
                         o = _r4[1],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.27.1",
+  "version": "8.0.0-rc.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": "8.0.0-rc.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": "8.0.0-rc.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": "8.0.0-rc.0",
     "rn-7-23-0": "npm:@hero-design/rn@7.23.0"
   },
   "prettier": "prettier-config-hd"