impact-ui 5.0.1 → 5.0.2-beta.1

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,13 @@ function Header({
   handleChatBotClick,
   isMessageIconDisabled = false,
   isNotificationDnd = false,
-  dropMenuOptions = [{ label: userName ?? "User", onClick: () => {
-  } }],
+  dropMenuOptions,
+  userEmail,
+  showProfileMenu = true,
+  onLogoutClick,
+  onAppearanceApply,
+  onAppearanceCancel,
+  profileMenuItems,
   userMenuPopup,
   isChatBotDisabled = false,
   centerComponent,
@@ -65,8 +63,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(() => {
@@ -121,19 +148,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",
@@ -150,7 +180,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(
@@ -162,7 +192,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: [
@@ -183,7 +213,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 })
                 ]
               }
@@ -217,7 +247,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(
@@ -229,7 +259,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(
@@ -241,7 +271,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(
@@ -254,7 +284,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" })
@@ -278,18 +308,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"],
@@ -315,45 +337,54 @@ 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) => {
-                const target = event.currentTarget;
-                if (userMenuPopup) {
-                  setAnchorEl((prev) => prev ? null : target);
-                } else {
-                  setAnchorEl(target);
-                }
+                const target = avatarRef.current ?? event.currentTarget;
+                handleAvatarActivate(target);
               },
               onKeyDown: (e) => {
                 if (e.key !== "Enter" && e.key !== " ") {
                   return;
                 }
-                const target = e.currentTarget;
-                if (userMenuPopup) {
-                  setAnchorEl((prev) => prev ? null : target);
-                } else {
-                  setAnchorEl(target);
+                if (!avatarMenuEnabled) {
+                  return;
                 }
+                e.preventDefault();
+                const target = avatarRef.current ?? e.currentTarget;
+                handleAvatarActivate(target);
               },
               children: /* @__PURE__ */ jsx(Avatar, { label: userName, size: "small", type: avatarType, ...avatarProps })
             }
           ),
-          userMenuPopup ? userMenuPopup(anchorEl) : 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",
+              onAppearanceApply,
+              onAppearanceCancel,
+              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":"AAaA,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;AA6BxF,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,+BAokBf;yBAnlBe,QAAQ"}