From 23a58902ddc2de1b480a2711edbff973e1b52c5f Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Tue, 9 Dec 2025 07:58:46 -0800
Subject: [PATCH 1/2] chore(avatar): add @leafygreen-ui/hooks dep

---
 packages/avatar/package.json  | 1 +
 packages/avatar/tsconfig.json | 3 +++
 pnpm-lock.yaml                | 3 +++
 3 files changed, 7 insertions(+)

diff --git a/packages/avatar/package.json b/packages/avatar/package.json
index a266794ea6..06090db028 100644
--- a/packages/avatar/package.json
+++ b/packages/avatar/package.json
@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/hooks": "workspace:^",
     "@leafygreen-ui/icon": "workspace:^",
     "@leafygreen-ui/lib": "workspace:^",
     "@leafygreen-ui/logo": "workspace:^",
diff --git a/packages/avatar/tsconfig.json b/packages/avatar/tsconfig.json
index 64fc841b3d..dec57d6429 100644
--- a/packages/avatar/tsconfig.json
+++ b/packages/avatar/tsconfig.json
@@ -20,6 +20,9 @@
     {
       "path": "../emotion"
     },
+    {
+      "path": "../hooks"
+    },
     {
       "path": "../icon"
     },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8747f81e5f..5f5bda586a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -918,6 +918,9 @@ importers:
       '@leafygreen-ui/emotion':
         specifier: workspace:^
         version: link:../emotion
+      '@leafygreen-ui/hooks':
+        specifier: workspace:^
+        version: link:../hooks
       '@leafygreen-ui/icon':
         specifier: workspace:^
         version: link:../icon

From 41f9c3c50e08e198e8000def7e607cedf733fe51 Mon Sep 17 00:00:00 2001
From: Stephen Lee <stephen.lee@mongodb.com>
Date: Tue, 9 Dec 2025 07:59:05 -0800
Subject: [PATCH 2/2] fix(avatar): use unique id for AssistantAvatar gradient

---
 .../avatar/src/AssistantAvatar/AssistantAvatar.tsx    | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/avatar/src/AssistantAvatar/AssistantAvatar.tsx b/packages/avatar/src/AssistantAvatar/AssistantAvatar.tsx
index a19fbaf74f..8ab9a247c4 100644
--- a/packages/avatar/src/AssistantAvatar/AssistantAvatar.tsx
+++ b/packages/avatar/src/AssistantAvatar/AssistantAvatar.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { useIdAllocator } from '@leafygreen-ui/hooks';
 import { createGlyphComponent } from '@leafygreen-ui/icon';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
 
@@ -10,8 +11,6 @@ import {
 } from './AssistantAvatar.styles';
 import { AssistantAvatarProps } from './AssistantAvatar.types';
 
-const GRADIENT_ID = 'sparkle-gradient';
-
 export const AssistantAvatar: React.ComponentType<AssistantAvatarProps> =
   createGlyphComponent(
     'Sparkle',
@@ -21,7 +20,11 @@ export const AssistantAvatar: React.ComponentType<AssistantAvatarProps> =
       ...rest
     }: AssistantAvatarProps) => {
       const { darkMode, theme } = useDarkMode(darkModeProp);
-      const fill = disabled ? getDisabledFill(theme) : `url(#${GRADIENT_ID})`;
+      const gradientId = useIdAllocator({
+        prefix: 'lg-assistant_avatar-gradient',
+        id: rest.id,
+      });
+      const fill = disabled ? getDisabledFill(theme) : `url(#${gradientId})`;
       const gradientStartColor = getGradientStartColor(darkMode);
       const gradientEndColor = getGradientEndColor(darkMode);
 
@@ -38,7 +41,7 @@ export const AssistantAvatar: React.ComponentType<AssistantAvatarProps> =
           {!disabled && (
             <defs>
               <linearGradient
-                id={GRADIENT_ID}
+                id={gradientId}
                 x1="3.00005"
                 y1="3"
                 x2="12.5001"