@carbon/themes 11.32.0 → 11.33.0

package/lib/index.js

@@ -711,41 +711,22 @@ var aiAuraHoverBackground$3 = colors$1.blue10;
 var aiAuraHoverStart$3 = colors$1.rgba(colors$1.blue50, 0.4);
 var aiAuraHoverEnd$3 = colors$1.rgba(colors$1.white, 0);
 
-// Callout
-var slugCalloutShadowOuter01$3 = colors$1.rgba(colors$1.blue70, 0.25);
-var slugCalloutShadowOuter02$3 = colors$1.rgba(colors$1.black, 0.1);
+// AI Popover
+var aiPopoverShadowOuter01$3 = colors$1.rgba(colors$1.blue70, 0.25);
+var aiPopoverShadowOuter02$3 = colors$1.rgba(colors$1.black, 0.1);
 
 // AI skeleton
-var aiSkeletonBackground$3 = colors$1.blue20Hover;
-var aiSkeletonElementBackground$3 = colors$1.blue100;
+var aiSkeletonBackground$3 = colors$1.blue20;
+var aiSkeletonElementBackground$3 = colors$1.blue50;
 
 // AI Modal tokens
 var aiOverlay$3 = colors$1.rgba(colors$1.blue100, 0.5);
 
-//// Not used in phase 2 / possibly remove?
-var slugCalloutGradientTop$3 = colors$1.rgba(colors$1.gray10, 0.85);
-var slugCalloutGradientBottom$3 = colors$1.rgba(colors$1.gray20, 0.85);
-var aiGradientStart01$3 = colors$1.rgba(colors$1.coolGray10, 0.5);
-var aiGradientStart02$3 = colors$1.rgba(colors$1.blue10, 0.5);
-var aiGradientEnd$3 = colors$1.rgba(colors$1.white, 0);
-var slugCalloutAuraStart$3 = aiAuraStart$3;
-var slugCalloutAuraEnd$3 = aiAuraEnd$3;
-var slugCalloutGradientTopHover$3 = colors$1.rgba(colors$1.gray20, 0.55);
-var slugCalloutGradientBottomHover$3 = colors$1.rgba(colors$1.gray20Hover, 0.55);
-var slugCalloutAuraStartHover01$3 = colors$1.rgba(colors$1.white, 0.5);
-var slugCalloutAuraEndHover01$3 = colors$1.rgba(colors$1.white, 0);
-var slugCalloutAuraStartHover02$3 = colors$1.rgba(colors$1.blue20, 0.5);
-var slugCalloutAuraEndHover02$3 = colors$1.rgba(colors$1.white, 0);
-var slugCalloutGradientTopSelected$3 = colors$1.rgba(colors$1.gray20, 0.85);
-var slugCalloutGradientBottomSelected$3 = colors$1.rgba(colors$1.gray20Hover, 0.85);
-var slugCalloutAuraStartSelected$3 = colors$1.rgba(colors$1.blue10, 0.6);
-var slugCalloutAuraEndSelected$3 = colors$1.rgba(colors$1.white, 0);
-
 // One off tokens for caret
-var slugCalloutCaretCenter$3 = '#A7C7FF';
-var slugCalloutCaretBottom$3 = colors$1.blue20;
-var slugCalloutCaretBottomBackgroundActions$3 = '#DAE5F8';
-var slugCalloutCaretBottomBackground$3 = '#D5E5FF';
+var aiPopoverCaretCenter$3 = '#A7C7FF';
+var aiPopoverCaretBottom$3 = colors$1.blue20;
+var aiPopoverCaretBottomBackgroundActions$3 = '#DAE5F8';
+var aiPopoverCaretBottomBackground$3 = '#D5E5FF';
 
 // Chat tokens
 var chatPromptBackground$3 = colors$1.white;
@@ -757,6 +738,16 @@ var chatBubbleAgentBorder$3 = colors$1.gray20;
 var chatAvatarBot$3 = colors$1.gray60;
 var chatAvatarAgent$3 = colors$1.gray80;
 var chatAvatarUser$3 = colors$1.blue60;
