[DSR] Updated AvatarIcon's severity Default to Neutral (#604)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
This PR updated AvatarIcon's severity Default to Neutral in the
`@metamask/design-system-react` package
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Fixes: #601 

## **Manual testing steps**

1. Run `yarn storybook`
2. Make sure the `AvatarIcon` component is functioning as expected
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

https://github.com/user-attachments/assets/4d21407c-79ce-4fb7-a9a8-1964df2b53c1

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs)
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: George Marshall <[email protected]>

Author: brianacnguyen

packages/design-system-react/src/components/AvatarIcon/AvatarIcon.constants.ts

@@ -13,7 +13,7 @@ export const TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR: Record<
   AvatarIconSeverity,
   string
 > = {
-  [AvatarIconSeverity.Default]: 'bg-background-muted',
+  [AvatarIconSeverity.Neutral]: 'bg-background-muted',
   [AvatarIconSeverity.Info]: 'bg-info-muted',
   [AvatarIconSeverity.Success]: 'bg-success-muted',
   [AvatarIconSeverity.Error]: 'bg-error-muted',
@@ -24,7 +24,7 @@ export const MAP_AVATARICON_SEVERITY_ICONCOLOR: Record<
   AvatarIconSeverity,
   IconColor
 > = {
-  [AvatarIconSeverity.Default]: IconColor.IconAlternative,
+  [AvatarIconSeverity.Neutral]: IconColor.IconAlternative,
   [AvatarIconSeverity.Info]: IconColor.InfoDefault,
   [AvatarIconSeverity.Success]: IconColor.SuccessDefault,
   [AvatarIconSeverity.Error]: IconColor.ErrorDefault,

packages/design-system-react/src/components/AvatarIcon/AvatarIcon.stories.tsx

@@ -89,7 +89,7 @@ export const Severity: Story = {
     <div className="flex gap-2">
       <AvatarIcon
         iconName={IconName.User}
-        severity={AvatarIconSeverity.Default}
+        severity={AvatarIconSeverity.Neutral}
       />
       <AvatarIcon iconName={IconName.Info} severity={AvatarIconSeverity.Info} />
       <AvatarIcon
@@ -113,11 +113,11 @@ export const HasBorder: Story = {
     <div className="flex gap-2 bg-primary-muted p-2">
       <AvatarIcon
         iconName={IconName.User}
-        severity={AvatarIconSeverity.Default}
+        severity={AvatarIconSeverity.Neutral}
       />
       <AvatarIcon
         iconName={IconName.User}
-        severity={AvatarIconSeverity.Default}
+        severity={AvatarIconSeverity.Neutral}
         hasBorder
       />
     </div>

packages/design-system-react/src/components/AvatarIcon/AvatarIcon.test.tsx

@@ -19,7 +19,7 @@ describe('AvatarIcon', () => {
     expect(avatarIcon).toBeInTheDocument();
     expect(avatarIcon).toHaveClass(
       TWCLASSMAP_AVATARICON_SEVERITY_BACKGROUNDCOLOR[
-        AvatarIconSeverity.Default
+        AvatarIconSeverity.Neutral
       ],
     );
   });

packages/design-system-react/src/components/AvatarIcon/AvatarIcon.tsx

@@ -17,7 +17,7 @@ export const AvatarIcon = React.forwardRef<HTMLDivElement, AvatarIconProps>(
       iconName,
       iconProps,
       size = AvatarIconSize.Md,
-      severity = AvatarIconSeverity.Default,
+      severity = AvatarIconSeverity.Neutral,
       className,
       ...props
     },

packages/design-system-react/src/components/AvatarIcon/AvatarIcon.types.ts

@@ -19,7 +19,7 @@ export type AvatarIconProps = Omit<AvatarBaseProps, 'children' | 'size'> & {
   size?: AvatarIconSize;
   /**
    * Optional prop to control the severity of the avatar
-   * @default AvatarIconSeverity.Default
+   * @default AvatarIconSeverity.Neutral
    */
   severity?: AvatarIconSeverity;
 };

packages/design-system-react/src/components/AvatarIcon/README.mdx

@@ -59,7 +59,7 @@ AvatarIcon supports five sizes, each with a corresponding icon size:
 
 The `severity` prop allows you to apply predefined color combinations to the avatar and icon. Each severity level uses appropriate background and icon colors:
 
-- `AvatarIconSeverity.Default` - neutral styling for general use
+- `AvatarIconSeverity.Neutral` - neutral styling for general use - default
 - `AvatarIconSeverity.Info` - info styling for informational content
 - `AvatarIconSeverity.Success` - success styling for positive actions/states
 - `AvatarIconSeverity.Warning` - warning styling for cautionary content
@@ -86,7 +86,7 @@ Example:
 ```tsx
 <AvatarIcon
   iconName={IconName.User}
-  severity={AvatarIconSeverity.Default}
+  severity={AvatarIconSeverity.Neutral}
   className="mx-2 my-4"
 />
 ```

packages/design-system-react/src/types/index.ts

@@ -59,7 +59,7 @@ export enum AvatarAccountVariant {
  * AvatarIcon - severity
  */
 export enum AvatarIconSeverity {
-  Default = 'default',
+  Neutral = 'neutral',
   Info = 'info',
   Success = 'success',
   Error = 'error',