@hero-design/rn 8.92.3 → 8.93.0

package/lib/index.js

@@ -2621,7 +2621,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     warning: theme.colors.onWarningSurface,
     archived: theme.colors.onArchivedSurface,
     text: theme.colors.onDarkGlobalSurface,
-    border: theme.colors.defaultGlobalSurface
+    border: theme.colors.defaultGlobalSurface,
+    countText: theme.colors.onDarkGlobalSurface
   };
   var fonts = {
     medium: theme.fonts.neutral.regular,
@@ -2633,11 +2634,20 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     icon: {
       medium: theme.fontSizes.small,
       small: 8
-    }
+    },
+    count: 6
   };
   var lineHeights = {
     medium: theme.lineHeights.small,
-    small: 10
+    small: 10,
+    count: reactNative.Platform.select({
+      android: 11,
+      // vertical alignment
+      "default": 12
+    })
+  };
+  var radii = {
+    count: theme.radii.rounded
   };
   var sizes = {
     medium: {
@@ -2649,7 +2659,11 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       minWidth: theme.sizes.medium
     },
     statusHeight: theme.sizes.small,
-    statusWidth: theme.sizes.small
+    statusWidth: theme.sizes.small,
+    count: {
+      width: theme.sizes.smallMedium,
+      height: theme.sizes.smallMedium
+    }
   };
   var borderWidths = {
     "default": theme.borderWidths.medium
@@ -2662,7 +2676,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       horizontalPadding: theme.space.xsmall
     },
     statusPositionTop: -theme.space.xxsmall,
-    statusPositionRight: -theme.space.xxsmall
+    statusPositionRight: -theme.space.xxsmall,
+    countPaddingHorizontal: theme.space.xxsmall
   };
   return {
     colors: colors,
@@ -2671,7 +2686,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     sizes: sizes,
     space: space,
     lineHeights: lineHeights,
-    borderWidths: borderWidths
+    borderWidths: borderWidths,
+    radii: radii
   };
 };
 
@@ -7521,7 +7537,7 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$L = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$M = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -7534,7 +7550,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$M);
   useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React__namespace.default.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
