fix: Update AvatarSubject component to use consistent sizing and in…

…itials generation logic

- Adopted new size definitions (`xs`, `sm`, `md`, `lg`, `xlg`, `xxlg`) for AvatarSubject, ensuring a more structured approach to styling.
- Introduced a method to calculate initials dynamically from names or split texts by splitting on spaces (for multi-word names).
- Implemented consistent logic for handling the display of icons and initials based on provided parameters (`color`, `icon`, `size`, `isMultiSubject`, `name`), with fallbacks for size-specific configurations.
- Updated internal references to use updated sizing definitions and improved readability through refactored code organization.

This update enhances maintainability, clarity, and consistency within the AvatarSubject component by consolidating logic and improving documentation through clear commit message practices.

(cherry picked from commit 14afa73)

packages/components/src/misc/AvatarSubject/AvatarSubject.js

@@ -6,54 +6,58 @@ import { MultiSubjectIcon } from './MultiSubjectIcon/MultiSubjectIcon';
 import { ImageLoader } from '../ImageLoader';
 import { Text } from '../../typography';
 
-const AvatarSubject = ({ color, icon, size, isMultiSubject, name }) => {
+const SIZES = {
+  xs: { height: '0px' },
+  sm: { height: '9px' },
+  md: { height: '12px' },
+  lg: { height: '18px' },
+  xlg: { height: '30px' },
+  xxlg: { height: '24px' },
+};
+
+const INIT_SIZES = {
+  xs: 'xs',
+  sm: 'sm',
+  md: 'xs',
+  lg: 'sm',
+  xlg: 'xl',
+  xxlg: 'xl',
+};
+
+const getInitials = (texts) => {
+  if (texts.length === 0) return '';
+  const firstInitial = texts[0][0].toUpperCase();
+  const secondInitial = texts[1] ? texts[1][0].toUpperCase() : '';
+  return `${firstInitial}${secondInitial}`;
+};
+
+const verifySize = (size) => (size in SIZES ? size : 'lg');
+
+const AvatarSubject = ({ color, icon, size: sizeProp, isMultiSubject, name }) => {
+  const size = verifySize(sizeProp);
   const { classes } = AvatarSubjectStyles({ size });
   const iconToShow = icon || null;
   const handleColor = isMultiSubject ? '#878D96' : color;
-  const handleSize = {
-    xs: { height: '0px' },
-    sm: { height: '9px' },
-    md: { height: '12px' },
-    lg: { height: '18px' },
-    xlg: { height: '30px' },
-    xxlg: { height: '24px' },
-  };
-
-  const handleInitialsSize = {
-    xs: 'xs',
-    sm: 'sm',
-    md: 'xs',
-    lg: 'sm',
-    xlg: 'xl',
-    xxlg: 'xl',
-  };
 
   const texts = name ? name.split(' ') : [];
-  const initials =
-    texts.length >= 1
-      ? `${texts[0][0].toUpperCase()}${texts[1] ? texts[1][0].toUpperCase() : ''}`
-      : '';
+  const initials = getInitials(texts);
 
   const itemsWithoutIcon = size === 'xs' || size === 'sm';
+  const iconSize = SIZES[size]?.height ?? SIZES[AVATAR_SUBJECT_DEFAULT_PROPS.size].height;
 
   const IconOrInitalsComp =
     icon && size ? (
-      <ImageLoader
-        forceImage
-        height={handleSize[size].height}
-        imageStyles={handleSize[size].height}
-        src={iconToShow}
-      />
+      <ImageLoader forceImage height={iconSize} imageStyles={iconSize} src={iconToShow} />
     ) : (
-      <Text size={handleInitialsSize[size]} className={classes.text}>
+      <Text size={INIT_SIZES[size]} className={classes.text}>
         {itemsWithoutIcon ? '' : name && initials}
       </Text>
     );
 
   return (
     <Box className={classes.bubble} style={{ backgroundColor: handleColor }}>
       {isMultiSubject ? (
-        <MultiSubjectIcon width={handleSize[size].height} height={handleSize[size].height} />
+        <MultiSubjectIcon width={iconSize} height={iconSize} />
       ) : (
         <Stack>{IconOrInitalsComp}</Stack>
       )}