+var chatShellBackground$3 = colors$1.white;
+var chatHeaderBackground$3 = colors$1.white;
+
+// Chat button tokens
+var chatButton$3 = linkPrimary$7;
+var chatButtonHover$3 = backgroundHover$7;
+var chatButtonTextHover$3 = linkPrimaryHover$7;
+var chatButtonActive$3 = backgroundActive$7;
+var chatButtonSelected$3 = backgroundSelected$7;
+var chatButtonTextSelected$3 = textSecondary$7;
 
 var white$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -876,32 +867,15 @@ var white$1 = /*#__PURE__*/Object.freeze({
   aiAuraHoverBackground: aiAuraHoverBackground$3,
   aiAuraHoverStart: aiAuraHoverStart$3,
   aiAuraHoverEnd: aiAuraHoverEnd$3,
-  slugCalloutShadowOuter01: slugCalloutShadowOuter01$3,
-  slugCalloutShadowOuter02: slugCalloutShadowOuter02$3,
+  aiPopoverShadowOuter01: aiPopoverShadowOuter01$3,
+  aiPopoverShadowOuter02: aiPopoverShadowOuter02$3,
   aiSkeletonBackground: aiSkeletonBackground$3,
   aiSkeletonElementBackground: aiSkeletonElementBackground$3,
   aiOverlay: aiOverlay$3,
-  slugCalloutGradientTop: slugCalloutGradientTop$3,
-  slugCalloutGradientBottom: slugCalloutGradientBottom$3,
-  aiGradientStart01: aiGradientStart01$3,
-  aiGradientStart02: aiGradientStart02$3,
-  aiGradientEnd: aiGradientEnd$3,
-  slugCalloutAuraStart: slugCalloutAuraStart$3,
-  slugCalloutAuraEnd: slugCalloutAuraEnd$3,
-  slugCalloutGradientTopHover: slugCalloutGradientTopHover$3,
-  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$3,
-  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$3,
-  slugCalloutAuraEndHover01: slugCalloutAuraEndHover01$3,
-  slugCalloutAuraStartHover02: slugCalloutAuraStartHover02$3,
-  slugCalloutAuraEndHover02: slugCalloutAuraEndHover02$3,
-  slugCalloutGradientTopSelected: slugCalloutGradientTopSelected$3,
-  slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected$3,
-  slugCalloutAuraStartSelected: slugCalloutAuraStartSelected$3,
-  slugCalloutAuraEndSelected: slugCalloutAuraEndSelected$3,
-  slugCalloutCaretCenter: slugCalloutCaretCenter$3,
-  slugCalloutCaretBottom: slugCalloutCaretBottom$3,
-  slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$3,
-  slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$3,
+  aiPopoverCaretCenter: aiPopoverCaretCenter$3,
+  aiPopoverCaretBottom: aiPopoverCaretBottom$3,
+  aiPopoverCaretBottomBackgroundActions: aiPopoverCaretBottomBackgroundActions$3,
+  aiPopoverCaretBottomBackground: aiPopoverCaretBottomBackground$3,
   chatPromptBackground: chatPromptBackground$3,
   chatPromptBorderStart: chatPromptBorderStart$3,
   chatPromptBorderEnd: chatPromptBorderEnd$3,
@@ -911,6 +885,14 @@ var white$1 = /*#__PURE__*/Object.freeze({
   chatAvatarBot: chatAvatarBot$3,
   chatAvatarAgent: chatAvatarAgent$3,
   chatAvatarUser: chatAvatarUser$3,
+  chatShellBackground: chatShellBackground$3,
+  chatHeaderBackground: chatHeaderBackground$3,
+  chatButton: chatButton$3,
+  chatButtonHover: chatButtonHover$3,
+  chatButtonTextHover: chatButtonTextHover$3,
+  chatButtonActive: chatButtonActive$3,
+  chatButtonSelected: chatButtonSelected$3,
+  chatButtonTextSelected: chatButtonTextSelected$3,
   caption01: type$2.caption01,
   caption02: type$2.caption02,
   label01: type$2.label01,
@@ -1170,41 +1152,22 @@ var aiAuraHoverBackground$2 = colors$1.blue10;
 var aiAuraHoverStart$2 = colors$1.rgba(colors$1.blue50, 0.4);
 var aiAuraHoverEnd$2 = colors$1.rgba(colors$1.white, 0);
 
-// Callout
-var slugCalloutShadowOuter01$2 = colors$1.rgba(colors$1.blue70, 0.25);
-var slugCalloutShadowOuter02$2 = colors$1.rgba(colors$1.black, 0.1);
+// AI Popover
+var aiPopoverShadowOuter01$2 = colors$1.rgba(colors$1.blue70, 0.25);
+var aiPopoverShadowOuter02$2 = colors$1.rgba(colors$1.black, 0.1);
 
 // AI skeleton
-var aiSkeletonBackground$2 = colors$1.blue20Hover;
-var aiSkeletonElementBackground$2 = colors$1.blue100;
+var aiSkeletonBackground$2 = colors$1.blue20;
+var aiSkeletonElementBackground$2 = colors$1.blue50;
 
 // AI Modal tokens
 var aiOverlay$2 = colors$1.rgba(colors$1.blue100, 0.5);
 
-//// Not used in phase 2 / possibly remove?
-var slugCalloutGradientTop$2 = colors$1.rgba(colors$1.gray10, 0.85);
-var slugCalloutGradientBottom$2 = colors$1.rgba(colors$1.gray20, 0.85);
-var aiGradientStart01$2 = colors$1.rgba(colors$1.coolGray10, 0.5);
-var aiGradientStart02$2 = colors$1.rgba(colors$1.blue10, 0.5);
-var aiGradientEnd$2 = colors$1.rgba(colors$1.white, 0);
-var slugCalloutAuraStart$2 = aiAuraStart$2;
-var slugCalloutAuraEnd$2 = aiAuraEnd$2;
-var slugCalloutGradientTopHover$2 = colors$1.rgba(colors$1.gray20, 0.55);
-var slugCalloutGradientBottomHover$2 = colors$1.rgba(colors$1.gray20Hover, 0.55);
-var slugCalloutAuraStartHover01$2 = colors$1.rgba(colors$1.white, 0.5);
-var slugCalloutAuraEndHover01$2 = colors$1.rgba(colors$1.white, 0);
-var slugCalloutAuraStartHover02$2 = colors$1.rgba(colors$1.blue20, 0.5);
-var slugCalloutAuraEndHover02$2 = colors$1.rgba(colors$1.white, 0);
-var slugCalloutGradientTopSelected$2 = colors$1.rgba(colors$1.gray20, 0.85);
-var slugCalloutGradientBottomSelected$2 = colors$1.rgba(colors$1.gray20Hover, 0.85);
-var slugCalloutAuraStartSelected$2 = colors$1.rgba(colors$1.blue10, 0.6);
-var slugCalloutAuraEndSelected$2 = colors$1.rgba(colors$1.white, 0);
-
 // One off tokens for caret
-var slugCalloutCaretCenter$2 = '#A7C7FF';
-var slugCalloutCaretBottom$2 = colors$1.blue20;
-var slugCalloutCaretBottomBackgroundActions$2 = '#D2DCEE';
-var slugCalloutCaretBottomBackground$2 = '#CCDBF8';
+var aiPopoverCaretCenter$2 = '#A7C7FF';
+var aiPopoverCaretBottom$2 = colors$1.blue20;
+var aiPopoverCaretBottomBackgroundActions$2 = '#D2DCEE';
+var aiPopoverCaretBottomBackground$2 = '#CCDBF8';
 
 // Chat tokens
 var chatPromptBackground$2 = colors$1.white;
@@ -1216,6 +1179,16 @@ var chatBubbleAgentBorder$2 = colors$1.gray20;
 var chatAvatarBot$2 = colors$1.gray60;
 var chatAvatarAgent$2 = colors$1.gray80;
 var chatAvatarUser$2 = colors$1.blue60;
+var chatShellBackground$2 = colors$1.white;
+var chatHeaderBackground$2 = colors$1.white;
+
+// Chat button tokens
+var chatButton$2 = linkPrimary$6;
+var chatButtonHover$2 = backgroundHover$6;
+var chatButtonTextHover$2 = linkPrimaryHover$6;
+var chatButtonActive$2 = backgroundActive$6;
+var chatButtonSelected$2 = backgroundSelected$6;
+var chatButtonTextSelected$2 = textSecondary$6;
 
 var g10$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1335,32 +1308,15 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   aiAuraHoverBackground: aiAuraHoverBackground$2,
   aiAuraHoverStart: aiAuraHoverStart$2,
   aiAuraHoverEnd: aiAuraHoverEnd$2,
-  slugCalloutShadowOuter01: slugCalloutShadowOuter01$2,
-  slugCalloutShadowOuter02: slugCalloutShadowOuter02$2,
+  aiPopoverShadowOuter01: aiPopoverShadowOuter01$2,
+  aiPopoverShadowOuter02: aiPopoverShadowOuter02$2,
   aiSkeletonBackground: aiSkeletonBackground$2,
   aiSkeletonElementBackground: aiSkeletonElementBackground$2,
   aiOverlay: aiOverlay$2,
-  slugCalloutGradientTop: slugCalloutGradientTop$2,
-  slugCalloutGradientBottom: slugCalloutGradientBottom$2,
-  aiGradientStart01: aiGradientStart01$2,
-  aiGradientStart02: aiGradientStart02$2,
-  aiGradientEnd: aiGradientEnd$2,
-  slugCalloutAuraStart: slugCalloutAuraStart$2,
-  slugCalloutAuraEnd: slugCalloutAuraEnd$2,
-  slugCalloutGradientTopHover: slugCalloutGradientTopHover$2,
-  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$2,
-  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$2,
-  slugCalloutAuraEndHover01: slugCalloutAuraEndHover01$2,
-  slugCalloutAuraStartHover02: slugCalloutAuraStartHover02$2,
-  slugCalloutAuraEndHover02: slugCalloutAuraEndHover02$2,
-  slugCalloutGradientTopSelected: slugCalloutGradientTopSelected$2,
-  slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected$2,
-  slugCalloutAuraStartSelected: slugCalloutAuraStartSelected$2,
-  slugCalloutAuraEndSelected: slugCalloutAuraEndSelected$2,
-  slugCalloutCaretCenter: slugCalloutCaretCenter$2,
-  slugCalloutCaretBottom: slugCalloutCaretBottom$2,
-  slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$2,
-  slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$2,
+  aiPopoverCaretCenter: aiPopoverCaretCenter$2,
+  aiPopoverCaretBottom: aiPopoverCaretBottom$2,
+  aiPopoverCaretBottomBackgroundActions: aiPopoverCaretBottomBackgroundActions$2,
+  aiPopoverCaretBottomBackground: aiPopoverCaretBottomBackground$2,
   chatPromptBackground: chatPromptBackground$2,
   chatPromptBorderStart: chatPromptBorderStart$2,
   chatPromptBorderEnd: chatPromptBorderEnd$2,
@@ -1370,6 +1326,14 @@ var g10$1 = /*#__PURE__*/Object.freeze({
   chatAvatarBot: chatAvatarBot$2,
   chatAvatarAgent: chatAvatarAgent$2,
   chatAvatarUser: chatAvatarUser$2,
+  chatShellBackground: chatShellBackground$2,
+  chatHeaderBackground: chatHeaderBackground$2,
+  chatButton: chatButton$2,
+  chatButtonHover: chatButtonHover$2,
+  chatButtonTextHover: chatButtonTextHover$2,
+  chatButtonActive: chatButtonActive$2,
+  chatButtonSelected: chatButtonSelected$2,
+  chatButtonTextSelected: chatButtonTextSelected$2,
   caption01: type$2.caption01,
   caption02: type$2.caption02,
   label01: type$2.label01,
@@ -1629,41 +1593,22 @@ var aiAuraHoverBackground$1 = layerHover01$1;
 var aiAuraHoverStart$1 = colors$1.rgba(colors$1.blue50, 0.4);
 var aiAuraHoverEnd$1 = colors$1.rgba(colors$1.black, 0);
 
-// Callout
-var slugCalloutShadowOuter01$1 = colors$1.rgba(colors$1.blue80, 0.25);
-var slugCalloutShadowOuter02$1 = colors$1.rgba(colors$1.black, 0.65);
+// AI Popover
+var aiPopoverShadowOuter01$1 = colors$1.rgba(colors$1.blue80, 0.25);
+var aiPopoverShadowOuter02$1 = colors$1.rgba(colors$1.black, 0.65);
 
 // AI skeleton
-var aiSkeletonBackground$1 = colors$1.blue70Hover;
-var aiSkeletonElementBackground$1 = colors$1.blue100;
+var aiSkeletonBackground$1 = colors$1.blue30;
+var aiSkeletonElementBackground$1 = colors$1.blue80;
 
 // AI Modal tokens
 var aiOverlay$1 = colors$1.rgba(colors$1.blue100, 0.5);
 
-//// Not used in phase 2 / possibly remove?
-var slugCalloutGradientTop$1 = colors$1.rgba(colors$1.gray100, 0.85);
-var slugCalloutGradientBottom$1 = colors$1.rgba(colors$1.gray90, 0.85);
-var aiGradientStart01$1 = colors$1.rgba(colors$1.blue20, 0.2);
-var aiGradientStart02$1 = 'transparent';
-var aiGradientEnd$1 = 'rgba(38, 38, 38, 0)';
-var slugCalloutAuraStart$1 = aiAuraStart$1;
-var slugCalloutAuraEnd$1 = aiAuraEnd$1;
-var slugCalloutGradientTopHover$1 = colors$1.rgba(colors$1.gray80, 0.55);
-var slugCalloutGradientBottomHover$1 = colors$1.rgba(colors$1.gray80Hover, 0.55);
-var slugCalloutAuraStartHover01$1 = colors$1.rgba(colors$1.blue20Hover, 0.3);
-var slugCalloutAuraEndHover01$1 = colors$1.rgba(colors$1.gray100, 0);
-var slugCalloutAuraStartHover02$1 = 'transparent';
-var slugCalloutAuraEndHover02$1 = 'transparent';
-var slugCalloutGradientTopSelected$1 = colors$1.rgba(colors$1.gray80, 0.85);
-var slugCalloutGradientBottomSelected$1 = colors$1.rgba(colors$1.gray80Hover, 0.85);
-var slugCalloutAuraStartSelected$1 = colors$1.rgba(colors$1.blue20, 0.2);
-var slugCalloutAuraEndSelected$1 = colors$1.rgba(colors$1.gray100, 0);
-
 // One off tokens for caret
-var slugCalloutCaretCenter$1 = '#456FB5';
-var slugCalloutCaretBottom$1 = '#465060';
-var slugCalloutCaretBottomBackgroundActions$1 = '#253042';
-var slugCalloutCaretBottomBackground$1 = '#2D3F5C';
+var aiPopoverCaretCenter$1 = '#456FB5';
+var aiPopoverCaretBottom$1 = '#465060';
+var aiPopoverCaretBottomBackgroundActions$1 = '#253042';
+var aiPopoverCaretBottomBackground$1 = '#2D3F5C';
 
 // Chat tokens
 var chatPromptBackground$1 = colors$1.gray100;
@@ -1675,6 +1620,16 @@ var chatBubbleAgentBorder$1 = colors$1.gray70;
 var chatAvatarBot$1 = colors$1.gray50;
 var chatAvatarAgent$1 = colors$1.gray30;
 var chatAvatarUser$1 = colors$1.blue50;
+var chatShellBackground$1 = colors$1.gray90;
+var chatHeaderBackground$1 = colors$1.gray90;
+
+// Chat button tokens
+var chatButton$1 = linkPrimary$5;
+var chatButtonHover$1 = backgroundHover$5;
+var chatButtonTextHover$1 = linkPrimaryHover$5;
+var chatButtonActive$1 = backgroundActive$5;
+var chatButtonSelected$1 = backgroundSelected$5;
+var chatButtonTextSelected$1 = textSecondary$5;
 
 var g90$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -1794,32 +1749,15 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   aiAuraHoverBackground: aiAuraHoverBackground$1,
   aiAuraHoverStart: aiAuraHoverStart$1,
   aiAuraHoverEnd: aiAuraHoverEnd$1,
-  slugCalloutShadowOuter01: slugCalloutShadowOuter01$1,
-  slugCalloutShadowOuter02: slugCalloutShadowOuter02$1,
+  aiPopoverShadowOuter01: aiPopoverShadowOuter01$1,
+  aiPopoverShadowOuter02: aiPopoverShadowOuter02$1,
   aiSkeletonBackground: aiSkeletonBackground$1,
   aiSkeletonElementBackground: aiSkeletonElementBackground$1,
   aiOverlay: aiOverlay$1,
-  slugCalloutGradientTop: slugCalloutGradientTop$1,
-  slugCalloutGradientBottom: slugCalloutGradientBottom$1,
-  aiGradientStart01: aiGradientStart01$1,
-  aiGradientStart02: aiGradientStart02$1,
-  aiGradientEnd: aiGradientEnd$1,
-  slugCalloutAuraStart: slugCalloutAuraStart$1,
-  slugCalloutAuraEnd: slugCalloutAuraEnd$1,
-  slugCalloutGradientTopHover: slugCalloutGradientTopHover$1,
-  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover$1,
-  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01$1,
-  slugCalloutAuraEndHover01: slugCalloutAuraEndHover01$1,
-  slugCalloutAuraStartHover02: slugCalloutAuraStartHover02$1,
-  slugCalloutAuraEndHover02: slugCalloutAuraEndHover02$1,
-  slugCalloutGradientTopSelected: slugCalloutGradientTopSelected$1,
-  slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected$1,
-  slugCalloutAuraStartSelected: slugCalloutAuraStartSelected$1,
-  slugCalloutAuraEndSelected: slugCalloutAuraEndSelected$1,
-  slugCalloutCaretCenter: slugCalloutCaretCenter$1,
-  slugCalloutCaretBottom: slugCalloutCaretBottom$1,
-  slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions$1,
-  slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground$1,
+  aiPopoverCaretCenter: aiPopoverCaretCenter$1,
+  aiPopoverCaretBottom: aiPopoverCaretBottom$1,
+  aiPopoverCaretBottomBackgroundActions: aiPopoverCaretBottomBackgroundActions$1,
+  aiPopoverCaretBottomBackground: aiPopoverCaretBottomBackground$1,
   chatPromptBackground: chatPromptBackground$1,
   chatPromptBorderStart: chatPromptBorderStart$1,
   chatPromptBorderEnd: chatPromptBorderEnd$1,
@@ -1829,6 +1767,14 @@ var g90$1 = /*#__PURE__*/Object.freeze({
   chatAvatarBot: chatAvatarBot$1,
   chatAvatarAgent: chatAvatarAgent$1,
   chatAvatarUser: chatAvatarUser$1,
+  chatShellBackground: chatShellBackground$1,
+  chatHeaderBackground: chatHeaderBackground$1,
+  chatButton: chatButton$1,
+  chatButtonHover: chatButtonHover$1,
+  chatButtonTextHover: chatButtonTextHover$1,
+  chatButtonActive: chatButtonActive$1,
+  chatButtonSelected: chatButtonSelected$1,
+  chatButtonTextSelected: chatButtonTextSelected$1,
   caption01: type$2.caption01,
   caption02: type$2.caption02,
   label01: type$2.label01,
@@ -2088,41 +2034,22 @@ var aiAuraHoverBackground = layerHover01;
 var aiAuraHoverStart = colors$1.rgba(colors$1.blue50, 0.4);
 var aiAuraHoverEnd = colors$1.rgba(colors$1.black, 0);
 
-// Callout
-var slugCalloutShadowOuter01 = colors$1.rgba(colors$1.blue80, 0.25);
-var slugCalloutShadowOuter02 = colors$1.rgba(colors$1.black, 0.65);
+// AI Popover
+var aiPopoverShadowOuter01 = colors$1.rgba(colors$1.blue80, 0.25);
+var aiPopoverShadowOuter02 = colors$1.rgba(colors$1.black, 0.65);
 
 // AI skeleton
-var aiSkeletonBackground = colors$1.blue70Hover;
-var aiSkeletonElementBackground = colors$1.blue100;
+var aiSkeletonBackground = colors$1.blue30;
+var aiSkeletonElementBackground = colors$1.blue80;
 
 // AI Modal tokens
 var aiOverlay = colors$1.rgba(colors$1.blue100, 0.5);
 
-//// Not used in phase 2 / possibly remove?
-var slugCalloutGradientTop = colors$1.rgba(colors$1.gray100, 0.85);
-var slugCalloutGradientBottom = colors$1.rgba(colors$1.gray90, 0.85);
-var aiGradientStart01 = colors$1.rgba(colors$1.blue20, 0.2);
-var aiGradientStart02 = 'transparent';
-var aiGradientEnd = 'rgba(38, 38, 38, 0)';
-var slugCalloutAuraStart = aiAuraStart;
-var slugCalloutAuraEnd = aiAuraEnd;
-var slugCalloutGradientTopHover = colors$1.rgba(colors$1.gray80, 0.55);
-var slugCalloutGradientBottomHover = colors$1.rgba(colors$1.gray80Hover, 0.55);
-var slugCalloutAuraStartHover01 = colors$1.rgba(colors$1.blue20Hover, 0.3);
-var slugCalloutAuraEndHover01 = colors$1.rgba(colors$1.gray100, 0);
-var slugCalloutAuraStartHover02 = 'transparent';
-var slugCalloutAuraEndHover02 = 'transparent';
-var slugCalloutGradientTopSelected = colors$1.rgba(colors$1.gray80, 0.85);
-var slugCalloutGradientBottomSelected = colors$1.rgba(colors$1.gray80Hover, 0.85);
-var slugCalloutAuraStartSelected = colors$1.rgba(colors$1.blue20, 0.2);
-var slugCalloutAuraEndSelected = colors$1.rgba(colors$1.gray100, 0);
-
 // One off tokens for caret
-var slugCalloutCaretCenter = '#3F68AF';
-var slugCalloutCaretBottom = '#3D4655';
-var slugCalloutCaretBottomBackgroundActions = '#192436';
-var slugCalloutCaretBottomBackground = '#213250';
+var aiPopoverCaretCenter = '#3F68AF';
+var aiPopoverCaretBottom = '#3D4655';
+var aiPopoverCaretBottomBackgroundActions = '#192436';
+var aiPopoverCaretBottomBackground = '#213250';
 
 // Chat tokens
 var chatPromptBackground = colors$1.gray100;
@@ -2134,6 +2061,16 @@ var chatBubbleAgentBorder = colors$1.gray70;
 var chatAvatarBot = colors$1.gray50;
 var chatAvatarAgent = colors$1.gray30;
 var chatAvatarUser = colors$1.blue50;
+var chatShellBackground = colors$1.gray90;
+var chatHeaderBackground = colors$1.gray90;
+
+// Chat button tokens
+var chatButton = linkPrimary$4;
+var chatButtonHover = backgroundHover$4;
+var chatButtonTextHover = linkPrimaryHover$4;
+var chatButtonActive = backgroundActive$4;
+var chatButtonSelected = backgroundSelected$4;
+var chatButtonTextSelected = textSecondary$4;
 
 var g100$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -2253,32 +2190,15 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   aiAuraHoverBackground: aiAuraHoverBackground,
   aiAuraHoverStart: aiAuraHoverStart,
   aiAuraHoverEnd: aiAuraHoverEnd,
-  slugCalloutShadowOuter01: slugCalloutShadowOuter01,
-  slugCalloutShadowOuter02: slugCalloutShadowOuter02,
+  aiPopoverShadowOuter01: aiPopoverShadowOuter01,
+  aiPopoverShadowOuter02: aiPopoverShadowOuter02,
   aiSkeletonBackground: aiSkeletonBackground,
   aiSkeletonElementBackground: aiSkeletonElementBackground,
   aiOverlay: aiOverlay,
-  slugCalloutGradientTop: slugCalloutGradientTop,
-  slugCalloutGradientBottom: slugCalloutGradientBottom,
-  aiGradientStart01: aiGradientStart01,
-  aiGradientStart02: aiGradientStart02,
-  aiGradientEnd: aiGradientEnd,
-  slugCalloutAuraStart: slugCalloutAuraStart,
-  slugCalloutAuraEnd: slugCalloutAuraEnd,
-  slugCalloutGradientTopHover: slugCalloutGradientTopHover,
-  slugCalloutGradientBottomHover: slugCalloutGradientBottomHover,
-  slugCalloutAuraStartHover01: slugCalloutAuraStartHover01,
-  slugCalloutAuraEndHover01: slugCalloutAuraEndHover01,
-  slugCalloutAuraStartHover02: slugCalloutAuraStartHover02,
-  slugCalloutAuraEndHover02: slugCalloutAuraEndHover02,
-  slugCalloutGradientTopSelected: slugCalloutGradientTopSelected,
-  slugCalloutGradientBottomSelected: slugCalloutGradientBottomSelected,
-  slugCalloutAuraStartSelected: slugCalloutAuraStartSelected,
-  slugCalloutAuraEndSelected: slugCalloutAuraEndSelected,
-  slugCalloutCaretCenter: slugCalloutCaretCenter,
-  slugCalloutCaretBottom: slugCalloutCaretBottom,
-  slugCalloutCaretBottomBackgroundActions: slugCalloutCaretBottomBackgroundActions,
-  slugCalloutCaretBottomBackground: slugCalloutCaretBottomBackground,
+  aiPopoverCaretCenter: aiPopoverCaretCenter,
+  aiPopoverCaretBottom: aiPopoverCaretBottom,
+  aiPopoverCaretBottomBackgroundActions: aiPopoverCaretBottomBackgroundActions,
+  aiPopoverCaretBottomBackground: aiPopoverCaretBottomBackground,
   chatPromptBackground: chatPromptBackground,
   chatPromptBorderStart: chatPromptBorderStart,
   chatPromptBorderEnd: chatPromptBorderEnd,
@@ -2288,6 +2208,14 @@ var g100$1 = /*#__PURE__*/Object.freeze({
   chatAvatarBot: chatAvatarBot,
   chatAvatarAgent: chatAvatarAgent,
   chatAvatarUser: chatAvatarUser,
+  chatShellBackground: chatShellBackground,
+  chatHeaderBackground: chatHeaderBackground,
+  chatButton: chatButton,
+  chatButtonHover: chatButtonHover,
+  chatButtonTextHover: chatButtonTextHover,
+  chatButtonActive: chatButtonActive,
+  chatButtonSelected: chatButtonSelected,
+  chatButtonTextSelected: chatButtonTextSelected,
   caption01: type$2.caption01,
   caption02: type$2.caption02,
   label01: type$2.label01,
@@ -4528,10 +4456,10 @@ var tagBackgroundGray = {
   g100: colors$1.gray70
 };
 var tagColorGray = {
-  whiteTheme: colors$1.gray80,
-  g10: colors$1.gray80,
-  g90: colors$1.gray20,
-  g100: colors$1.gray20
+  whiteTheme: colors$1.gray100,
+  g10: colors$1.gray100,
+  g90: colors$1.gray10,
+  g100: colors$1.gray10
 };
 var tagHoverGray = {
   whiteTheme: colors$1.gray20Hover,
@@ -4546,10 +4474,10 @@ var tagBackgroundCoolGray = {
   g100: colors$1.coolGray70
 };
 var tagColorCoolGray = {
-  whiteTheme: colors$1.coolGray80,
-  g10: colors$1.coolGray80,
-  g90: colors$1.coolGray20,
-  g100: colors$1.coolGray20
+  whiteTheme: colors$1.coolGray100,
+  g10: colors$1.coolGray100,
+  g90: colors$1.coolGray10,
+  g100: colors$1.coolGray10
 };
 var tagHoverCoolGray = {
   whiteTheme: colors$1.coolGray20Hover,
@@ -4564,10 +4492,10 @@ var tagBackgroundWarmGray = {
   g100: colors$1.warmGray70
 };
 var tagColorWarmGray = {
-  whiteTheme: colors$1.warmGray80,
-  g10: colors$1.warmGray80,
-  g90: colors$1.warmGray20,
-  g100: colors$1.warmGray20
+  whiteTheme: colors$1.warmGray100,
+  g10: colors$1.warmGray100,
+  g90: colors$1.warmGray10,
+  g100: colors$1.warmGray10
 };
 var tagHoverWarmGray = {
   whiteTheme: colors$1.warmGray20Hover,
@@ -4575,6 +4503,66 @@ var tagHoverWarmGray = {
   g90: colors$1.warmGray70Hover,
   g100: colors$1.warmGray70Hover
 };
+var tagBorderRed = {
+  whiteTheme: colors$1.red40,
+  g10: colors$1.red40,
+  g90: colors$1.red50,
+  g100: colors$1.red50
+};
+var tagBorderBlue = {
+  whiteTheme: colors$1.blue40,
+  g10: colors$1.blue40,
+  g90: colors$1.blue50,
+  g100: colors$1.blue50
+};
+var tagBorderCyan = {
+  whiteTheme: colors$1.cyan40,
+  g10: colors$1.cyan40,
+  g90: colors$1.cyan50,
+  g100: colors$1.cyan50
+};
+var tagBorderTeal = {
+  whiteTheme: colors$1.teal40,
+  g10: colors$1.teal40,
+  g90: colors$1.teal50,
+  g100: colors$1.teal50
+};
+var tagBorderGreen = {
+  whiteTheme: colors$1.green40,
+  g10: colors$1.green40,
+  g90: colors$1.green50,
+  g100: colors$1.green50
+};
+var tagBorderMagenta = {
+  whiteTheme: colors$1.magenta40,
+  g10: colors$1.magenta40,
+  g90: colors$1.magenta50,
+  g100: colors$1.magenta50
+};
+var tagBorderPurple = {
+  whiteTheme: colors$1.purple40,
+  g10: colors$1.purple40,
+  g90: colors$1.purple50,
+  g100: colors$1.purple50
+};
+var tagBorderGray = {
+  whiteTheme: colors$1.gray40,
+  g10: colors$1.gray40,
+  g90: colors$1.gray50,
+  g100: colors$1.gray50
+};
+var tagBorderCoolGray = {
+  whiteTheme: colors$1.coolGray40,
+  g10: colors$1.coolGray40,
+  g90: colors$1.coolGray50,
+  g100: colors$1.coolGray50
+};
+var tagBorderWarmGray = {
+  whiteTheme: colors$1.warmGray40,
+  g10: colors$1.warmGray40,
+  g90: colors$1.warmGray50,
+  g100: colors$1.warmGray50
+};
 
 var tokens$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4607,7 +4595,17 @@ var tokens$1 = /*#__PURE__*/Object.freeze({
   tagHoverCoolGray: tagHoverCoolGray,
   tagBackgroundWarmGray: tagBackgroundWarmGray,
   tagColorWarmGray: tagColorWarmGray,
-  tagHoverWarmGray: tagHoverWarmGray
+  tagHoverWarmGray: tagHoverWarmGray,
+  tagBorderRed: tagBorderRed,
+  tagBorderBlue: tagBorderBlue,
+  tagBorderCyan: tagBorderCyan,
+  tagBorderTeal: tagBorderTeal,
+  tagBorderGreen: tagBorderGreen,
+  tagBorderMagenta: tagBorderMagenta,
+  tagBorderPurple: tagBorderPurple,
+  tagBorderGray: tagBorderGray,
+  tagBorderCoolGray: tagBorderCoolGray,
+  tagBorderWarmGray: tagBorderWarmGray
 });
 
 var index$1 = /*#__PURE__*/Object.freeze({
@@ -5184,15 +5182,17 @@ var contextual = TokenGroup.create({
 var ai = TokenGroup.create({
   name: 'AI',
   properties: ['background'],
-  tokens: ['slug-background', 'slug-gradient', 'slug-background-hover', 'slug-gradient-hover', 'slug-hollow-hover', 'slug-callout-gradient-top', 'slug-callout-gradient-bottom', 'slug-callout-aura-start', 'slug-callout-aura-end', 'slug-callout-gradient-top-hover', 'slug-callout-gradient-bottom-hover', 'slug-callout-aura-start-hover-01', 'slug-callout-aura-start-hover-02', 'slug-callout-aura-end-hover-01', 'slug-callout-aura-end-hover-02', 'slug-callout-gradient-top-selected', 'slug-callout-gradient-bottom-selected', 'slug-callout-aura-start-selected', 'slug-callout-aura-end-selected', 'ai-gradient-start-01', 'ai-gradient-start-02', 'ai-gradient-end',
+  tokens: ['slug-background', 'slug-gradient', 'slug-background-hover', 'slug-gradient-hover', 'slug-hollow-hover',
   // Phase 2
-  'slug-callout-shadow-outer-01', 'slug-callout-shadow-outer-02',
+  'ai-popover-shadow-outer-01', 'ai-popover-shadow-outer-02',
   // Linear gradient refactor
   'ai-inner-shadow', 'ai-aura-start', 'ai-aura-start-table', 'ai-aura-end', 'ai-aura-hover-background', 'ai-aura-hover-start', 'ai-aura-hover-end', 'ai-border-strong', 'ai-border-start', 'ai-border-end', 'ai-drop-shadow', 'ai-skeleton-background', 'ai-skeleton-element-background', 'ai-overlay',
   // Caret tokens
-  'slug-callout-caret-center', 'slug-callout-caret-bottom', 'slug-callout-caret-bottom-background', 'slug-callout-caret-bottom-background-actions',
+  'ai-popover-caret-center', 'ai-popover-caret-bottom', 'ai-popover-caret-bottom-background', 'ai-popover-caret-bottom-background-actions',
   // Chat tokens
-  'chat-prompt-background', 'chat-prompt-border-start', 'chat-prompt-border-end', 'chat-bubble-user', 'chat-bubble-agent', 'chat-bubble-agent-border', 'chat-avatar-bot', 'chat-avatar-agent', 'chat-avatar-user']
+  'chat-prompt-background', 'chat-prompt-border-start', 'chat-prompt-border-end', 'chat-bubble-user', 'chat-bubble-agent', 'chat-bubble-agent-border', 'chat-avatar-bot', 'chat-avatar-agent', 'chat-avatar-user', 'chat-shell-background', 'chat-header-background',
+  // Chat button tokens
+  'chat-button', 'chat-button-hover', 'chat-button-text-hover', 'chat-button-active', 'chat-button-selected', 'chat-button-text-selected']
 });
 var group = TokenGroup.create({
   name: 'All',
@@ -5234,7 +5234,7 @@ var notification = TokenGroup.create({
 var tag = TokenGroup.create({
   name: 'Tag',
   properties: [],
-  tokens: ['tag-background-red', 'tag-color-red', 'tag-hover-red', 'tag-background-magenta', 'tag-color-magenta', 'tag-hover-magenta', 'tag-background-purple', 'tag-color-purple', 'tag-hover-purple', 'tag-background-blue', 'tag-color-blue', 'tag-hover-blue', 'tag-background-cyan', 'tag-color-cyan', 'tag-hover-cyan', 'tag-background-teal', 'tag-color-teal', 'tag-hover-teal', 'tag-background-green', 'tag-color-green', 'tag-hover-green', 'tag-background-gray', 'tag-color-gray', 'tag-hover-gray', 'tag-background-cool-gray', 'tag-color-cool-gray', 'tag-hover-cool-gray', 'tag-background-warm-gray', 'tag-color-warm-gray', 'tag-hover-warm-gray']
+  tokens: ['tag-background-red', 'tag-color-red', 'tag-hover-red', 'tag-background-magenta', 'tag-color-magenta', 'tag-hover-magenta', 'tag-background-purple', 'tag-color-purple', 'tag-hover-purple', 'tag-background-blue', 'tag-color-blue', 'tag-hover-blue', 'tag-background-cyan', 'tag-color-cyan', 'tag-hover-cyan', 'tag-background-teal', 'tag-color-teal', 'tag-hover-teal', 'tag-background-green', 'tag-color-green', 'tag-hover-green', 'tag-background-gray', 'tag-color-gray', 'tag-hover-gray', 'tag-border-red', 'tag-border-blue', 'tag-border-cyan', 'tag-border-teal', 'tag-border-green', 'tag-border-magenta', 'tag-border-purple', 'tag-border-gray', 'tag-border-cool-gray', 'tag-border-warm-gray', 'tag-background-cool-gray', 'tag-color-cool-gray', 'tag-hover-cool-gray', 'tag-background-warm-gray', 'tag-color-warm-gray', 'tag-hover-warm-gray']
 });
 
 var components = /*#__PURE__*/Object.freeze({
@@ -5642,11 +5642,14 @@ exports.aiBorderEnd = aiBorderEnd$3;
 exports.aiBorderStart = aiBorderStart$3;
 exports.aiBorderStrong = aiBorderStrong$3;
 exports.aiDropShadow = aiDropShadow$3;
-exports.aiGradientEnd = aiGradientEnd$3;
-exports.aiGradientStart01 = aiGradientStart01$3;
-exports.aiGradientStart02 = aiGradientStart02$3;
 exports.aiInnerShadow = aiInnerShadow$3;
 exports.aiOverlay = aiOverlay$3;
+exports.aiPopoverCaretBottom = aiPopoverCaretBottom$3;
+exports.aiPopoverCaretBottomBackground = aiPopoverCaretBottomBackground$3;
+exports.aiPopoverCaretBottomBackgroundActions = aiPopoverCaretBottomBackgroundActions$3;
+exports.aiPopoverCaretCenter = aiPopoverCaretCenter$3;
+exports.aiPopoverShadowOuter01 = aiPopoverShadowOuter01$3;
+exports.aiPopoverShadowOuter02 = aiPopoverShadowOuter02$3;
 exports.aiSkeletonBackground = aiSkeletonBackground$3;
 exports.aiSkeletonElementBackground = aiSkeletonElementBackground$3;
 exports.background = background$8;
@@ -5680,9 +5683,17 @@ exports.chatAvatarUser = chatAvatarUser$3;
 exports.chatBubbleAgent = chatBubbleAgent$3;
 exports.chatBubbleAgentBorder = chatBubbleAgentBorder$3;
 exports.chatBubbleUser = chatBubbleUser$3;
+exports.chatButton = chatButton$3;
+exports.chatButtonActive = chatButtonActive$3;
+exports.chatButtonHover = chatButtonHover$3;
+exports.chatButtonSelected = chatButtonSelected$3;
+exports.chatButtonTextHover = chatButtonTextHover$3;
+exports.chatButtonTextSelected = chatButtonTextSelected$3;
+exports.chatHeaderBackground = chatHeaderBackground$3;
 exports.chatPromptBackground = chatPromptBackground$3;
 exports.chatPromptBorderEnd = chatPromptBorderEnd$3;
 exports.chatPromptBorderStart = chatPromptBorderStart$3;
+exports.chatShellBackground = chatShellBackground$3;
 exports.field01 = field01$7;
 exports.field02 = field02$7;
 exports.field03 = field03$3;
@@ -5745,26 +5756,6 @@ exports.skeletonBackground = skeletonBackground$7;
 exports.skeletonElement = skeletonElement$7;
 exports.slugBackground = slugBackground$3;
 exports.slugBackgroundHover = slugBackgroundHover$3;
-exports.slugCalloutAuraEnd = slugCalloutAuraEnd$3;
-exports.slugCalloutAuraEndHover01 = slugCalloutAuraEndHover01$3;
-exports.slugCalloutAuraEndHover02 = slugCalloutAuraEndHover02$3;
-exports.slugCalloutAuraEndSelected = slugCalloutAuraEndSelected$3;
-exports.slugCalloutAuraStart = slugCalloutAuraStart$3;
-exports.slugCalloutAuraStartHover01 = slugCalloutAuraStartHover01$3;
-exports.slugCalloutAuraStartHover02 = slugCalloutAuraStartHover02$3;
-exports.slugCalloutAuraStartSelected = slugCalloutAuraStartSelected$3;
-exports.slugCalloutCaretBottom = slugCalloutCaretBottom$3;
-exports.slugCalloutCaretBottomBackground = slugCalloutCaretBottomBackground$3;
-exports.slugCalloutCaretBottomBackgroundActions = slugCalloutCaretBottomBackgroundActions$3;
-exports.slugCalloutCaretCenter = slugCalloutCaretCenter$3;
-exports.slugCalloutGradientBottom = slugCalloutGradientBottom$3;
-exports.slugCalloutGradientBottomHover = slugCalloutGradientBottomHover$3;
-exports.slugCalloutGradientBottomSelected = slugCalloutGradientBottomSelected$3;
-exports.slugCalloutGradientTop = slugCalloutGradientTop$3;
-exports.slugCalloutGradientTopHover = slugCalloutGradientTopHover$3;
-exports.slugCalloutGradientTopSelected = slugCalloutGradientTopSelected$3;
-exports.slugCalloutShadowOuter01 = slugCalloutShadowOuter01$3;
-exports.slugCalloutShadowOuter02 = slugCalloutShadowOuter02$3;
 exports.slugGradient = slugGradient$3;
 exports.slugGradientHover = slugGradientHover$3;
 exports.slugHollowHover = slugHollowHover$3;