impact-ui 5.0.1-alpha.2 → 5.0.1-beta.2

package/dist/components/HalloweenStyleIntro/halloweenIntroHtml.js

@@ -0,0 +1,141 @@
+import halloweenDevilLightHtml from "../../assets/halloween_devil_morning_final.html.js";
+import halloweenDevilDarkHtml from "../../assets/halloween_devil_night_Final.html.js";
+const HALLOWEEN_INTRO_STORY_OUT_SEC = 16.9;
+const HALLOWEEN_INTRO_STORY_SCALE = 20 / 18;
+const HALLOWEEN_INTRO_BLACK_HOLD_SEC = 0;
+const HALLOWEEN_INTRO_HINT_HOLD_MS = 1200;
+const HALLOWEEN_INTRO_STORY_COMPLETE_SEC = HALLOWEEN_INTRO_STORY_OUT_SEC + HALLOWEEN_INTRO_BLACK_HOLD_SEC;
+const HALLOWEEN_INTRO_DURATION_MS = Math.ceil(
+  HALLOWEEN_INTRO_HINT_HOLD_MS + HALLOWEEN_INTRO_STORY_COMPLETE_SEC / HALLOWEEN_INTRO_STORY_SCALE * 1e3 + 800
+);
+const INTRO_HTML = {
+  dark: halloweenDevilDarkHtml,
+  light: halloweenDevilLightHtml
+};
+const LEGACY_EMBED_FLAG = "const EMBED = new URLSearchParams(location.search).has('embed');";
+const EMBED_COMPLETE_AT = `T.out + ${HALLOWEEN_INTRO_BLACK_HOLD_SEC}`;
+const EMBED_POST_COMPLETE_STORY = `
+          if (EMBED && started && !introCompleteSent && t * STORY_SCALE >= ${EMBED_COMPLETE_AT}) {
+            introCompleteSent = true;
+            try { window.parent.postMessage({ source: 'impact-ui-halloween-intro', type: 'complete' }, '*'); } catch (_) {}
+          }`;
+const EMBED_POST_COMPLETE_LEGACY = `
+          if (EMBED && started && !introCompleteSent && t >= ${EMBED_COMPLETE_AT}) {
+            introCompleteSent = true;
+            try { window.parent.postMessage({ source: 'impact-ui-halloween-intro', type: 'complete' }, '*'); } catch (_) {}
+          }`;
+const EMBED_AUTOPLAY_BLOCK = `
+        requestAnimationFrame(frame);
+        if (EMBED) {
+          const embedHintMs = ${HALLOWEEN_INTRO_HINT_HOLD_MS};
+          const runEmbedIntro = () => {
+            if (started) return;
+            hint.classList.add('gone');
+            begin();
+          };
+          setTimeout(runEmbedIntro, embedHintMs);
+          addEventListener('message', (e) => {
+            const d = e.data;
+            if (d && d.source === 'impact-ui-halloween-intro' && d.type === 'begin') runEmbedIntro();
+          });
+          addEventListener('pointerdown', runEmbedIntro, { once: true });
+        } else {
+        addEventListener('pointerdown', begin);
+        addEventListener('keydown', (e) => {
+          if (e.key === 'm' || e.key === 'M') {
+            muted = !muted;
+            if (outGain) outGain.gain.setTargetAtTime(muted ? 0 : 1, actx.currentTime, 0.05);
+          } else if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault();
+            begin();
+          }
+        });
+        }`;
+const HINT_HTML = '<p id="hint">Best experienced with sound.</p>';
+const FINAL_AUTOPLAY_TAIL = /\s*requestAnimationFrame\(frame\);\s*\n\s*addEventListener\('pointerdown', begin\);\s*\n\s*addEventListener\('keydown', e => \{[\s\S]*?\n\s*\}\);\s*\n(\s*\})/;
+const LEGACY_AUTOPLAY_TAIL = /\s*requestAnimationFrame\(frame\);\s*\n\s*addEventListener\('pointerdown', begin\);\s*\n\s*addEventListener\('keydown', \(e\) => \{[\s\S]*?\n\s*\}\);\s*\n(\s*\})/;
+function prepareHalloweenIntroHtml(html) {
+  if (html.includes(LEGACY_EMBED_FLAG)) {
+    return html.replace(LEGACY_EMBED_FLAG, "const EMBED = true;").replace(
+      /introCompleteSent && t >= T\.end/,
+      `introCompleteSent && t >= ${EMBED_COMPLETE_AT}`
+    );
+  }
+  let out = html.replace(/<p id="hint">[^<]*<\/p>/, HINT_HTML);
+  if (!out.includes("const EMBED = true")) {
+    out = out.replace(
+      /(RENDER = QS\.has\('render'\) \|\| EXPORT;[^\n]*\n)/,
+      `$1      const EMBED = true;
+`
+    );
+  }
+  if (!out.includes("introCompleteSent")) {
+    out = out.replace(
+      /let frames = 0,\s*\n\s*acc = 0,\s*\n\s*tuned = false,\s*\n\s*last = 0;/,
+      `let frames = 0,
+          acc = 0,
+          tuned = false,
+          last = 0,
+          introCompleteSent = false;`
+    );
+    out = out.replace(
+      /let frames = 0, acc = 0, tuned = false, last = 0;/,
+      "let frames = 0, acc = 0, tuned = false, last = 0, introCompleteSent = false;"
+    );
+  }
+  if (!out.includes("impact-ui-halloween-intro")) {
+    if (out.includes("update(t * STORY_SCALE)")) {
+      out = out.replace(
+        /(update\(t \* STORY_SCALE\);\s*composer\.render\(\);)/,
+        `$1${EMBED_POST_COMPLETE_STORY}`
+      );
+    } else {
+      out = out.replace(
+        /(update\(t\);\s*\n\s*composer\.render\(\);)\s*\n(\s*if \(started && !tuned)/,
+        `$1${EMBED_POST_COMPLETE_LEGACY}
+$2`
+      );
+    }
+  }
+  if (!out.includes("runEmbedIntro")) {
+    if (FINAL_AUTOPLAY_TAIL.test(out)) {
+      out = out.replace(FINAL_AUTOPLAY_TAIL, `${EMBED_AUTOPLAY_BLOCK}
+$1`);
+    } else {
+      out = out.replace(LEGACY_AUTOPLAY_TAIL, `${EMBED_AUTOPLAY_BLOCK}
+$1`);
+    }
+  }
+  if (out.includes("update(t * STORY_SCALE)")) {
+    out = out.replace(
+      /out: 16\.9, end: 20\.0/,
+      `out: 16.9, end: ${HALLOWEEN_INTRO_STORY_COMPLETE_SEC}`
+    );
+    if (!out.includes("!EMBED && t >= LOOP")) {
+      out = out.replace(
+        /if \(t >= LOOP\) \{ if \(actx\) \{ cycleStart \+= LOOP;/,
+        "if (!EMBED && t >= LOOP) { if (actx) { cycleStart += LOOP;"
+      );
+    }
+    if (!out.includes("!(EMBED && introCompleteSent)")) {
+      out = out.replace(
+        /last = now;\s*\n\s*requestAnimationFrame\(frame\);/,
+        `last = now;
+    if (!(EMBED && introCompleteSent)) requestAnimationFrame(frame);`
+      );
+    }
+  }
+  return out;
+}
+function getHalloweenIntroSrcDoc(resolvedMode) {
+  return prepareHalloweenIntroHtml(INTRO_HTML[resolvedMode]);
+}
+export {
+  HALLOWEEN_INTRO_BLACK_HOLD_SEC,
+  HALLOWEEN_INTRO_DURATION_MS,
+  HALLOWEEN_INTRO_HINT_HOLD_MS,
+  HALLOWEEN_INTRO_STORY_OUT_SEC,
+  HALLOWEEN_INTRO_STORY_SCALE,
+  getHalloweenIntroSrcDoc,
+  prepareHalloweenIntroHtml
+};

package/dist/components/HalloweenStyleIntro/halloweenIntroHtml.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=halloweenIntroHtml.test.d.ts.map

package/dist/components/HalloweenStyleIntro/halloweenIntroHtml.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"halloweenIntroHtml.test.d.ts","sourceRoot":"","sources":["../../../src/components/HalloweenStyleIntro/halloweenIntroHtml.test.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,4 @@
+export { HALLOWEEN_INTRO_PLAY_EVENT, type HalloweenIntroPlayDetail, } from './halloweenIntro.constants';
+export { getHalloweenIntroSrcDoc, HALLOWEEN_INTRO_DURATION_MS, prepareHalloweenIntroHtml, } from './halloweenIntroHtml';
+export { HalloweenStyleIntroProvider, useHalloweenStyleIntro, type HalloweenStyleIntroContextValue, } from './HalloweenStyleIntroProvider';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HalloweenStyleIntro/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,0BAA0B,EAC1B,KAAK,wBAAwB,GAC9B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,uBAAuB,EACvB,2BAA2B,EAC3B,yBAAyB,GAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,2BAA2B,EAC3B,sBAAsB,EACtB,KAAK,+BAA+B,GACrC,MAAM,+BAA+B,CAAC"}

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

@@ -2,9 +2,11 @@ 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';
+import { ThemingPanelSettings } from '../ThemingPanel/ThemingPanel.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 +15,25 @@ 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 user applies changes in Profile menu → Themes → Appearance */
+    onAppearanceApply?: (settings: ThemingPanelSettings) => void;
+    /** Called when the user cancels Appearance without applying (not fired on Apply) */
+    onAppearanceCancel?: () => void;
     /** Called when the logo is clicked */
     handleLogoClick?: () => void;
     /** Show the notification icon */
@@ -44,11 +58,14 @@ 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 the default Menu driven by dropMenuOptions.
+     * 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;

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;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,KAAK,SAAS,CAAC;IAE5D,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, userMenuPopup, 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, onAppearanceApply, onAppearanceCancel, 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,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,2CA2Tb;yBA5Ve,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,iBAAiB,EACjB,kBAAkB,EAClB,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,+BAqWb;yBA5Ye,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,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"}