feat(StackingGroup): use Avatar's text style for moreItems text

src/avatar.tsx

@@ -43,7 +43,7 @@ type AvatarProps = {
 /**
  * Not using TextPresets here because we don't want to scale the avatar text with the device settings
  */
-const renderText = (size: number, text: string): JSX.Element | null => {
+export const renderText = (size: number, text: string): JSX.Element | null => {
     if (!text) {
         return null;
     }

src/stacking-group.tsx

@@ -3,10 +3,10 @@ import * as React from 'react';
 import {useIsInverseOrMediaVariant} from './theme-variant-context';
 import {vars} from './skins/skin-contract.css';
 import Inline from './inline';
-import {Text4} from './text';
 import * as styles from './stacking-group.css';
 import * as mediaStyles from './image.css';
 import {applyCssVars} from './utils/css';
+import {renderText} from './avatar';
 
 type Props = {
     stacked?: boolean;
@@ -31,6 +31,7 @@ const StackingGroup = ({
     const size = moreItemsStyle.size;
 
     const borderRadius = moreItemsStyle.type === 'circle' ? '50%' : vars.borderRadii.mediaSmall;
+    const textColor = isInverse ? vars.colors.textPrimaryInverse : vars.colors.textBrand;
 
     return (
         <div
@@ -49,17 +50,13 @@ const StackingGroup = ({
                         style={{
                             width: size,
                             height: size,
+                            color: textColor,
                             borderRadius,
                             backgroundColor: isInverse ? vars.colors.brandHigh : vars.colors.brandLow,
                             border: stacked ? `1px solid ${vars.colors.borderLow}` : 'none',
                         }}
                     >
-                        <Text4
-                            regular
-                            color={isInverse ? vars.colors.textPrimaryInverse : vars.colors.textBrand}
-                        >
-                            {'+' + moreItemsCount}
-                        </Text4>
+                        {renderText(size, `+${moreItemsCount}`)}
                     </div>
                 )}
             </Inline>