impact-ui 5.0.0 → 5.0.1-beta.1

package/dist/components/Header/Header.types.d.ts

@@ -2,9 +2,10 @@ import { MouseEvent, ReactNode } from 'react';
 import { Locale } from '../../i18n/types';
 import { RootComponentProps } from '../../types';
 import { AvatarProps } from '../Avatar/Avatar.types';
+import { ProfileMenuItem } from '../ProfileMenu/ProfileMenu.types';
 
 /**
- * Drop menu option for the header avatar menu.
+ * @deprecated Avatar menu uses {@link ProfileMenu}. Prefer `onLogoutClick` and related profile handlers.
  */
 export interface HeaderDropMenuOption {
     label: string;
@@ -13,13 +14,21 @@ export interface HeaderDropMenuOption {
 }
 /**
  * Header component props.
- * Avatar props can be extended via avatarProps; dropMenuOptions drive the avatar dropdown menu.
+ * Avatar click opens {@link ProfileMenu} (themes, logout, etc.).
  */
 export interface HeaderProps extends RootComponentProps {
     /** Title shown next to the logo */
     title?: ReactNode;
-    /** User name shown in avatar and default menu option */
+    /** User name shown in avatar and profile menu */
     userName?: string;
+    /** Email shown in the profile menu */
+    userEmail?: string;
+    /** When false, avatar does not open the profile menu */
+    showProfileMenu?: boolean;
+    /** Called when Logout is chosen in the profile menu */
+    onLogoutClick?: () => void;
+    /** Extra profile menu rows (icon + label + handler), shown below Themes */
+    profileMenuItems?: ProfileMenuItem[];
     /** Called when the logo is clicked */
     handleLogoClick?: () => void;
     /** Show the notification icon */
@@ -44,8 +53,17 @@ export interface HeaderProps extends RootComponentProps {
     isMessageIconDisabled?: boolean;
     /** When true, show DND variant of notification icon */
     isNotificationDnd?: boolean;
-    /** Options for the avatar dropdown menu */
+    /**
+     * @deprecated Ignored — avatar opens ProfileMenu. Use `showProfileMenu={false}` to disable.
+     * Empty array still disables the menu for backward compatibility.
+     */
     dropMenuOptions?: HeaderDropMenuOption[];
+    /**
+     * Custom popup rendered when the user avatar is clicked.
+     * When provided, replaces {@link ProfileMenu} and legacy `dropMenuOptions` menu.
+     * Receives the avatar anchor element (`null` when closed). Open state and `onClose` are owned by the consumer.
+     */
+    userMenuPopup?: (anchorEl: HTMLElement | null) => ReactNode;
     /** When true, chatbot button is disabled */
     isChatBotDisabled?: boolean;
     /** Optional center section content */

package/dist/components/Header/Header.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Header.types.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,iCAAiC;IACjC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B,sCAAsC;IACtC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,+CAA+C;IAC/C,uBAAuB,CAAC,EAAE,MAAM,IAAI,CAAC;IAErC,yBAAyB;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAE7B,4BAA4B;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,0CAA0C;IAC1C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,yCAAyC;IACzC,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B,4CAA4C;IAC5C,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAEhC,+DAA+D;IAC/D,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,uDAAuD;IACvD,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,2CAA2C;IAC3C,eAAe,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAEzC,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAE5B,sCAAsC;IACtC,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B,iEAAiE;IACjE,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAEnC,0BAA0B;IAC1B,UAAU,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAEjC,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,2DAA2D;IAC3D,4BAA4B,CAAC,EAAE,MAAM,IAAI,CAAC;IAE1C,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEvC,kFAAkF;IAClF,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IAE9C,4FAA4F;IAC5F,aAAa,CAAC,EAAE,SAAS,CAAC;IAE1B,sDAAsD;IACtD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,oFAAoF;IACpF,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAE1B,4EAA4E;IAC5E,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C"}
+{"version":3,"file":"Header.types.d.ts","sourceRoot":"","sources":["../../../src/components/Header/Header.types.ts"],"names":[],"mappings":"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"}

package/dist/components/Header/index.d.ts

@@ -4,7 +4,7 @@ export type { HeaderProps, HeaderDropMenuOption } from './Header.types';
 /**
  * App header with logo, title, actions (help, message, notification, chatbot) and avatar menu.
  */
-export declare function Header({ title, userName, handleLogoClick, showNotificationIcon, notificationIndicator, handleNotificationClick, showHelpIcon, handleHelpClick, showMessageIcon, handleMessageClick, showChatBotIcon, handleChatBotClick, isMessageIconDisabled, isNotificationDnd, dropMenuOptions, isChatBotDisabled, centerComponent, avatarProps, avatarType, showKeyboardShortcuts, handleKeyboardShortcutsClick, commentProps, onCommentsClick, commentsPanel, className, id, 'data-testid': dataTestId, role, showLanguageIcon, enabledLocales, onLanguageChange, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, userName, handleLogoClick, showNotificationIcon, notificationIndicator, handleNotificationClick, showHelpIcon, handleHelpClick, showMessageIcon, handleMessageClick, showChatBotIcon, handleChatBotClick, isMessageIconDisabled, isNotificationDnd, dropMenuOptions, userEmail, showProfileMenu, onLogoutClick, profileMenuItems, userMenuPopup, isChatBotDisabled, centerComponent, avatarProps, avatarType, showKeyboardShortcuts, handleKeyboardShortcutsClick, commentProps, onCommentsClick, commentsPanel, className, id, 'data-testid': dataTestId, role, showLanguageIcon, enabledLocales, onLanguageChange, }: HeaderProps): import("react").JSX.Element;
 export declare namespace Header {
     var displayName: string;
 }

package/dist/components/Header/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,sBAAsB,CAAC;AAwB9B,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAExE;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,eAAe,EACf,oBAA2B,EAC3B,qBAA4B,EAC5B,uBAAuB,EACvB,YAAmB,EACnB,eAAe,EACf,eAAsB,EACtB,kBAAkB,EAClB,eAAsB,EACtB,kBAAkB,EAClB,qBAA6B,EAC7B,iBAAyB,EACzB,eAAoE,EACpE,iBAAyB,EACzB,eAAe,EACf,WAAW,EACX,UAA6B,EAC7B,qBAA6B,EAC7B,4BAA4B,EAC5B,YAAY,EACZ,eAAe,EACf,aAAa,EACb,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,EACzB,IAAe,EACf,gBAAwB,EACxB,cAAmC,EACnC,gBAAgB,GACjB,EAAE,WAAW,2CA2Sb;yBA3Ue,MAAM"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Header/index.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,sBAAsB,CAAC;AAc9B,YAAY,EAAE,WAAW,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAExE;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,eAAe,EACf,oBAA2B,EAC3B,qBAA4B,EAC5B,uBAAuB,EACvB,YAAmB,EACnB,eAAe,EACf,eAAsB,EACtB,kBAAkB,EAClB,eAAsB,EACtB,kBAAkB,EAClB,qBAA6B,EAC7B,iBAAyB,EACzB,eAAe,EACf,SAAS,EACT,eAAsB,EACtB,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,iBAAyB,EACzB,eAAe,EACf,WAAW,EACX,UAA6B,EAC7B,qBAA6B,EAC7B,4BAA4B,EAC5B,YAAY,EACZ,eAAe,EACf,aAAa,EACb,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,EACzB,IAAe,EACf,gBAAwB,EACxB,cAAmC,EACnC,gBAAgB,GACjB,EAAE,WAAW,+BAmWb;yBAxYe,MAAM"}

package/dist/components/Header/index.js

@@ -1,24 +1,17 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.impact-header-container{align-items:center;background-color:#fff;box-shadow:0 0 16px 2px #0000000f;display:flex;height:56px;justify-content:space-between;left:64px;min-width:700px;padding:0 24px;position:fixed;top:0;width:calc(100% - 64px);z-index:1199}.impact-header-container-left-side{align-items:center;display:flex;flex-direction:row;gap:14px;justify-content:flex-start}.impact-header-logo{height:36px;width:91px}.impact-header-logo:hover{cursor:pointer}.impact-header-separator{background-color:#d9dde7;display:block;height:24px;width:1px}.impact-header-title{color:#1f2b4d;font-size:16px;font-weight:800;line-height:24px}.impact-header-container-right-side{align-items:center;display:flex;flex-direction:row;gap:24px;justify-content:flex-start}.impact-header-avatar:hover,.impact-header-comments-button:hover,.impact-header-help-container:hover,.impact-header-language-button:hover,.impact-header-message-container:hover,.impact-header-notification-container:hover{cursor:pointer}.impact-header-language-button,.impact-header-language-container{align-items:center;display:flex}.impact-header-language-button{gap:4px;height:20px;justify-content:center}.impact-header-language-icon-placeholder{border:1.5px solid #1f2b4d;border-radius:50%;display:inline-block;height:20px;width:20px}.impact-header-language-flag-placeholder{background-color:#f5f6fa;border:1px solid #d9dde7;border-radius:2px;display:inline-block;height:14px;width:20px}.impact-header-comments-container{align-items:center;display:flex;position:relative}.impact-header-comments-button{align-items:center;border-radius:4px;display:flex;justify-content:center;padding:4px}.header-comments-dropdown{background-color:#fff;border-radius:8px;box-shadow:0 4px 16px #00000029;overflow:hidden;position:absolute;right:0;top:calc(100% + 8px);z-index:10000}.header-comments-dropdown .comment-panel-main-container{max-height:500px;position:relative}.header-comments-dropdown .comment-panel-main-container.display-comment-panel{bottom:unset;max-height:500px;min-height:400px}.header-comments-dropdown .comment-panel-main-container .comment-panel-body{flex:1;overflow:auto;position:relative;top:auto}.header-comments-dropdown .comment-panel-main-container .impact_emptystate{border:none;border-radius:0;margin:0;min-height:auto;padding:20px;width:auto}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_center_svg_with_icon{min-height:0}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_center_svg{height:auto}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_heading{font-size:14px;line-height:21px;margin-bottom:0}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_paragraph{color:#7a8294;font-size:10px;font-weight:500;line-height:14px;margin-top:0;width:285px}.header-comments-dropdown .comment-panel-main-container .comment-panel-content{bottom:auto;max-height:380px;position:relative;top:auto}.impact-header-bot-container{align-items:center;background-color:#0f1937;background:linear-gradient(-45deg,#2ac2aa,#6666ef,#f26922,#8863c0,#0f1937);background-size:400% 400%;border-radius:8px;cursor:pointer;display:flex;height:34px;padding-inline:11px;position:relative}.impact-header-bot-container:after{background:url(https://impact-kit.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/smartBot.svg) no-repeat;background-position:50%;background-size:16px;content:"";height:16px;position:absolute;width:16px}.impact-header-bot-container:before{background:linear-gradient(167deg,#2ac2ee,#6962ef,#f26921);border-radius:9px;bottom:-1px;content:"";left:-1px;position:absolute;right:-1px;top:-1px;z-index:-1}.impact-header-bot-container:hover:not(.impact-header-bot-container-disabled){animation:gradient 2s ease infinite;background:linear-gradient(-45deg,#2ac2ee,#6962ef,#f26921);background-size:400% 400%}.impact-header-bot-container:hover:not(.impact-header-bot-container-disabled):before{background:none}.impact-header-bot-container{animation:gradient 5s ease infinite}.impact-header-bot-container .impact-header-bot-container-text{color:#fff;font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:20px;padding-left:23px}@keyframes gradient{0%{background-position:0 20% 40% 60% 80%}50%{background-position:80% 50%}to{background-position:0 20% 40% 60% 80%}}.impact-header-bot-container-disabled{animation:none;background-color:#d9dde7;background-image:url(https://impact-kit.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/smartBot.svg),none;background-position:10px 50%;background-repeat:no-repeat;background-size:20px 20px;cursor:not-allowed}.impact-header-bot-container-disabled:before{background:none}.impact-header-notification-container{position:relative}.impact-header-notification-dnd-container{height:16px;left:14px;position:absolute;top:-5px;width:16px}.impact-header-notification-indicator-container{height:8px;left:14px;position:absolute;top:0;width:8px}.impact-header-notification-indicator-outer-circle{animation:waves 1.5s ease-out infinite;background-color:#fceeee;border-radius:50%;height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.impact-header-notification-indicator-inner-circle{background-color:#c64746;border-radius:50%;height:8px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:8px}.impact-header-avatar .ia-avatar{background-color:#31935f!important;border-radius:8px;color:#fff;line-height:30px}.impact-header-lang-label{color:#60697d;font-size:14px;font-weight:600}@keyframes waves{0%{height:8px;width:8px}to{height:16px;width:16px}}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.impact-header-container{align-items:center;background-color:var(--iu-bg-surface-layer-bg);box-shadow:var(--iu-effect-shadow-header-bar-elevation);display:flex;height:56px;justify-content:space-between;left:64px;min-width:700px;overflow:hidden;padding:0 24px;position:fixed;top:0;width:calc(100% - 64px);z-index:1199}.impact-header-container-left-side,.impact-header-container-right-side{position:relative;z-index:1}.impact-header-container-left-side{align-items:center;display:flex;flex-direction:row;gap:14px;justify-content:flex-start}.impact-header-logo{flex:none;height:36px;width:91px}.impact-header-logo:hover{cursor:pointer}.iu-header-halloween-pumpkin{background-image:var(--iu-style-halloween-header-pumpkin);height:32px;width:29px}.iu-header-halloween-flying-bat,.iu-header-halloween-pumpkin{background-position:50%;background-repeat:no-repeat;background-size:contain}.iu-header-halloween-flying-bat{background-image:var(--iu-style-halloween-header-flying-bat);height:31px;width:77px}.iu-header-halloween-web{background-image:var(--iu-style-halloween-header-web);background-position:50%;background-position:top;background-repeat:no-repeat;background-size:contain;display:none;height:215px;left:68%;overflow:hidden;pointer-events:none;position:absolute;top:0;transform:translate(-50%,-50%);width:224px;z-index:0}[data-iu-interface-style=halloween] .impact-header-container .iu-header-halloween-web{display:block}.impact-header-logo-mark{background-image:var(--iu-header-logo-src);background-position:50%;background-repeat:no-repeat;background-size:contain;display:block;height:100%;width:100%}.impact-header-separator{background-color:var(--iu-border-disabled);display:block;height:24px;width:1px}.impact-header-title{color:var(--iu-on-surface-body);font-size:16px;font-weight:800;line-height:24px}.impact-header-container-right-side{align-items:center;align-self:stretch;display:flex;flex-direction:row;gap:24px;justify-content:flex-start}.impact-header-avatar:hover,.impact-header-comments-button:hover,.impact-header-help-container:hover,.impact-header-language-button:hover,.impact-header-message-container:hover,.impact-header-notification-container:hover{cursor:pointer}.impact-header-language-button,.impact-header-language-container{align-items:center;display:flex}.impact-header-language-button{gap:4px;height:20px;justify-content:center}.impact-header-language-icon-placeholder{border:1.5px solid var(--iu-on-surface-body);border-radius:50%;display:inline-block;height:20px;width:20px}.impact-header-language-flag-placeholder{background-color:var(--iu-bg-surface-lighter);border:1px solid var(--iu-border-disabled);border-radius:2px;display:inline-block;height:14px;width:20px}.impact-header-comments-container{align-items:center;display:flex;position:relative}.impact-header-comments-button{align-items:center;border-radius:4px;display:flex;justify-content:center;padding:4px}.header-comments-dropdown{background-color:var(--iu-bg-surface-layer-bg);border-radius:8px;box-shadow:var(--iu-effect-shadow-header-dropdown-elevated);overflow:hidden;position:absolute;right:0;top:calc(100% + 8px);z-index:10000}.header-comments-dropdown .comment-panel-main-container{max-height:500px;position:relative}.header-comments-dropdown .comment-panel-main-container.display-comment-panel{bottom:unset;max-height:500px;min-height:400px}.header-comments-dropdown .comment-panel-main-container .comment-panel-body{flex:1;overflow:auto;position:relative;top:auto}.header-comments-dropdown .comment-panel-main-container .impact_emptystate{border:none;border-radius:0;margin:0;min-height:auto;padding:20px;width:auto}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_center_svg_with_icon{min-height:0}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_center_svg{height:auto}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_heading{font-size:14px;line-height:21px;margin-bottom:0}.header-comments-dropdown .comment-panel-main-container .impact_emptystate .impact_paragraph{color:var(--iu-on-surface-caption);font-size:10px;font-weight:500;line-height:14px;margin-top:0;width:285px}.header-comments-dropdown .comment-panel-main-container .comment-panel-content{bottom:auto;max-height:380px;position:relative;top:auto}.impact-header-bot-container{align-items:center;background-color:var(--iu-legacy-chatbot-bg);background:var(--iu-effect-gradient-header-smart-bot-main);background-size:400% 400%;border-radius:8px;cursor:pointer;display:flex;height:34px;padding-inline:11px;position:relative}.impact-header-bot-container:after{background:url(https://impact-kit.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/smartBot.svg) no-repeat;background-position:50%;background-size:16px;content:"";height:16px;position:absolute;width:16px}.impact-header-bot-container:before{background:var(--iu-effect-gradient-header-smart-bot-border);border-radius:9px;bottom:-1px;content:"";left:-1px;position:absolute;right:-1px;top:-1px;z-index:-1}.impact-header-bot-container:hover:not(.impact-header-bot-container-disabled){animation:gradient 2s ease infinite;background:var(--iu-effect-gradient-header-smart-bot-hover);background-size:400% 400%}.impact-header-bot-container:hover:not(.impact-header-bot-container-disabled):before{background:none}.impact-header-bot-container{animation:gradient 5s ease infinite}.impact-header-bot-container .impact-header-bot-container-text{color:var(--iu-on-primary-text);font-family:Manrope,sans-serif;font-size:14px;font-weight:500;line-height:20px;padding-left:23px}@keyframes gradient{0%{background-position:0 20% 40% 60% 80%}50%{background-position:80% 50%}to{background-position:0 20% 40% 60% 80%}}.impact-header-bot-container-disabled{animation:none;background-color:var(--iu-border-disabled);background-image:url(https://impact-kit.iaproducts.ai/api/v1/files/uploads/impact-ui/prod/icons/smartBot.svg),none;background-position:10px 50%;background-repeat:no-repeat;background-size:20px 20px;cursor:not-allowed}.impact-header-bot-container-disabled:before{background:none}.impact-header-notification-container{position:relative}.impact-header-notification-dnd-container{height:16px;left:14px;position:absolute;top:-5px;width:16px}.impact-header-notification-indicator-container{height:8px;left:14px;position:absolute;top:0;width:8px}.impact-header-notification-indicator-outer-circle{animation:waves 1.5s ease-out infinite;background-color:var(--iu-bg-error-subtle);border-radius:50%;height:10px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:10px}.impact-header-notification-indicator-inner-circle{background-color:var(--iu-badge-error-on-default);border-radius:50%;height:8px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:8px}.impact-header-avatar .ia-avatar{background-color:var(--iu-primitive-color-green-500)!important;border-radius:8px;color:var(--iu-on-primary-text);line-height:30px}.impact-header-lang-label{color:var(--iu-on-surface-label);font-size:14px;font-weight:600}@keyframes waves{0%{height:8px;width:8px}to{height:16px;width:16px}}')),document.head.appendChild(e)}}catch(a){console.error("vite-plugin-css-injected-by-js",a)}}();
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState, useMemo, useRef, useEffect } from "react";
-import { getAssetUrl } from "../../utils/assetBase.js";
+import { useRef, useState, useMemo, useEffect } from "react";
+import { KeyboardShortcutIcon as KeyboardShortcutIcon_default, HelpIcon as HelpIcon_default, Globe as Globe_default, MessageIconDisabled as MessageIconDisabled_default, MessageIcon as MessageIcon_default, NotificationDnd as NotificationDnd_default, Bell as Bell_default, CommentGray as CommentGray_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
 import { Avatar } from "../Avatar/index.js";
 import CommentsPanel from "../CommentsPanel/index.js";
 import { CommentsProvider } from "../CommentsPanel/CommentsContext.js";
+import { ImpactIcon, impactIconSource } from "../ImpactIcon/index.js";
 import { Menu } from "../Menu/index.js";
+import { ProfileMenu } from "../ProfileMenu/index.js";
 
 import { useTranslation } from "../../i18n/useTranslation.js";
 import { useI18n } from "../../i18n/useI18n.js";
 import { LOCALE_REGISTRY } from "../../locales/index.js";
-const ImpactLogoHD2 = getAssetUrl("icons/IA_Logo.svg");
-const NotificationIcon = getAssetUrl("icons/bell.svg");
-const HelpIcon = getAssetUrl("icons/help-icon.svg");
-const KeyboardShortcutsIcon = getAssetUrl("icons/keyboardShortuctIcon.svg");
-const MessageIconDisabled = getAssetUrl("icons/message-icon-disabled.svg");
-const MessageIcon = getAssetUrl("icons/message-icon.svg");
-const NotificationDNDIcon = getAssetUrl("icons/notification-dnd.svg");
-const CommentIconHeaderSvg = getAssetUrl("icons/comment-gray.svg");
-const GlobalIcon = getAssetUrl("icons/Globe.svg");
 const FLAG_WIDTH = 24;
 const FLAG_HEIGHT = 20;
 const renderLanguageFlag = (icon) => {
@@ -42,8 +35,12 @@ function Header({
   handleChatBotClick,
   isMessageIconDisabled = false,
   isNotificationDnd = false,
-  dropMenuOptions = [{ label: userName ?? "User", onClick: () => {
-  } }],
+  dropMenuOptions,
+  userEmail,
+  showProfileMenu = true,
+  onLogoutClick,
+  profileMenuItems,
+  userMenuPopup,
   isChatBotDisabled = false,
   centerComponent,
   avatarProps,
@@ -64,8 +61,37 @@ function Header({
   var _a;
   const { t } = useTranslation();
   const { locale, setLocale } = useI18n();
-  const [anchorEl, setAnchorEl] = useState(null);
-  const open = Boolean(anchorEl);
+  const avatarRef = useRef(null);
+  const [avatarAnchorEl, setAvatarAnchorEl] = useState(null);
+  const [avatarMenuOpen, setAvatarMenuOpen] = useState(false);
+  const profileMenuEnabled = !userMenuPopup && showProfileMenu && (dropMenuOptions === void 0 || dropMenuOptions.length > 0);
+  const legacyDropMenuEnabled = !userMenuPopup && !showProfileMenu && Boolean(dropMenuOptions && dropMenuOptions.length > 0);
+  const avatarMenuEnabled = Boolean(userMenuPopup || profileMenuEnabled || legacyDropMenuEnabled);
+  const openAvatarMenu = (target) => {
+    setAvatarAnchorEl(target);
+    setAvatarMenuOpen(true);
+  };
+  const closeAvatarMenu = () => {
+    setAvatarMenuOpen(false);
+    setAvatarAnchorEl(null);
+  };
+  const toggleAvatarMenu = (target) => {
+    if (avatarMenuOpen) {
+      closeAvatarMenu();
+    } else {
+      openAvatarMenu(target);
+    }
+  };
+  const handleAvatarActivate = (target) => {
+    if (!avatarMenuEnabled) {
+      return;
+    }
+    if (userMenuPopup || profileMenuEnabled) {
+      toggleAvatarMenu(target);
+      return;
+    }
+    openAvatarMenu(target);
+  };
   const [languageAnchorEl, setLanguageAnchorEl] = useState(null);
   const languageMenuOpen = Boolean(languageAnchorEl);
   const resolvedLanguageOptions = useMemo(() => {
@@ -120,19 +146,22 @@ function Header({
           /* @__PURE__ */ jsx(
             "div",
             {
-              "aria-label": t("header.logo"),
+              "aria-label": t("header.logoAlt"),
               className: "impact-header-logo",
               role: "button",
               tabIndex: 0,
               onClick: handleLogoClick,
               onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && (handleLogoClick == null ? void 0 : handleLogoClick()),
-              children: /* @__PURE__ */ jsx("img", { alt: t("header.logoAlt"), height: "100%", src: ImpactLogoHD2, width: "100%" })
+              children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "impact-header-logo-mark" })
             }
           ),
           /* @__PURE__ */ jsx("div", { className: "impact-header-separator" }),
-          /* @__PURE__ */ jsx("div", { className: "impact-header-title", children: title })
+          /* @__PURE__ */ jsx("div", { className: "impact-header-title", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "iu-header-halloween-pumpkin" }),
+          /* @__PURE__ */ jsx("div", { className: "iu-header-halloween-flying-bat" })
         ] }),
         centerComponent,
+        /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "iu-header-halloween-web" }),
         /* @__PURE__ */ jsxs("div", { className: "impact-header-container-right-side", children: [
           showKeyboardShortcuts && /* @__PURE__ */ jsx(
             "div",
@@ -149,7 +178,7 @@ function Header({
                   handleKeyboardShortcutsClick == null ? void 0 : handleKeyboardShortcutsClick();
                 }
               },
-              children: /* @__PURE__ */ jsx("img", { alt: "", height: "100%", src: KeyboardShortcutsIcon, width: "100%" })
+              children: /* @__PURE__ */ jsx(ImpactIcon, { icon: impactIconSource(KeyboardShortcutIcon_default), size: 24 })
             }
           ),
           showHelpIcon && /* @__PURE__ */ jsx(
@@ -161,7 +190,7 @@ function Header({
               tabIndex: 0,
               onClick: handleHelpClick,
               onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && (handleHelpClick == null ? void 0 : handleHelpClick()),
-              children: /* @__PURE__ */ jsx("img", { alt: "", height: "100%", src: HelpIcon, width: "100%" })
+              children: /* @__PURE__ */ jsx(ImpactIcon, { icon: impactIconSource(HelpIcon_default), size: 24 })
             }
           ),
           showLanguageIcon ? /* @__PURE__ */ jsxs("div", { className: "impact-header-language-container", children: [
@@ -182,7 +211,7 @@ function Header({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx("img", { alt: t("header.languageAlt"), height: "24px", src: GlobalIcon, width: "24px" }),
+                  /* @__PURE__ */ jsx(ImpactIcon, { icon: impactIconSource(Globe_default), size: 24 }),
                   /* @__PURE__ */ jsx("span", { className: "impact-header-lang-label", children: (_a = LOCALE_REGISTRY[locale]) == null ? void 0 : _a.iconLabel })
                 ]
               }
@@ -216,7 +245,7 @@ function Header({
               className: "impact-header-message-container",
               role: "button",
               tabIndex: 0,
-              children: /* @__PURE__ */ jsx("img", { alt: "", height: "100%", src: MessageIconDisabled, width: "100%" })
+              children: /* @__PURE__ */ jsx(ImpactIcon, { icon: impactIconSource(MessageIconDisabled_default), size: 24 })
             }
           ),
           !isMessageIconDisabled && showMessageIcon && /* @__PURE__ */ jsx(
@@ -228,7 +257,7 @@ function Header({
               tabIndex: 0,
               onClick: handleMessageClick,
               onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && (handleMessageClick == null ? void 0 : handleMessageClick()),
-              children: /* @__PURE__ */ jsx("img", { alt: "", height: "100%", src: MessageIcon, width: "100%" })
+              children: /* @__PURE__ */ jsx(ImpactIcon, { icon: impactIconSource(MessageIcon_default), size: 24 })
             }
           ),
           isNotificationDnd && showNotificationIcon && /* @__PURE__ */ jsx(
@@ -240,7 +269,7 @@ function Header({
               tabIndex: 0,
               onClick: handleNotificationClick,
               onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && (handleNotificationClick == null ? void 0 : handleNotificationClick()),
-              children: /* @__PURE__ */ jsx("img", { alt: "", height: "100%", src: NotificationDNDIcon, width: "100%" })
+              children: /* @__PURE__ */ jsx(ImpactIcon, { icon: impactIconSource(NotificationDnd_default), size: 24 })
             }
           ),
           !isNotificationDnd && showNotificationIcon && /* @__PURE__ */ jsxs(
@@ -253,7 +282,7 @@ function Header({
               onClick: handleNotificationClick,
               onKeyDown: (e) => (e.key === "Enter" || e.key === " ") && (handleNotificationClick == null ? void 0 : handleNotificationClick()),
               children: [
-                /* @__PURE__ */ jsx("img", { alt: "", height: "100%", src: NotificationIcon, width: "100%" }),
+                /* @__PURE__ */ jsx(ImpactIcon, { icon: impactIconSource(Bell_default), size: 24 }),
                 notificationIndicator && /* @__PURE__ */ jsxs("div", { className: "impact-header-notification-indicator-container", children: [
                   /* @__PURE__ */ jsx("div", { className: "impact-header-notification-indicator-outer-circle" }),
                   /* @__PURE__ */ jsx("div", { className: "impact-header-notification-indicator-inner-circle" })
@@ -277,18 +306,10 @@ function Header({
                     handleCommentsButtonClick(e);
                   }
                 },
-                children: /* @__PURE__ */ jsx(
-                  "img",
-                  {
-                    alt: t("header.commentsAlt"),
-                    height: "24",
-                    src: CommentIconHeaderSvg,
-                    width: "24"
-                  }
-                )
+                children: /* @__PURE__ */ jsx(ImpactIcon, { icon: impactIconSource(CommentGray_default), size: 24 })
               }
             ),
-            commentsPanelOpen && /* @__PURE__ */ jsx("div", { ref: commentsPanelRef, className: "header-comments-dropdown", children: commentsPanel ?? /* @__PURE__ */ jsx(CommentsProvider, { commentProps: { ...commentProps, defaultShowPanel: true }, children: /* @__PURE__ */ jsx(
+            commentsPanelOpen && commentsPanel && /* @__PURE__ */ jsx("div", { ref: commentsPanelRef, className: "header-comments-dropdown", children: /* @__PURE__ */ jsx(CommentsProvider, { commentProps: { ...commentProps, defaultShowPanel: true }, children: /* @__PURE__ */ jsx(
               CommentsPanel,
               {
                 visibleSortOptions: ["opt1", "opt3", "opt4"],
@@ -314,32 +335,52 @@ function Header({
           /* @__PURE__ */ jsx(
             "div",
             {
-              "aria-expanded": open,
-              "aria-haspopup": "menu",
+              ref: avatarRef,
+              "aria-expanded": avatarMenuOpen,
+              "aria-haspopup": userMenuPopup || legacyDropMenuEnabled ? "menu" : "dialog",
               "aria-label": t("header.userMenu"),
               className: "impact-header-avatar",
               role: "button",
               tabIndex: 0,
               onClick: (event) => {
-                setAnchorEl(event.currentTarget);
+                const target = avatarRef.current ?? event.currentTarget;
+                handleAvatarActivate(target);
               },
               onKeyDown: (e) => {
-                (e.key === "Enter" || e.key === " ") && setAnchorEl(e.currentTarget);
+                if (e.key !== "Enter" && e.key !== " ") {
+                  return;
+                }
+                if (!avatarMenuEnabled) {
+                  return;
+                }
+                e.preventDefault();
+                const target = avatarRef.current ?? e.currentTarget;
+                handleAvatarActivate(target);
               },
               children: /* @__PURE__ */ jsx(Avatar, { label: userName, size: "small", type: avatarType, ...avatarProps })
             }
           ),
-          dropMenuOptions && dropMenuOptions.length > 0 && /* @__PURE__ */ jsx(
+          userMenuPopup ? userMenuPopup(avatarMenuOpen ? avatarAnchorEl : null) : profileMenuEnabled ? /* @__PURE__ */ jsx(
+            ProfileMenu,
+            {
+              anchorEl: avatarAnchorEl,
+              avatarProps: { ...avatarProps, type: (avatarProps == null ? void 0 : avatarProps.type) ?? avatarType },
+              menuItems: profileMenuItems,
+              open: avatarMenuOpen,
+              userEmail,
+              userName: userName ?? "User",
+              onClose: closeAvatarMenu,
+              onLogoutClick
+            }
+          ) : legacyDropMenuEnabled ? /* @__PURE__ */ jsx(
             Menu,
             {
-              anchorEl,
-              open,
-              options: dropMenuOptions,
-              onClose: () => {
-                setAnchorEl(null);
-              }
+              anchorEl: avatarAnchorEl,
+              open: avatarMenuOpen,
+              options: dropMenuOptions ?? [],
+              onClose: closeAvatarMenu
             }
-          )
+          ) : null
         ] })
       ]
     }

package/dist/components/HomePage/HomePage.types.d.ts

@@ -18,12 +18,13 @@ export interface ConfigurationMenuItem {
     label: string;
     desc: string;
 }
+/** Themed card chrome for agentic use case tiles (maps to SCSS `--*` / modifier classes). */
+export type AgenticUsecaseColorVariant = 'warm' | 'sky' | 'accent' | 'success' | 'slate';
 /** Agentic use case (for constants / panel content) */
 export interface AgenticUsecaseItem {
     name: string;
     description: string;
-    background: string;
-    borderColor: string;
+    colorVariant: AgenticUsecaseColorVariant;
     backgroundImage: string;
     image: string;
 }

package/dist/components/HomePage/HomePage.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HomePage.types.d.ts","sourceRoot":"","sources":["../../../src/components/HomePage/HomePage.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,+BAA+B;AAC/B,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,0EAA0E;AAC1E,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC;AAEtC,yDAAyD;AACzD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,uDAAuD;AACvD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAwB;AACxB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,4CAA4C;IAC5C,uBAAuB,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAClD,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,sEAAsE;IACtE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,kBAAkB,KAAK,IAAI,CAAC;IACnE,mDAAmD;IACnD,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,sDAAsD;IACtD,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC9D,4DAA4D;IAC5D,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,gDAAgD;IAChD,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC"}
+{"version":3,"file":"HomePage.types.d.ts","sourceRoot":"","sources":["../../../src/components/HomePage/HomePage.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,+BAA+B;AAC/B,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,0EAA0E;AAC1E,MAAM,MAAM,WAAW,GAAG,WAAW,CAAC;AAEtC,yDAAyD;AACzD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd;AAED,6FAA6F;AAC7F,MAAM,MAAM,0BAA0B,GAAG,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAEzF,uDAAuD;AACvD,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,0BAA0B,CAAC;IACzC,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAwB;AACxB,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,iCAAiC;IACjC,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,8BAA8B;IAC9B,YAAY,CAAC,EAAE,WAAW,EAAE,CAAC;IAC7B,4CAA4C;IAC5C,uBAAuB,CAAC,EAAE,qBAAqB,EAAE,CAAC;IAClD,kCAAkC;IAClC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACvC,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC5C,sEAAsE;IACtE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,kBAAkB,KAAK,IAAI,CAAC;IACnE,mDAAmD;IACnD,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,sDAAsD;IACtD,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAC9D,4DAA4D;IAC5D,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,gDAAgD;IAChD,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC"}

package/dist/components/HomePage/constants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/HomePage/constants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAiH3E,eAAO,MAAM,eAAe,EAAE,MAAM,EAOnC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAOxC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,kBAAkB,EAiKhD,CAAC;AAEF,eAAO,MAAM,YAAY,kBAAqB,CAAC;AAE/C,eAAO,MAAM,UAAU,GAAI,YAAY,MAAM,KAAG,cAAc,GAAG,IAuBhE,CAAC"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/HomePage/constants.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAgH3E,eAAO,MAAM,eAAe,EAAE,MAAM,EAOnC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,EAOxC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,kBAAkB,EA6IhD,CAAC;AAEF,eAAO,MAAM,YAAY,kBAAqB,CAAC;AAE/C,eAAO,MAAM,UAAU,GAAI,YAAY,MAAM,KAAG,cAAc,GAAG,IAuBhE,CAAC"}

package/dist/components/HomePage/constants.js

@@ -6,7 +6,6 @@ const StarIcon1 = getAssetUrl("landingPageAssets/agenticIcons/starIcon1.svg");
 const StarIcon2 = getAssetUrl("landingPageAssets/agenticIcons/starIcon2.svg");
 const StarIcon3 = getAssetUrl("landingPageAssets/agenticIcons/starIcon3.svg");
 const StarIcon4 = getAssetUrl("landingPageAssets/agenticIcons/starIcon4.svg");
-const StarIcon5 = getAssetUrl("landingPageAssets/agenticIcons/starIcon5.svg");
 const logoAAA = getAssetUrl("clientLogos/aaa.webp");
 const logoAlFuttaim = getAssetUrl("clientLogos/al-futtaim.webp");
 const logoArhaus = getAssetUrl("clientLogos/arhaus.webp");
@@ -128,161 +127,141 @@ const AGENTIC_USECASES = [
   {
     name: "Tariff Mitigation Analytics",
     description: "Analyze tariff impacts and identify mitigation strategies.",
-    background: "#FFF9F5",
-    borderColor: "#FFBE9A",
+    colorVariant: "warm",
     backgroundImage: StarIcon1,
     image: Image1
   },
   {
     name: "Store & Product Clustering Agent",
     description: "Group similar stores and products by relevant attributes.",
-    background: "#F1FCFF",
-    borderColor: "#2BBFEE",
+    colorVariant: "sky",
     backgroundImage: StarIcon2,
     image: Image2
   },
   {
     name: "KVI and KVC Recommendation",
     description: "Automatically identify Key Value Items and Key Value Categories.",
-    background: "#F9F9FF",
-    borderColor: "#6962EF",
+    colorVariant: "accent",
     backgroundImage: StarIcon4,
     image: Image3
   },
   {
     name: "Localized Size Curve Optimization",
     description: "Automatically optimize size distributions by location.",
-    background: "#069A760D",
-    borderColor: "#069A76",
-    backgroundImage: StarIcon5,
+    colorVariant: "success",
+    backgroundImage: StarIcon1,
     image: Image6
   },
   {
     name: "Dynamic Pricing Agent",
     description: "Continuously adjust prices based on demand, seasonality, and competition.",
-    background: "#F2F6FF",
-    borderColor: "#607CBA",
+    colorVariant: "slate",
     backgroundImage: StarIcon3,
     image: CarouselImage4
   },
   {
     name: "Promotion Optimizer Agent",
     description: "Optimize promo mix, depth, and timing for maximum ROI.",
-    background: "#F9F9FF",
-    borderColor: "#6962EF",
+    colorVariant: "accent",
     backgroundImage: StarIcon4,
     image: CarouselImage5
   },
   {
     name: "Ad-Spend Allocator Agent",
     description: "Allocate budget across channels and audiences to hit goals.",
-    background: "#F1FCFF",
-    borderColor: "#2BBFEE",
+    colorVariant: "sky",
     backgroundImage: StarIcon2,
     image: Image21
   },
   {
     name: "Trend Radar Agent",
     description: "Detect emerging trends from search, social, and sales data.",
-    background: "#FFF9F5",
-    borderColor: "#FFBE9A",
+    colorVariant: "warm",
     backgroundImage: StarIcon1,
     image: Image15
   },
   {
     name: "Audience Micro-Segmentation Agent",
     description: "Discover granular customer cohorts for targeted activation.",
-    background: "#F1FCFF",
-    borderColor: "#2BBFEE",
+    colorVariant: "sky",
     backgroundImage: StarIcon2,
     image: Image22
   },
   {
     name: "Campaign Creative Generator Agent",
     description: "Generate on-brand concepts, copy, and variants at scale.",
-    background: "#F2F6FF",
-    borderColor: "#607CBA",
+    colorVariant: "slate",
     backgroundImage: StarIcon3,
     image: CarouselImage3
   },
   {
     name: "Email & SMS Personalizer Agent",
     description: "Personalize messages using customer behavior and context.",
-    background: "#F9F9FF",
-    borderColor: "#6962EF",
+    colorVariant: "accent",
     backgroundImage: StarIcon4,
     image: Image23
   },
   {
     name: "Influencer Matchmaker Agent",
     description: "Find creators with the best audience fit and predicted lift.",
-    background: "#069A760D",
-    borderColor: "#069A76",
-    backgroundImage: StarIcon5,
+    colorVariant: "success",
+    backgroundImage: StarIcon1,
     image: Image11
   },
   {
     name: "Marketing-Mix Modeling Agent",
     description: "Measure channel contribution and optimize spend allocation.",
-    background: "#F1FCFF",
-    borderColor: "#2BBFEE",
+    colorVariant: "sky",
     backgroundImage: StarIcon2,
     image: Image18
   },
   {
     name: "Cross-Channel Attribution Agent",
     description: "Attribute impact across journeys beyond last-click bias.",
-    background: "#F2F6FF",
-    borderColor: "#607CBA",
+    colorVariant: "slate",
     backgroundImage: StarIcon3,
     image: Image14
   },
   {
     name: "SEO Content Optimizer Agent",
     description: "Create search-optimized content tailored to user intent.",
-    background: "#FFF9F5",
-    borderColor: "#FFBE9A",
+    colorVariant: "warm",
     backgroundImage: StarIcon1,
     image: Image24
   },
   {
     name: "Product Description Generator",
     description: "Generate product descriptions for each item using guidelines.",
-    background: "#F2F6FF",
-    borderColor: "#607CBA",
+    colorVariant: "slate",
     backgroundImage: StarIcon3,
     image: Image4
   },
   {
     name: "Agent Assist",
     description: "Enable customer support representatives to access accurate answers.",
-    background: "#F9F9FF",
-    borderColor: "#6962EF",
+    colorVariant: "accent",
     backgroundImage: StarIcon4,
     image: Image8
   },
   {
     name: "Product FAQ Generator",
     description: "Generate product descriptions using guidelines.",
-    background: "#F2F6FF",
-    borderColor: "#607CBA",
+    colorVariant: "slate",
     backgroundImage: StarIcon3,
     image: Image12
   },
   {
     name: "Personalized Product Recommendation",
     description: "Serve tailored recommendations across channels in real time.",
-    background: "#F1FCFF",
-    borderColor: "#2BBFEE",
+    colorVariant: "sky",
     backgroundImage: StarIcon2,
     image: Image5
   },
   {
     name: "Cart-Recovery Nudge Agent",
     description: "Recover abandoned carts with contextual, timed nudges.",
-    background: "#069A760D",
-    borderColor: "#069A76",
-    backgroundImage: StarIcon5,
+    colorVariant: "success",
+    backgroundImage: StarIcon1,
     image: CarouselImage6
   }
 ];

package/dist/components/HomePage/index.d.ts

@@ -2,7 +2,7 @@ import { HomePageProps } from './HomePage.types';
 
 export type { HomePageProps } from './HomePage.types';
 export type { ToolKitItem, SmartAiItem, ConfigurationMenuItem } from './HomePage.types';
-export declare function HomePage({ clientName, userName, toolKitItems, smartAiItems, configurationsMenuItems, activeToolKitItem: currentActiveToolKitItem, activeSmartAiItem: currentActiveSmartAiItem, onLaunchClick, onBookDemoClick, onViewReleasedNotesClick, onConfigurationsClick, onKnowMoreClick, showConfigurationsButton, 'data-testid': dataTestId, }: HomePageProps): import("react/jsx-runtime").JSX.Element;
+export declare function HomePage({ clientName, userName, toolKitItems, smartAiItems, configurationsMenuItems, activeToolKitItem: currentActiveToolKitItem, activeSmartAiItem: currentActiveSmartAiItem, onLaunchClick, onBookDemoClick, onViewReleasedNotesClick, onConfigurationsClick, onKnowMoreClick, showConfigurationsButton, 'data-testid': dataTestId, }: HomePageProps): import("react").JSX.Element;
 export declare namespace HomePage {
     var displayName: string;
 }

package/dist/components/HomePage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HomePage/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAgD,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,wBAAwB,CAAC;AAEhC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAgBxF,wBAAgB,QAAQ,CAAC,EACvB,UAAe,EACf,QAAa,EACb,YAAiB,EACjB,YAAiB,EACjB,uBAA4B,EAC5B,iBAAiB,EAAE,wBAA+B,EAClD,iBAAiB,EAAE,wBAA+B,EAClD,aAAoB,EACpB,eAAsB,EACtB,wBAA+B,EAC/B,qBAA4B,EAC5B,eAAsB,EACtB,wBAA+B,EAC/B,aAAa,EAAE,UAAU,GAC1B,EAAE,aAAa,2CAwlBf;yBAvmBe,QAAQ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HomePage/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAA4B,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAChF,OAAO,wBAAwB,CAAC;AAEhC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACtD,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAgBxF,wBAAgB,QAAQ,CAAC,EACvB,UAAe,EACf,QAAa,EACb,YAAiB,EACjB,YAAiB,EACjB,uBAA4B,EAC5B,iBAAiB,EAAE,wBAA+B,EAClD,iBAAiB,EAAE,wBAA+B,EAClD,aAAoB,EACpB,eAAsB,EACtB,wBAA+B,EAC/B,qBAA4B,EAC5B,eAAsB,EACtB,wBAA+B,EAC/B,aAAa,EAAE,UAAU,GAC1B,EAAE,aAAa,+BAslBf;yBArmBe,QAAQ"}