@@ -7564,7 +7580,7 @@ var StyledCaption = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$K = ["children", "fontWeight", "intent", "allowFontScaling"];
+var _excluded$L = ["children", "fontWeight", "intent", "allowFontScaling"];
 var Caption = function Caption(_ref) {
   var children = _ref.children,
     _ref$fontWeight = _ref.fontWeight,
@@ -7573,7 +7589,7 @@ var Caption = function Caption(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$L);
   return /*#__PURE__*/React__namespace.default.createElement(StyledCaption, _extends$1({}, nativeProps, {
     themeFontWeight: fontWeight,
     themeIntent: intent,
@@ -7592,14 +7608,14 @@ var StyledLabel$1 = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$J = ["children", "intent", "allowFontScaling"];
+var _excluded$K = ["children", "intent", "allowFontScaling"];
 var Label = function Label(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$J);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$K);
   return /*#__PURE__*/React__namespace.default.createElement(StyledLabel$1, _extends$1({}, nativeProps, {
     themeIntent: intent,
     allowFontScaling: allowFontScaling
@@ -7620,7 +7636,7 @@ var StyledTitle$1 = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$I = ["children", "intent", "allowFontScaling", "level", "typeface"];
+var _excluded$J = ["children", "intent", "allowFontScaling", "level", "typeface"];
 var Title = function Title(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -7631,7 +7647,7 @@ var Title = function Title(_ref) {
     level = _ref$level === void 0 ? 'h1' : _ref$level,
     _ref$typeface = _ref.typeface,
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$I);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$J);
   return /*#__PURE__*/React__namespace.default.createElement(StyledTitle$1, _extends$1({}, nativeProps, {
     themeLevel: level,
     themeTypeface: typeface,
@@ -7666,7 +7682,7 @@ var StyledBody$2 = index$a(reactNative.Text)(function (_ref) {
   };
 });
 
-var _excluded$H = ["children", "intent", "allowFontScaling", "typeface", "variant"];
+var _excluded$I = ["children", "intent", "allowFontScaling", "typeface", "variant"];
 var Body = function Body(_ref) {
   var children = _ref.children,
     _ref$intent = _ref.intent,
@@ -7677,7 +7693,7 @@ var Body = function Body(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? 'regular' : _ref$variant,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$H);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$I);
   return /*#__PURE__*/React__namespace.default.createElement(StyledBody$2, _extends$1({}, nativeProps, {
     themeTypeface: typeface,
     themeIntent: intent,
@@ -7695,7 +7711,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', 'bolt', 'bookmark-added', 'bookmark-checked', 'bookmark', 'box-check', 'box', 'bpay', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'caret-down-small', 'caret-down', 'caret-left-small', 'caret-left', 'caret-right-small', 'caret-right', 'caret-up-small', 'caret-up', 'check-radio', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock-3', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'dot', 'double-buildings', 'edit-template', 'envelope', 'exclude', 'expand-content', 'expense', 'explore_nearby', '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', 'hero-points', 'home', 'image', 'import', 'incident-siren', 'instapay-daily', 'instapay-now', 'instapay', 'list', 'loading-2', 'loading', 'location-on', 'location', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'money-notes', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'near-me', 'node', 'open-folder', 'paperclip-vertical', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane-up', 'plane', 'play-arrow', 'play-circle', 'print', 'raising-hands', 'reply-arrow', 'reply', 'reschedule', 'rostering', 'salary-sacrifice', 'save', 'schedule-send', 'schedule', 'search-person', 'search', 'send', 'speaker-active', 'speaker', 'star-award', 'star-badge', 'star-circle', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'surfing', 'survey', 'swag-pillar-benefit', 'swag-pillar-career', 'swag-pillar-money', 'swag-pillar-work', 'swag', 'swipe-right', 'switch', 'tag', 'target', 'teams', 'thumb-down', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'wallet', 'warning', 'accommodation-outlined', 'activate-outlined', 'add-credit-card-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'afternoon-outlined', 'ai-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'application-outlined', 'arrow-down', 'arrow-downwards', 'arrow-left', 'arrow-leftwards', 'arrow-right', 'arrow-rightwards', 'arrow-up', 'arrow-upwards', 'article-outlined', 'at-sign', 'auto-graph-outlined', 'automotive-outlined', 'bakery-outlined', 'bar-outlined', 'beauty-outlined', 'beer-outlined', 'bell-active-outlined', 'bell-outlined', 'bell-slash-outlined', 'bill-management-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bolt-outlined', 'book-outlined', 'bookmark-added-outlined', 'bookmark-checked-outlined', 'bookmark-outlined', 'box-1-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calculator-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'call-outlined', 'call-split-outlined', 'camera-outlined', 'cancel', 'car-forward-outlined', 'cashback-outlined', 'charging-station-outlined', '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-in-outlined', 'clock-out-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'coin-super-outlined', 'comment-outlined', 'contacts-outlined', 'contacts-user-outlined', 'credit-card-outlined', 'cultural-site-outlined', 'cup-outlined', 'dentistry-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-box-outlined', 'dollar-card-outlined', 'dollar-coin-shine-outlined', 'dollar-credit-card-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-box-outlined', 'download-outlined', 'edit-template-outlined', 'electronics-outlined', 'email-outlined', 'end-break-outlined', 'enter-arrow', 'entertainment-outlined', 'envelope-outlined', 'evening-outlined', 'expense-approval-outlined', 'expense-outlined', 'explore-outlined', 'extension-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'fastfood-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-dollar-certified-outlined', 'file-dollar-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-statutory-outlined', 'file-verified-outlined', 'filter-outlined', 'fitness-outlined', 'folder-outlined', 'folder-upload-outlined', 'folder-user-outlined', 'form-outlined', 'funnel-filter-outline', 'goal-outlined', 'graph-outlined', 'grocery-outlined', 'hand-holding-user-outlined', 'handshake-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-active-outlined', 'home-outlined', 'id-card-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'job-search-outlined', 'leave-approval-outlined', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'local_mall_outlined', 'location-on-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'mail-outlined', 'map-outlined', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'morning-outlined', 'multiple-folders-outlined', 'multiple-users-outlined', 'near-me-outlined', 'node-outlined', 'number-points', 'number', 'overview-outlined', 'park-outlined', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'propane-tank-outlined', 'qr-code-outlined', 'qualification-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'restaurant-outlined', 'resume-outlined', 'return-arrow', 'rostering-outlined', 'safety-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'search-secured-outlined', 'send-outlined', 'share-1', 'share-2', 'share-outlined-2', 'share-outlined', 'shop-outlined', 'shopping_basket_outlined', 'show-chart-outlined', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'smart-match-outlined', 'sparkle-outlined', 'speaker-active-outlined', 'speaker-outlined', 'star-circle-outlined', 'star-outlined', 'start-break-outlined', 'stash-outlined', 'stopwatch-outlined', 'strikethrough', 'styler-outlined', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'tag-outlined', 'target-outlined', 'tennis-outlined', 'thumb-down-outlined', 'ticket-outlined', 'timesheet-outlined', 'timesheets-outlined', 'today-outlined', 'transfer', 'transportation-outlined', 'trash-bin-outlined', 'umbrela-outlined', 'unavailability-outlined', 'unavailable', 'underline', 'union-outlined', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-gear-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'volunteer-outlined', 'wallet-outlined', 'wellness-outlined'];
+var IconList = ['activate', 'add-emoji', 'add-person', 'adjustment', 'alignment', 'antenna', 'archive', 'assignment-warning', 'bank', 'bell', 'billing', 'bolt', 'bookmark-added', 'bookmark-checked', 'bookmark', 'box-check', 'box', 'bpay', 'buildings', 'cake', 'calendar-clock', 'calendar', 'candy-box-menu', 'caret-down-small', 'caret-down', 'caret-left-small', 'caret-left', 'caret-right-small', 'caret-right', 'caret-up-small', 'caret-up', 'check-radio', 'circle-add', 'circle-cancel', 'circle-check', 'circle-down', 'circle-info', 'circle-left', 'circle-ok', 'circle-pencil', 'circle-question', 'circle-remove', 'circle-right', 'circle-up', 'circle-warning', 'clock-3', 'clock', 'cloud-download', 'cloud-upload', 'cog', 'coin', 'contacts', 'credit-card', 'diamond', 'direction-arrows', 'directory', 'document', 'dollar-coin-shine', 'dot', 'double-buildings', 'edit-template', 'envelope', 'exclude', 'expand-content', 'expense', 'explore_nearby', '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', 'hero-points', 'home', 'image', 'import', 'incident-siren', 'instapay-daily', 'instapay-now', 'instapay', 'list', 'loading-2', 'loading', 'location-on', 'location', 'lock', 'looks-one', 'looks-two', 'media-content', 'menu', 'money-notes', 'moneybag', 'moon', 'multiple-stars', 'multiple-users', 'near-me', 'node', 'open-folder', 'paperclip-vertical', 'paperclip', 'payment-summary', 'pencil', 'phone', 'piggy-bank', 'plane-up', 'plane', 'play-arrow', 'play-circle', 'print', 'raising-hands', 'reply-arrow', 'reply', 'reschedule', 'rostering', 'salary-sacrifice', 'save', 'schedule-send', 'schedule', 'search-person', 'search', 'send', 'speaker-active', 'speaker', 'star-award', 'star-badge', 'star-circle', 'star-medal', 'star', 'steps-circle', 'stopwatch', 'suitcase', 'surfing', 'survey', 'swag-pillar-benefit', 'swag-pillar-career', 'swag-pillar-money', 'swag-pillar-work', 'swag', 'swipe-right', 'switch', 'tag', 'target', 'teams', 'thumb-down', 'timesheet', 'touch-id', 'trash-bin', 'unlock', 'user', 'video-1', 'video-2', 'wallet', 'warning', 'accommodation-outlined', 'activate-outlined', 'add-credit-card-outlined', 'add-person-outlined', 'add-section-outlined', 'add-time-outlined', 'add', 'adjustment-outlined', 'afternoon-outlined', 'ai-outlined', 'alignment-2-outlined', 'alignment-outlined', 'all-caps', 'application-outlined', 'arrow-down', 'arrow-downwards', 'arrow-left', 'arrow-leftwards', 'arrow-right', 'arrow-rightwards', 'arrow-up', 'arrow-upwards', 'article-outlined', 'at-sign', 'auto-graph-outlined', 'automotive-outlined', 'bakery-outlined', 'bar-outlined', 'beauty-outlined', 'beer-outlined', 'bell-active-outlined', 'bell-outlined', 'bell-slash-outlined', 'bill-management-outlined', 'billing-outlined', 'body-outlined', 'bold', 'bolt-outlined', 'book-outlined', 'bookmark-added-outlined', 'bookmark-checked-outlined', 'bookmark-outlined', 'box-1-outlined', 'box-check-outlined', 'box-outlined', 'bullet-points', 'cake-outlined', 'calculator-outlined', 'calendar-dates-outlined', 'calendar-star-outlined', 'call-outlined', 'call-split-outlined', 'camera-outlined', 'cancel', 'car-forward-outlined', 'cashback-outlined', 'charging-station-outlined', '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-in-outlined', 'clock-out-outlined', 'clock-outlined', 'cog-outlined', 'coin-outlined', 'coin-super-outlined', 'comment-outlined', 'contacts-outlined', 'contacts-user-outlined', 'credit-card-outlined', 'cultural-site-outlined', 'cup-outlined', 'dentistry-outlined', 'direction-arrows-outlined', 'directory-outlined', 'document-outlined', 'dollar-box-outlined', 'dollar-card-outlined', 'dollar-coin-shine-outlined', 'dollar-credit-card-outlined', 'dollar-sign', 'double-buildings-outlined', 'double-left-arrows', 'double-right-arrows', 'download-box-outlined', 'download-outlined', 'edit-template-outlined', 'electronics-outlined', 'email-outlined', 'end-break-outlined', 'enter-arrow', 'entertainment-outlined', 'envelope-outlined', 'evening-outlined', 'expense-approval-outlined', 'expense-outlined', 'explore-outlined', 'extension-outlined', 'external-link', 'eye-invisible-outlined', 'eye-outlined', 'face-id', 'face-meh-outlined', 'face-open-smiley-outlined', 'face-sad-outlined', 'face-smiley-outlined', 'fastfood-outlined', 'feed-outlined', 'file-certified-outlined', 'file-clone-outlined', 'file-copy-outlined', 'file-dispose-outlined', 'file-dollar-certified-outlined', 'file-dollar-outlined', 'file-download-outlined', 'file-export-outlined', 'file-lock-outlined', 'file-outlined', 'file-search-outlined', 'file-secured-outlined', 'file-statutory-outlined', 'file-verified-outlined', 'filter-outlined', 'fitness-outlined', 'folder-outlined', 'folder-upload-outlined', 'folder-user-outlined', 'form-outlined', 'funnel-filter-outline', 'goal-outlined', 'graph-outlined', 'grocery-outlined', 'hand-holding-user-outlined', 'handshake-outlined', 'happy-sun-outlined', 'health-bag-outlined', 'heart-outlined', 'home-active-outlined', 'home-outlined', 'id-card-outlined', 'image-outlined', 'import-outlined', 'instapay-outlined', 'italic', 'job-search-outlined', 'leave-approval-outlined', 'link-1', 'link-2', 'list-outlined', 'live-help-outlined', 'local_mall_outlined', 'location-on-outlined', 'location-outlined', 'lock-outlined', 'locked-file-outlined', 'log-out', 'mail-outlined', 'map-outlined', 'media-content-outlined', 'menu-close', 'menu-expand', 'menu-fold-outlined', 'menu-unfold-outlined', 'moneybag-outlined', 'moon-outlined', 'more-horizontal', 'more-vertical', 'morning-outlined', 'multiple-folders-outlined', 'multiple-users-outlined', 'near-me-outlined', 'node-outlined', 'number-points', 'number', 'overview-outlined', 'park-outlined', 'payment-summary-outlined', 'payslip-outlined', 'pencil-outlined', 'percentage', 'phone-outlined', 'piggy-bank-outlined', 'plane-outlined', 'play-circle-outlined', 'print-outlined', 'propane-tank-outlined', 'qr-code-outlined', 'qualification-outlined', 're-assign', 'redeem', 'refresh', 'remove', 'reply-outlined', 'restart', 'restaurant-outlined', 'resume-outlined', 'return-arrow', 'rostering-outlined', 'safety-outlined', 'save-outlined', 'schedule-outlined', 'search-outlined', 'search-secured-outlined', 'send-outlined', 'share-1', 'share-2', 'share-outlined-2', 'share-outlined', 'shield-check-outlined', 'shop-outlined', 'shopping_basket_outlined', 'show-chart-outlined', 'single-down-arrow', 'single-left-arrow', 'single-right-arrow', 'single-up-arrow', 'smart-match-outlined', 'sparkle-outlined', 'speaker-active-outlined', 'speaker-outlined', 'star-circle-outlined', 'star-outlined', 'start-break-outlined', 'stash-outlined', 'stopwatch-outlined', 'strikethrough', 'styler-outlined', 'suitcase-clock-outlined', 'suitcase-outlined', 'survey-outlined', 'switch-outlined', 'sync', 'tag-outlined', 'target-outlined', 'tennis-outlined', 'thumb-down-outlined', 'ticket-outlined', 'timesheet-outlined', 'timesheets-outlined', 'today-outlined', 'transfer', 'transportation-outlined', 'trash-bin-outlined', 'umbrela-outlined', 'unavailability-outlined', 'unavailable', 'underline', 'union-outlined', 'unlock-outlined', 'upload-outlined', 'user-circle-outlined', 'user-gear-outlined', 'user-outlined', 'user-rectangle-outlined', 'video-1-outlined', 'video-2-outlined', 'volunteer-outlined', 'wallet-outlined', 'wellness-outlined'];
 
 var activate = 59000;
 var adjustment = 59003;
@@ -7783,12 +7799,12 @@ var redeem = 59392;
 var refresh = 59393;
 var remove = 59394;
 var restart = 59396;
-var shopping_basket_outlined = 59412;
-var strikethrough = 59427;
-var sync = 59433;
-var transfer = 59442;
-var unavailable = 59447;
-var underline = 59448;
+var shopping_basket_outlined = 59413;
+var strikethrough = 59428;
+var sync = 59434;
+var transfer = 59443;
+var unavailable = 59448;
+var underline = 59449;
 var glyphMap = {
 	activate: activate,
 	"add-emoji": 59001,
@@ -8201,56 +8217,57 @@ var glyphMap = {
 	"share-2": 59408,
 	"share-outlined-2": 59409,
 	"share-outlined": 59410,
-	"shop-outlined": 59411,
+	"shield-check-outlined": 59411,
+	"shop-outlined": 59412,
 	shopping_basket_outlined: shopping_basket_outlined,
-	"show-chart-outlined": 59413,
-	"single-down-arrow": 59414,
-	"single-left-arrow": 59415,
-	"single-right-arrow": 59416,
-	"single-up-arrow": 59417,
-	"smart-match-outlined": 59418,
-	"sparkle-outlined": 59419,
-	"speaker-active-outlined": 59420,
-	"speaker-outlined": 59421,
-	"star-circle-outlined": 59422,
-	"star-outlined": 59423,
-	"start-break-outlined": 59424,
-	"stash-outlined": 59425,
-	"stopwatch-outlined": 59426,
+	"show-chart-outlined": 59414,
+	"single-down-arrow": 59415,
+	"single-left-arrow": 59416,
+	"single-right-arrow": 59417,
+	"single-up-arrow": 59418,
+	"smart-match-outlined": 59419,
+	"sparkle-outlined": 59420,
+	"speaker-active-outlined": 59421,
+	"speaker-outlined": 59422,
+	"star-circle-outlined": 59423,
+	"star-outlined": 59424,
+	"start-break-outlined": 59425,
+	"stash-outlined": 59426,
+	"stopwatch-outlined": 59427,
 	strikethrough: strikethrough,
-	"styler-outlined": 59428,
-	"suitcase-clock-outlined": 59429,
-	"suitcase-outlined": 59430,
-	"survey-outlined": 59431,
-	"switch-outlined": 59432,
+	"styler-outlined": 59429,
+	"suitcase-clock-outlined": 59430,
+	"suitcase-outlined": 59431,
+	"survey-outlined": 59432,
+	"switch-outlined": 59433,
 	sync: sync,
-	"tag-outlined": 59434,
-	"target-outlined": 59435,
-	"tennis-outlined": 59436,
-	"thumb-down-outlined": 59437,
-	"ticket-outlined": 59438,
-	"timesheet-outlined": 59439,
-	"timesheets-outlined": 59440,
-	"today-outlined": 59441,
+	"tag-outlined": 59435,
+	"target-outlined": 59436,
+	"tennis-outlined": 59437,
+	"thumb-down-outlined": 59438,
+	"ticket-outlined": 59439,
+	"timesheet-outlined": 59440,
+	"timesheets-outlined": 59441,
+	"today-outlined": 59442,
 	transfer: transfer,
-	"transportation-outlined": 59443,
-	"trash-bin-outlined": 59444,
-	"umbrela-outlined": 59445,
-	"unavailability-outlined": 59446,
+	"transportation-outlined": 59444,
+	"trash-bin-outlined": 59445,
+	"umbrela-outlined": 59446,
+	"unavailability-outlined": 59447,
 	unavailable: unavailable,
 	underline: underline,
-	"union-outlined": 59449,
-	"unlock-outlined": 59450,
-	"upload-outlined": 59451,
-	"user-circle-outlined": 59452,
-	"user-gear-outlined": 59453,
-	"user-outlined": 59454,
-	"user-rectangle-outlined": 59455,
-	"video-1-outlined": 59456,
-	"video-2-outlined": 59457,
-	"volunteer-outlined": 59458,
-	"wallet-outlined": 59459,
-	"wellness-outlined": 59460
+	"union-outlined": 59450,
+	"unlock-outlined": 59451,
+	"upload-outlined": 59452,
+	"user-circle-outlined": 59453,
+	"user-gear-outlined": 59454,
+	"user-outlined": 59455,
+	"user-rectangle-outlined": 59456,
+	"video-1-outlined": 59457,
+	"video-2-outlined": 59458,
+	"volunteer-outlined": 59459,
+	"wallet-outlined": 59460,
+	"wellness-outlined": 59461
 };
 
 var HeroIcon = reactNativeVectorIcons.createIconSet(glyphMap, 'hero-icons-mobile', 'hero-icons-mobile.ttf');
@@ -8276,10 +8293,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$G = ["style"];
+var _excluded$H = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$G);
+    otherProps = _objectWithoutProperties(_ref, _excluded$H);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -8384,7 +8401,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$F = ["key"];
+var _excluded$G = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -8405,7 +8422,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$F);
+      props = _objectWithoutProperties(_ref2, _excluded$G);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, {
       key: key
@@ -9271,7 +9288,7 @@ var borderWidths = {
 var config = _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, colors), space), radii), borderWidths);
 var flexPropsKey = ['alignContent', 'alignItems', 'alignSelf', 'display', 'flex', 'flexBasis', 'flexDirection', 'flexGrow', 'flexShrink', 'flexWrap', 'justifyContent'];
 
-var _excluded$E = ["theme"];
+var _excluded$F = ["theme"];
 var getThemeValue = function getThemeValue(theme, key, props) {
   var propConfig = config[key];
   var propValue = props[key];
@@ -9298,18 +9315,18 @@ var mapStylePropToThemeValue = function mapStylePropToThemeValue(theme, props) {
 var configKeys = Object.keys(config);
 var StyledBox = index$a(reactNative.View)(function (_ref5) {
   var theme = _ref5.theme,
-    otherProps = _objectWithoutProperties(_ref5, _excluded$E);
+    otherProps = _objectWithoutProperties(_ref5, _excluded$F);
   var styleProps = pick(configKeys, otherProps);
   var flexProps = pick(_toConsumableArray(flexPropsKey), otherProps);
   return _objectSpread2(_objectSpread2({}, mapStylePropToThemeValue(theme, styleProps)), flexProps);
 });
 
-var _excluded$D = ["children", "style", "testID"];
+var _excluded$E = ["children", "style", "testID"];
 var Box = function Box(_ref) {
   var children = _ref.children,
     style = _ref.style,
     testID = _ref.testID,
-    otherProps = _objectWithoutProperties(_ref, _excluded$D);
+    otherProps = _objectWithoutProperties(_ref, _excluded$E);
   return /*#__PURE__*/React__namespace.default.createElement(StyledBox, _extends$1({}, otherProps, {
     style: style,
     testID: testID
@@ -9530,16 +9547,44 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
     borderRadius: theme.radii.rounded
   };
 });
-var StyledIcon$4 = index$a(Icon)(function (_ref4) {
-  var themeSize = _ref4.themeSize,
-    theme = _ref4.theme;
+var StyledCount = index$a(reactNative.View)(function (_ref4) {
+  var theme = _ref4.theme;
+  return {
+    backgroundColor: theme.__hd__.badge.colors.danger,
+    borderRadius: theme.__hd__.badge.radii.count,
+    minWidth: theme.__hd__.badge.sizes.count.width,
+    height: theme.__hd__.badge.sizes.count.height,
+    alignItems: 'center',
+    justifyContent: 'center',
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    color: theme.__hd__.badge.colors.text,
+    display: 'flex',
+    paddingHorizontal: theme.__hd__.badge.space.countPaddingHorizontal,
+    position: 'absolute',
+    top: theme.__hd__.badge.space.statusPositionTop,
+    right: theme.__hd__.badge.space.statusPositionRight
+  };
+});
+var StyledCountText = index$a(Typography.Text)(function (_ref5) {
+  var theme = _ref5.theme;
+  return {
+    height: theme.__hd__.badge.sizes.count.height,
+    lineHeight: theme.__hd__.badge.lineHeights.count,
+    color: theme.__hd__.badge.colors.text,
+    fontSize: theme.__hd__.badge.fontSizes.count
+  };
+});
+var StyledIcon$4 = index$a(Icon)(function (_ref6) {
+  var themeSize = _ref6.themeSize,
+    theme = _ref6.theme;
   return {
     fontSize: theme.__hd__.badge.fontSizes[themeSize]
   };
 });
 
-var _excluded$C = ["children", "visible", "intent", "style", "testID"];
-var Status = function Status(_ref) {
+var _excluded$D = ["children", "visible", "intent", "style", "testID"];
+var Status$1 = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
     visible = _ref$visible === void 0 ? true : _ref$visible,
@@ -9547,7 +9592,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$C);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$D);
   var _React$useRef = React__namespace.default.useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__namespace.default.useRef(true);
@@ -9580,8 +9625,31 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$B = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
 var DEFAULT_MAX_NUMBER = 99;
+
+var _excluded$C = ["children", "visible", "style", "max", "testID", "content"];
+var Status = function Status(_ref) {
+  var children = _ref.children,
+    _ref$visible = _ref.visible,
+    visible = _ref$visible === void 0 ? true : _ref$visible,
+    style = _ref.style,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? DEFAULT_MAX_NUMBER : _ref$max,
+    testID = _ref.testID,
+    originalContent = _ref.content,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$C);
+  var content = React.useMemo(function () {
+    return originalContent > max ? "".concat(max, "+") : String(originalContent);
+  }, [originalContent, max]);
+  return /*#__PURE__*/React__namespace.default.createElement(reactNative.View, _extends$1({}, nativeProps, {
+    style: style,
+    testID: testID
+  }), children, visible && /*#__PURE__*/React__namespace.default.createElement(StyledCount, {
+    testID: "count-badge"
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledCountText, null, content)));
+};
+
+var _excluded$B = ["content", "visible", "max", "intent", "style", "testID", "size", "variant", "icon"];
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
 };
@@ -9647,7 +9715,8 @@ var Badge = function Badge(_ref) {
   }, content));
 };
 var Badge$1 = Object.assign(Badge, {
-  Status: Status
+  Status: Status$1,
+  Count: Status
 });
 
 var isHeroIcon = function isHeroIcon(x) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.92.3",
+  "version": "8.93.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Badge/Count.tsx

@@ -0,0 +1,60 @@
+import { View } from 'react-native';
+import React, { useMemo } from 'react';
+import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
+import type { ReactNode } from 'react';
+import { StyledCount, StyledCountText } from './StyledBadge';
+import { DEFAULT_MAX_NUMBER } from './constants';
+
+export interface CountProps extends ViewProps {
+  /*
+   * The Status Badge's content.
+   */
+  children: ReactNode;
+  /**
+   * Whether the Status Badge is visible.
+   */
+  visible?: boolean;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * The content will be displayed in the badge.
+   */
+  content: number;
+  /**
+   * The maximum number displayed on the badge. If number exceeds this value, `${max}+` are displayed instead. (Only applied when content is number.)
+   */
+  max?: number;
+}
+
+const Status = ({
+  children,
+  visible = true,
+  style,
+  max = DEFAULT_MAX_NUMBER,
+  testID,
+  content: originalContent,
+  ...nativeProps
+}: CountProps): JSX.Element => {
+  const content = useMemo(() => {
+    return originalContent > max ? `${max}+` : String(originalContent);
+  }, [originalContent, max]);
+
+  return (
+    <View {...nativeProps} style={style} testID={testID}>
+      {children}
+      {visible && (
+        <StyledCount testID="count-badge">
+          <StyledCountText>{content}</StyledCountText>
+        </StyledCount>
+      )}
+    </View>
+  );
+};
+
+export default Status;

package/src/components/Badge/StyledBadge.tsx

@@ -1,4 +1,4 @@
-import { Animated } from 'react-native';
+import { Animated, View } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
 import Icon from '../Icon';
@@ -64,10 +64,41 @@ const StyledStatus = styled(Animated.View)<{
   borderRadius: theme.radii.rounded,
 }));
 
+const StyledCount = styled(View)(({ theme }) => ({
+  backgroundColor: theme.__hd__.badge.colors.danger,
+  borderRadius: theme.__hd__.badge.radii.count,
+  minWidth: theme.__hd__.badge.sizes.count.width,
+  height: theme.__hd__.badge.sizes.count.height,
+  alignItems: 'center',
+  justifyContent: 'center',
+  textAlign: 'center',
+  textAlignVertical: 'center',
+  color: theme.__hd__.badge.colors.text,
+  display: 'flex',
+  paddingHorizontal: theme.__hd__.badge.space.countPaddingHorizontal,
+  position: 'absolute',
+  top: theme.__hd__.badge.space.statusPositionTop,
+  right: theme.__hd__.badge.space.statusPositionRight,
+}));
+
+const StyledCountText = styled(Typography.Text)(({ theme }) => ({
+  height: theme.__hd__.badge.sizes.count.height,
+  lineHeight: theme.__hd__.badge.lineHeights.count,
+  color: theme.__hd__.badge.colors.text,
+  fontSize: theme.__hd__.badge.fontSizes.count,
+}));
+
 const StyledIcon = styled(Icon)<{
   themeSize: ThemeSize;
 }>(({ themeSize, theme }) => ({
   fontSize: theme.__hd__.badge.fontSizes[themeSize],
 }));
 
-export { StyledView, StyledText, StyledStatus, StyledIcon };
+export {
+  StyledCountText,
+  StyledView,
+  StyledText,
+  StyledStatus,
+  StyledIcon,
+  StyledCount,
+};

package/src/components/Badge/__tests__/Count.spec.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import BadgeCount from '../Count';
+import Icon from '../../Icon';
+
+describe('BadgeCount', () => {
+  it.each`
+    content | expectedContent
+    ${1}    | ${'1'}
+    ${12}   | ${'12'}
+    ${999}  | ${'99+'}
+  `(
+    'displays $expectedContent for content $content',
+    ({ content, expectedContent }) => {
+      const { getByText, getByTestId, toJSON } = renderWithTheme(
+        <BadgeCount content={content} testID="wrapper">
+          <Icon icon="bell-outlined" size="small" />
+        </BadgeCount>
+      );
+
+      expect(toJSON()).toMatchSnapshot();
+      expect(getByText(expectedContent)).toBeDefined();
+      expect(getByTestId('count-badge')).toHaveStyle({
+        backgroundColor: '#cb300a',
+      });
+    }
+  );
+
+  it('should hide if visible is false', () => {
+    const { queryByTestId } = renderWithTheme(
+      <BadgeCount content={1} visible={false} testID="wrapper">
+        <Icon icon="bell-outlined" size="small" />
+      </BadgeCount>
+    );
+
+    expect(queryByTestId('count-badge')).toBeNull();
+  });
+});