impact-ui 5.0.0-beta.1 → 5.0.0-beta.2

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

@@ -1,14 +1,23 @@
+import { ReactNode } from 'react';
 import { BaseComponentProps } from '../../types';
 import { AvatarProps } from '../Avatar/Avatar.types';
 
+/** Configurable row in the profile menu (below Themes, above Logout). */
+export interface ProfileMenuItem {
+    /** Stable key; falls back to label */
+    id?: string;
+    label: string;
+    icon?: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    /** When true (default), the popover closes after click */
+    closeOnClick?: boolean;
+}
 /**
  * Header-avatar profile popover: banner + avatar + name/email, then a settings-style
- * list (Mute notifications, Themes, Keyboard shortcuts, Release notes, Help, All settings)
- * and a Logout row.
+ * list: built-in **Themes**, optional `menuItems` (icon + label + onClick), then **Logout**.
  *
- * Only `Themes` is wired to real behavior out of the box (via `useImpactUiTheme`); the
- * other rows are presentational placeholders — pass the matching `on…Click` to hook up
- * real behavior as each surface is implemented.
+ * **Themes** opens the Appearance modal (`ThemingPanel`). Add app-specific rows via `menuItems`.
  */
 export interface ProfileMenuProps extends BaseComponentProps {
     /** Element the popover is anchored to (usually the header avatar button) */
@@ -35,5 +44,7 @@ export interface ProfileMenuProps extends BaseComponentProps {
     onAllSettingsClick?: () => void;
     /** Called when "Logout" is clicked */
     onLogoutClick?: () => void;
+    /** Custom rows after Themes and before the Logout divider */
+    menuItems?: ProfileMenuItem[];
 }
 //# sourceMappingURL=ProfileMenu.types.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ProfileMenu.types.d.ts","sourceRoot":"","sources":["../../../src/components/ProfileMenu/ProfileMenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D;;;;;;;;GAQG;AACH,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,4EAA4E;IAC5E,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,kCAAkC;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,gFAAgF;IAChF,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACnC,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B"}
+{"version":3,"file":"ProfileMenu.types.d.ts","sourceRoot":"","sources":["../../../src/components/ProfileMenu/ProfileMenu.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAE1D,yEAAyE;AACzE,MAAM,WAAW,eAAe;IAC9B,sCAAsC;IACtC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D,4EAA4E;IAC5E,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;IAC7B,kCAAkC;IAClC,IAAI,EAAE,OAAO,CAAC;IACd,gFAAgF;IAChF,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,0CAA0C;IAC1C,QAAQ,EAAE,MAAM,CAAC;IACjB,iCAAiC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IACnC,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,wEAAwE;IACxE,wBAAwB,CAAC,EAAE,MAAM,IAAI,CAAC;IACtC,mEAAmE;IACnE,mBAAmB,CAAC,EAAE,MAAM,IAAI,CAAC;IACjC,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,kEAAkE;IAClE,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;IAChC,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,6DAA6D;IAC7D,SAAS,CAAC,EAAE,eAAe,EAAE,CAAC;CAC/B"}

package/dist/components/ProfileMenu/ProfileMenuListItem.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+interface ProfileMenuListItemProps {
+    label: string;
+    icon?: ReactNode;
+    className?: string;
+    disabled?: boolean;
+    onActivate: () => void;
+}
+export declare function ProfileMenuListItem({ label, icon, className, disabled, onActivate, }: ProfileMenuListItemProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=ProfileMenuListItem.d.ts.map

package/dist/components/ProfileMenu/ProfileMenuListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileMenuListItem.d.ts","sourceRoot":"","sources":["../../../src/components/ProfileMenu/ProfileMenuListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD,UAAU,wBAAwB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,IAAI,EACJ,SAAc,EACd,QAAgB,EAChB,UAAU,GACX,EAAE,wBAAwB,+BA+B1B"}

package/dist/components/ProfileMenu/ProfileMenuListItem.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+function ProfileMenuListItem({
+  label,
+  icon,
+  className = "",
+  disabled = false,
+  onActivate
+}) {
+  const handleClick = () => {
+    if (disabled) {
+      return;
+    }
+    onActivate();
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) {
+      return;
+    }
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onActivate();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-disabled": disabled || void 0,
+      className: `ia-profile-menu-item ${className}`.trim(),
+      role: "menuitem",
+      tabIndex: disabled ? -1 : 0,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { className: "ia-profile-menu-item-label", children: label })
+      ]
+    }
+  );
+}
+export {
+  ProfileMenuListItem
+};

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

@@ -1,17 +1,10 @@
 import { ProfileMenuProps } from './ProfileMenu.types';
 
-export type { ProfileMenuProps } from './ProfileMenu.types';
+export type { ProfileMenuProps, ProfileMenuItem } from './ProfileMenu.types';
 /**
- * Header-avatar profile popover.
- *
- * Shows a banner + avatar + name/email, then a settings-style list (Mute notifications,
- * Themes, Keyboard shortcuts, Release notes, Help, All settings) and a Logout row.
- *
- * Only the **Themes** row is wired up for now — it expands inline and lets the user pick
- * Light / Dark / System via `useImpactUiTheme`. The other rows are presentational
- * placeholders; pass the matching `on…Click` prop to wire up real behavior later.
+ * Header-avatar profile surface ({@link Popover} `contentOnly`). **Themes** opens {@link ThemingPanel}.
  */
-export declare function ProfileMenu({ anchorEl, open, onClose, userName, userEmail, avatarProps, onMuteNotificationsClick, onKeyboardShortcutsClick, onReleaseNotesClick, onHelpClick, onAllSettingsClick, onLogoutClick, className, id, 'data-testid': dataTestId, }: ProfileMenuProps): import("react").JSX.Element;
+export declare function ProfileMenu({ anchorEl, open, onClose, userName, userEmail, avatarProps, onMuteNotificationsClick: _onMuteNotificationsClick, onKeyboardShortcutsClick: _onKeyboardShortcutsClick, onReleaseNotesClick: _onReleaseNotesClick, onHelpClick: _onHelpClick, onAllSettingsClick: _onAllSettingsClick, onLogoutClick, menuItems, className, id, 'data-testid': dataTestId, }: ProfileMenuProps): import("react").JSX.Element;
 export declare namespace ProfileMenu {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProfileMenu/index.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAE5D,OAAO,2BAA2B,CAAC;AAEnC,YAAY,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAO5D;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,wBAAwB,EACxB,wBAAwB,EACxB,mBAAmB,EACnB,WAAW,EACX,kBAAkB,EAClB,aAAa,EACb,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,GAC1B,EAAE,gBAAgB,+BAqOlB;yBArPe,WAAW"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ProfileMenu/index.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,2BAA2B,CAAC;AAEnC,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAI7E;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,SAAS,EACT,WAAW,EACX,wBAAwB,EAAE,yBAAyB,EACnD,wBAAwB,EAAE,yBAAyB,EACnD,mBAAmB,EAAE,oBAAoB,EACzC,WAAW,EAAE,YAAY,EACzB,kBAAkB,EAAE,mBAAmB,EACvC,aAAa,EACb,SAAS,EACT,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,GAC1B,EAAE,gBAAgB,+BA4MlB;yBA7Ne,WAAW"}

package/dist/components/ProfileMenu/index.js

@@ -1,20 +1,17 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode(".ia-styles.ia-profile-menu .MuiPaper-root{background:var(--iu-bg-surface-layer-bg);border:.5px solid var(--iu-border-default);border-radius:16px;box-shadow:var(--iu-effect-shadow-header-dropdown-elevated);margin-top:8px;overflow:hidden;width:280px}.ia-profile-menu-container{display:flex;flex-direction:column;font-family:Manrope,sans-serif}.ia-profile-menu-banner{background:linear-gradient(115deg,var(--iu-primitive-color-green-300,#7fb88f) 0,var(--iu-bg-surface-lighter,#e7e4d8) 38%,var(--iu-bg-warning-lighter,#edd77f) 68%,var(--iu-bg-warning,#e1bc29) 100%);height:96px;position:relative}.ia-profile-menu-avatar{bottom:-28px;left:50%;position:absolute;transform:translate(-50%)}.ia-profile-menu-avatar .ia-avatar{border:3px solid var(--iu-bg-surface-layer-bg);border-radius:16px;box-shadow:var(--iu-effect-shadow-header-bar-elevation);font-size:20px;font-weight:700;height:72px!important;width:72px!important}.ia-profile-menu-identity{align-items:center;display:flex;flex-direction:column;gap:2px;padding:36px 16px 16px;text-align:center}.ia-profile-menu-name{color:var(--iu-on-surface-body);font-size:20px;font-weight:800}.ia-profile-menu-email{color:var(--iu-on-surface-label);font-size:14px;font-weight:400}.ia-profile-menu-list{display:flex;flex-direction:column;gap:2px;padding:0 8px 8px}.ia-profile-menu-item{align-items:center;border-radius:10px;color:var(--iu-on-surface-body);cursor:pointer;display:flex;gap:8px;height:44px;padding:0 12px}.ia-profile-menu-item:hover{background:var(--iu-bg-surface-lighter)}.ia-profile-menu-item:focus-visible{outline:2px solid var(--iu-bg-primary);outline-offset:1px}.ia-profile-menu-item-icon{color:var(--iu-on-surface-label);flex:none;height:20px;width:20px}.ia-profile-menu-item-label{flex:1;font-size:16px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ia-profile-menu-item-chevron{color:var(--iu-on-surface-label);flex:none;height:18px;width:18px}.ia-profile-menu-item-chevron-expand{transition:transform .15s ease}.ia-profile-menu-item-chevron-expanded{transform:rotate(180deg)}.ia-profile-menu-item-active{background:var(--iu-bg-primary-subtle)}.ia-profile-menu-theme-options{display:flex;flex-direction:column;gap:2px;margin:0 0 2px;padding:4px 0 4px 36px}.ia-profile-menu-theme-option{align-items:center;border-radius:8px;color:var(--iu-on-surface-body);cursor:pointer;display:flex;font-size:14px;font-weight:400;height:36px;justify-content:space-between;padding:0 12px}.ia-profile-menu-theme-option:hover{background:var(--iu-bg-surface-lighter)}.ia-profile-menu-theme-option-selected{color:var(--iu-bg-primary);font-weight:600}.ia-profile-menu-theme-option-check{color:var(--iu-bg-primary);height:16px;width:16px}.ia-profile-menu-divider{background:var(--iu-border-default);height:1px;margin:4px 16px}.ia-profile-menu-item-logout{margin:0 8px 8px}.ia-profile-menu-item-logout,.ia-profile-menu-item-logout .ia-profile-menu-item-icon{color:var(--iu-on-error-text)}.ia-profile-menu-item-logout:hover{background:var(--iu-legacy-error-background)}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
-import { jsx, jsxs } from "react/jsx-runtime";
+!function(){"use strict";try{if("undefined"!=typeof document){var e=document.createElement("style");e.appendChild(document.createTextNode('.ia-styles.ia-profile-menu :is(.MuiPaper-root,.ia-profile-menu-paper){background:var(--iu-bg-disabled-1);background-image:none;border:.5px solid var(--iu-border-default);border-radius:16px;box-shadow:var(--iu-effect-shadow-header-dropdown-elevated);color:var(--iu-on-surface-body);margin-top:8px;overflow:hidden;padding:0!important;width:280px}.ia-profile-menu-container{background:var(--iu-bg-disabled-1);display:flex;flex-direction:column;font-family:Manrope,sans-serif;position:relative;width:100%}.ia-profile-menu-banner{background-color:var(--iu-bg-disabled-1);border-radius:16px 16px 0 0;height:148px;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%;z-index:0}.ia-profile-menu-banner:before{background-image:var(--ia-profile-menu-banner-url);background-position:6px top;background-repeat:no-repeat;background-size:cover;content:"";top:0;right:0;bottom:0;left:0;position:absolute;transform:rotate(180deg) scale(1.55);transform-origin:center center;z-index:1}.ia-profile-menu-avatar{z-index:1}.ia-profile-menu-avatar .ia-avatar{background-color:var(--iu-primitive-color-green-500)!important;border:4px solid var(--iu-bg-disabled-1);border-radius:16px;box-shadow:var(--iu-effect-shadow-header-bar-elevation);color:var(--iu-on-primary-text);font-size:20px;font-weight:700;height:64px!important;width:64px!important}.ia-profile-menu-identity{align-items:center;display:flex;flex-direction:column;gap:2px;padding:12px 16px 16px;text-align:center;width:100%}.ia-profile-menu-name{color:var(--iu-on-surface-title);font-size:16px;font-weight:800;line-height:24px}.ia-profile-menu-email{color:var(--iu-on-surface-label);font-size:12px;font-weight:500;line-height:24px}.ia-profile-menu-list{background:var(--iu-bg-surface-layer-bg);display:flex;flex-direction:column;gap:2px;padding:8px 8px 12px;width:100%}.ia-profile-menu-item{align-items:center;border-radius:10px;color:var(--iu-on-surface-body);cursor:pointer;display:flex;gap:8px;height:44px;padding:0 12px;width:100%}.ia-profile-menu-item:hover{background:var(--iu-bg-primary-subtle)}.ia-profile-menu-item:focus-visible{outline:2px solid var(--iu-bg-primary);outline-offset:1px}.ia-profile-menu-item-icon{color:var(--iu-on-surface-icon);flex:none;height:16px;width:16px}.ia-profile-menu-item-label{flex:1;font-size:14px;font-weight:500;line-height:21px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ia-profile-menu-item-chevron{color:var(--iu-on-surface-icon);flex:none;height:18px;width:18px}.ia-profile-menu-item-chevron-expand{transition:transform .15s ease}.ia-profile-menu-item-chevron-expanded{transform:rotate(180deg)}.ia-profile-menu-item-active{background:var(--iu-bg-primary-subtle)}.ia-profile-menu-divider{background:var(--iu-border-default);height:1px;margin:4px 6px}.ia-profile-menu-item-logout{background:var(--iu-bg-surface-layer-bg);color:var(--iu-bg-error)}.ia-profile-menu-item-logout .ia-profile-menu-item-icon{color:var(--iu-on-error)}.ia-profile-menu-item-logout:hover{background:var(--iu-bg-primary-subtle)}.ia_profile_main{align-items:center;align-self:stretch;display:flex;flex-direction:column;padding-top:12px;position:relative;width:100%;z-index:1}')),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}}();
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
-import { KeyboardShortcutIcon as KeyboardShortcutIcon_default, HelpIcon as HelpIcon_default, LogoutIcon as LogoutIcon_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
-import default_1$5 from "../../node_modules/@mui/icons-material/ArticleOutlined.js";
-import default_1$4 from "../../node_modules/@mui/icons-material/Check.js";
-import default_1$1 from "../../node_modules/@mui/icons-material/ChevronRight.js";
-import default_1$3 from "../../node_modules/@mui/icons-material/ExpandMore.js";
-import default_1 from "../../node_modules/@mui/icons-material/NotificationsOffOutlined.js";
-import default_1$2 from "../../node_modules/@mui/icons-material/PaletteOutlined.js";
-import default_1$6 from "../../node_modules/@mui/icons-material/SettingsOutlined.js";
+import { LogoutIcon as LogoutIcon_default } from "../../node_modules/@impactsmartsuite/impact-icons/dist/index.js";
+import default_1 from "../../node_modules/@mui/icons-material/PaletteOutlined.js";
+import { getAssetUrl } from "../../utils/assetBase.js";
 import { Avatar } from "../Avatar/index.js";
 import { ImpactIcon, impactIconSource } from "../ImpactIcon/index.js";
+import { Popover } from "../Popover/index.js";
+import { ProfileMenuListItem } from "./ProfileMenuListItem.js";
 
 import { useTranslation } from "../../i18n/useTranslation.js";
-import { useImpactUiTheme } from "../../tokens/useImpactUiTheme.js";
-import Popover from "../../node_modules/@mui/material/Popover/Popover.js";
+import { ThemingPanel } from "../ThemingPanel/ThemingPanel.js";
+const PROFILE_MENU_BANNER_URL = getAssetUrl("images/profile-popover-bg.webp");
 function ProfileMenu({
   anchorEl,
   open,
@@ -22,258 +19,121 @@ function ProfileMenu({
   userName,
   userEmail,
   avatarProps,
-  onMuteNotificationsClick,
-  onKeyboardShortcutsClick,
-  onReleaseNotesClick,
-  onHelpClick,
-  onAllSettingsClick,
+  onMuteNotificationsClick: _onMuteNotificationsClick,
+  onKeyboardShortcutsClick: _onKeyboardShortcutsClick,
+  onReleaseNotesClick: _onReleaseNotesClick,
+  onHelpClick: _onHelpClick,
+  onAllSettingsClick: _onAllSettingsClick,
   onLogoutClick,
+  menuItems,
   className,
   id,
   "data-testid": dataTestId
 }) {
   const { t } = useTranslation();
-  const { mode, setMode } = useImpactUiTheme();
-  const [themesExpanded, setThemesExpanded] = useState(false);
-  const themeOptions = [
-    { value: "light", label: t("profileMenu.themeLight") },
-    { value: "dark", label: t("profileMenu.themeDark") },
-    { value: "system", label: t("profileMenu.themeSystem") }
-  ];
+  const [themingOpen, setThemingOpen] = useState(false);
   const handleClose = () => {
-    setThemesExpanded(false);
     onClose();
   };
-  const handleThemeSelect = (next) => {
-    setMode(next);
+  const openThemingPanel = () => {
+    setThemingOpen(true);
+    handleClose();
   };
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      anchorEl,
-      anchorOrigin: { vertical: "bottom", horizontal: "right" },
-      className: `ia-styles ia-profile-menu ${className ?? ""}`.trim(),
-      "data-testid": dataTestId,
-      id,
-      open,
-      transformOrigin: { vertical: "top", horizontal: "right" },
-      onClose: handleClose,
-      children: /* @__PURE__ */ jsxs("div", { className: "ia-profile-menu-container", children: [
-        /* @__PURE__ */ jsx("div", { className: "ia-profile-menu-banner", children: /* @__PURE__ */ jsx("div", { className: "ia-profile-menu-avatar", children: /* @__PURE__ */ jsx(Avatar, { label: userName, size: "large", type: "withoutPicture", ...avatarProps }) }) }),
-        /* @__PURE__ */ jsxs("div", { className: "ia-profile-menu-identity", children: [
-          /* @__PURE__ */ jsx("div", { className: "ia-profile-menu-name", children: userName }),
-          userEmail != null && /* @__PURE__ */ jsx("div", { className: "ia-profile-menu-email", children: userEmail })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "ia-profile-menu-list", children: [
-          /* @__PURE__ */ jsxs(
+  const handleLogout = () => {
+    onLogoutClick == null ? void 0 : onLogoutClick();
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        contentOnly: true,
+        anchorEl,
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        className: `ia-styles ia-profile-menu ${className ?? ""}`.trim(),
+        "data-testid": dataTestId,
+        id,
+        open,
+        slotProps: { paper: { className: "ia-profile-menu-paper" } },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+        onClose: () => {
+          handleClose();
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "ia-profile-menu-container", children: [
+          /* @__PURE__ */ jsx(
             "div",
             {
-              className: "ia-profile-menu-item",
-              role: "menuitem",
-              tabIndex: 0,
-              onClick: () => {
-                onMuteNotificationsClick == null ? void 0 : onMuteNotificationsClick();
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  onMuteNotificationsClick == null ? void 0 : onMuteNotificationsClick();
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx(default_1, { className: "ia-profile-menu-item-icon" }),
-                /* @__PURE__ */ jsx("span", { className: "ia-profile-menu-item-label", children: t("profileMenu.muteNotifications") }),
-                /* @__PURE__ */ jsx(default_1$1, { className: "ia-profile-menu-item-chevron" })
-              ]
+              "aria-hidden": true,
+              className: "ia-profile-menu-banner",
+              style: {
+                "--ia-profile-menu-banner-url": `url(${PROFILE_MENU_BANNER_URL})`
+              }
             }
           ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              "aria-expanded": themesExpanded,
-              className: `ia-profile-menu-item ia-profile-menu-item-themes ${themesExpanded ? "ia-profile-menu-item-active" : ""}`,
-              role: "button",
-              tabIndex: 0,
-              onClick: () => {
-                setThemesExpanded((prev) => !prev);
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  setThemesExpanded((prev) => !prev);
+          /* @__PURE__ */ jsxs("div", { className: "ia_profile_main", children: [
+            /* @__PURE__ */ jsx("div", { className: "ia-profile-menu-avatar", children: /* @__PURE__ */ jsx(Avatar, { label: userName, size: "large", type: "withoutPicture", ...avatarProps }) }),
+            /* @__PURE__ */ jsxs("div", { className: "ia-profile-menu-identity", children: [
+              /* @__PURE__ */ jsx("h2", { className: "ia-profile-menu-name", children: userName }),
+              userEmail != null && /* @__PURE__ */ jsx("div", { className: "ia-profile-menu-email", children: userEmail })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "ia-profile-menu-list", children: [
+              /* @__PURE__ */ jsx(
+                ProfileMenuListItem,
+                {
+                  className: "ia-profile-menu-item-themes",
+                  icon: /* @__PURE__ */ jsx(default_1, { className: "ia-profile-menu-item-icon", fontSize: "small" }),
+                  label: t("profileMenu.themes"),
+                  onActivate: openThemingPanel
                 }
-              },
-              children: [
-                /* @__PURE__ */ jsx(default_1$2, { className: "ia-profile-menu-item-icon" }),
-                /* @__PURE__ */ jsx("span", { className: "ia-profile-menu-item-label", children: t("profileMenu.themes") }),
-                /* @__PURE__ */ jsx(
-                  default_1$3,
-                  {
-                    className: `ia-profile-menu-item-chevron ia-profile-menu-item-chevron-expand ${themesExpanded ? "ia-profile-menu-item-chevron-expanded" : ""}`
-                  }
-                )
-              ]
-            }
-          ),
-          themesExpanded && /* @__PURE__ */ jsx("div", { className: "ia-profile-menu-theme-options", role: "radiogroup", children: themeOptions.map((option) => {
-            const selected = mode === option.value;
-            return /* @__PURE__ */ jsxs(
-              "div",
-              {
-                "aria-checked": selected,
-                className: `ia-profile-menu-theme-option ${selected ? "ia-profile-menu-theme-option-selected" : ""}`,
-                role: "radio",
-                tabIndex: 0,
-                onClick: () => {
-                  handleThemeSelect(option.value);
-                },
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    handleThemeSelect(option.value);
+              ),
+              menuItems == null ? void 0 : menuItems.map((item, index) => /* @__PURE__ */ jsx(
+                ProfileMenuListItem,
+                {
+                  disabled: item.disabled,
+                  icon: item.icon,
+                  label: item.label,
+                  onActivate: () => {
+                    var _a;
+                    (_a = item.onClick) == null ? void 0 : _a.call(item);
+                    if (item.closeOnClick !== false) {
+                      handleClose();
+                    }
                   }
                 },
-                children: [
-                  /* @__PURE__ */ jsx("span", { className: "ia-profile-menu-theme-option-label", children: option.label }),
-                  selected && /* @__PURE__ */ jsx(default_1$4, { className: "ia-profile-menu-theme-option-check" })
-                ]
-              },
-              option.value
-            );
-          }) }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "ia-profile-menu-item",
-              role: "menuitem",
-              tabIndex: 0,
-              onClick: () => {
-                onKeyboardShortcutsClick == null ? void 0 : onKeyboardShortcutsClick();
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  onKeyboardShortcutsClick == null ? void 0 : onKeyboardShortcutsClick();
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  ImpactIcon,
-                  {
-                    className: "ia-profile-menu-item-icon",
-                    icon: impactIconSource(KeyboardShortcutIcon_default),
-                    size: 20
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "ia-profile-menu-item-label", children: t("profileMenu.keyboardShortcuts") })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "ia-profile-menu-item",
-              role: "menuitem",
-              tabIndex: 0,
-              onClick: () => {
-                onReleaseNotesClick == null ? void 0 : onReleaseNotesClick();
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  onReleaseNotesClick == null ? void 0 : onReleaseNotesClick();
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx(default_1$5, { className: "ia-profile-menu-item-icon" }),
-                /* @__PURE__ */ jsx("span", { className: "ia-profile-menu-item-label", children: t("profileMenu.releaseNotes") })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "ia-profile-menu-item",
-              role: "menuitem",
-              tabIndex: 0,
-              onClick: () => {
-                onHelpClick == null ? void 0 : onHelpClick();
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  onHelpClick == null ? void 0 : onHelpClick();
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx(
-                  ImpactIcon,
-                  {
-                    className: "ia-profile-menu-item-icon",
-                    icon: impactIconSource(HelpIcon_default),
-                    size: 20
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { className: "ia-profile-menu-item-label", children: t("profileMenu.help") })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "ia-profile-menu-item",
-              role: "menuitem",
-              tabIndex: 0,
-              onClick: () => {
-                onAllSettingsClick == null ? void 0 : onAllSettingsClick();
-              },
-              onKeyDown: (e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  onAllSettingsClick == null ? void 0 : onAllSettingsClick();
-                }
-              },
-              children: [
-                /* @__PURE__ */ jsx(default_1$6, { className: "ia-profile-menu-item-icon" }),
-                /* @__PURE__ */ jsx("span", { className: "ia-profile-menu-item-label", children: t("profileMenu.allSettings") })
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "ia-profile-menu-divider" }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: "ia-profile-menu-item ia-profile-menu-item-logout",
-            role: "menuitem",
-            tabIndex: 0,
-            onClick: () => {
-              onLogoutClick == null ? void 0 : onLogoutClick();
-              handleClose();
-            },
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                onLogoutClick == null ? void 0 : onLogoutClick();
-                handleClose();
-              }
-            },
-            children: [
+                item.id ?? `${item.label}-${index}`
+              )),
+              /* @__PURE__ */ jsx("div", { className: "ia-profile-menu-divider" }),
               /* @__PURE__ */ jsx(
-                ImpactIcon,
+                ProfileMenuListItem,
                 {
-                  className: "ia-profile-menu-item-icon",
-                  icon: impactIconSource(LogoutIcon_default),
-                  size: 20
+                  className: "ia-profile-menu-item-logout",
+                  icon: /* @__PURE__ */ jsx(
+                    ImpactIcon,
+                    {
+                      className: "ia-profile-menu-item-icon",
+                      icon: impactIconSource(LogoutIcon_default),
+                      size: 16
+                    }
+                  ),
+                  label: t("profileMenu.logout"),
+                  onActivate: handleLogout
                 }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "ia-profile-menu-item-label", children: t("profileMenu.logout") })
-            ]
-          }
-        )
-      ] })
-    }
-  );
+              )
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ThemingPanel,
+      {
+        open: themingOpen,
+        onClose: () => {
+          setThemingOpen(false);
+        }
+      }
+    )
+  ] });
 }
 ProfileMenu.displayName = "ProfileMenu";
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,sBAAsB,CAAC;AAE9B,YAAY,EACV,WAAW,EACX,uBAAuB,EACvB,aAAa,EACb,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AASxB;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,iBAAiB,EAAE,kBAA0B,EAC7C,MAAM,EACN,KAAK,EACL,KAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAO,EACP,GAAS,EACT,OAAmB,EACnB,aAAwB,EACxB,oBAAoB,EACpB,WAAW,EACX,cAAqB,EACrB,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,EACzB,GAAG,WAAW,EACf,EAAE,WAAW,+BAyQb;yBA5Re,MAAM"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,sBAAsB,CAAC;AAE9B,YAAY,EACV,WAAW,EACX,uBAAuB,EACvB,aAAa,EACb,mBAAmB,GACpB,MAAM,gBAAgB,CAAC;AASxB;;GAEG;AACH,wBAAgB,MAAM,CAAC,EACrB,iBAAiB,EAAE,kBAA0B,EAC7C,MAAM,EACN,KAAK,EACL,KAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAO,EACP,GAAS,EACT,OAAmB,EACnB,aAAwB,EACxB,oBAAoB,EACpB,WAAW,EACX,cAAqB,EACrB,SAAS,EACT,EAAE,EACF,aAAa,EAAE,UAAU,EACzB,GAAG,WAAW,EACf,EAAE,WAAW,+BA0Qb;yBA7Re,MAAM"}

package/dist/components/Slider/index.js

@@ -1,7 +1,8 @@
-!function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode(".slider-container{display:flex;flex-direction:column;gap:2px;min-height:calc(100% + 20px)}.impact_slider_layout{display:flex;gap:16px}.impact_slider_layout .input_layout_style .MuiFormControl-root .MuiInputBase-root{background-color:var(--iu-bg-surface-layer-bg);border:1px solid var(--iu-bg-disabled-2);border-radius:8px;height:32px;width:75px}.impact_slider_layout .input_layout_style .MuiFormControl-root .MuiInputBase-root:focus,.impact_slider_layout .input_layout_style .MuiFormControl-root .MuiInputBase-root:hover{border:1px solid var(--iu-bg-primary)}.impact_slider_layout .input_layout_style .MuiFormControl-root .MuiInputBase-root fieldset{border:none!important}.impact_slider_layout .impact_slider_layout_heading{font-size:22px;font-weight:400;line-height:30.05px}.impact_slider_layout.header-top{flex-direction:column}.impact_slider_layout.header-left{align-items:center;flex-direction:row;gap:32px}.impact_slider_layout.input-position-inline{align-items:flex-end!important;gap:24px}.impact_slider_layout.input-position-inline .impact_slider_main_container{flex:1}.impact_slider_layout.input-position-inline .input_layout_style{flex-shrink:0}.impact_slider_layout.input-position-bottom{flex-direction:column;gap:16px}.impact_slider_layout.input-position-bottom .impact_slider_main_container{width:100%}.impact_slider_layout.input-position-bottom .input_layout_style{align-self:flex-end}.impact_slider_layout .impact_slider_container{width:390px}.impact_slider_layout .impact_slider_container .impact_slider_labelname{color:var(--iu-on-surface-label);display:block;font-size:12px;font-weight:500;margin-bottom:8px;margin-top:8px}.impact_slider_layout .impact_slider_container .impact_slider_main_container{align-items:center;display:flex;gap:16px;position:relative}.impact_slider_layout .impact_slider_container .impact_slider_main_container .impact_slider_threshold_marker{background-color:var(--iu-bg-warning);border-radius:1px;height:8px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:2px;z-index:1}.impact_slider_layout .impact_slider_container .impact_slider_main_container .MuiSlider-root{color:var(--iu-bg-primary);height:4px}.impact_slider_layout .impact_slider_container .impact_slider_main_container .MuiSlider-rail{background:var(--iu-border-disabled);opacity:1}.impact_slider_layout .impact_slider_container .impact_slider_main_container .MuiSlider-thumb:hover{box-shadow:none}.impact_slider_layout .impact_slider_container .impact_slider_main_container .MuiSlider-valueLabel{background-color:var(--iu-on-surface-title);color:var(--iu-bg-surface-layer-bg)}.impact_slider_layout .impact_slider_container .impact_slider_main_container .MuiSlider-valueLabel:before{background-color:var(--iu-on-surface-title)}.impact_slider_layout .impact_slider_container .impact_slider_main_container .MuiSlider-valueLabel .MuiSlider-valueLabelLabel{color:inherit;font-family:Manrope,sans-serif;font-weight:500;line-height:1.2}.impact_slider_layout .impact_slider_container .impact_slider_main_container_disabled{pointer-events:none}.impact_slider_layout .impact_slider_container .impact_slider_main_container_disabled .MuiSlider-root{color:var(--iu-bg-disabled-2);height:4px}.impact_slider_layout .impact_slider_container .impact_slider_main_container_disabled .MuiSlider-rail{background:var(--iu-bg-disabled-2);opacity:1}.impact_slider_layout .impact_slider_disabled .MuiSlider-root{color:var(--iu-border-disabled)!important}.impact_slider_layout .impact_slider_disabled .MuiInputBase-root{background:var(--iu-bg-disabled-1);border:1px solid var(--iu-border-disabled);color:var(--iu-border-disabled)}.impact_slider_layout .impact_slider_disabled .MuiInputBase-root:focus,.impact_slider_layout .impact_slider_disabled .MuiInputBase-root:hover{border:1px solid var(--iu-border-disabled)!important}.impact_slider_layout .impact_slider_disabled .MuiInputBase-root fieldset{border:none!important}.impact_slider_layout .input_layout_style.ranged form{align-items:center;display:flex}.impact_slider_layout .input_layout_style.ranged form .MuiFormControl-root{align-items:center;display:flex;flex-direction:row;flex-grow:1;justify-content:space-between}.impact_slider_layout .input_layout_style.single form{align-items:center;display:flex;justify-content:center}.impact_slider_layout .input_layout_style.single form .MuiFormControl-root{width:120px}.MuiSlider-thumb,.MuiSlider-thumb:before{box-shadow:none!important}.MuiSlider-thumb:active,.MuiSlider-thumb:hover{box-shadow:none!important;z-index:2}.MuiSlider-thumb.Mui-focusVisible{box-shadow:0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,var(--iu-bg-surface-layer-bg)),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,var(--iu-bg-primary))!important;outline:none;transition:box-shadow .15s ease-in-out;z-index:2}.Mui-disabled{pointer-events:none}.Mui-disabled.MuiOutlinedInput-root fieldset,:is(.Mui-disabled.MuiOutlinedInput-root:focus-within,.Mui-disabled.MuiOutlinedInput-root:hover) fieldset{border-color:var(--iu-border-disabled)!important}.slider-info-message{align-items:center;color:var(--iu-bg-error);display:flex;font-size:12px;gap:6px;height:20px;opacity:1;padding-left:91px;transform:translateY(0);transition:opacity .2s ease-out,transform .2s ease-out}.slider-info-message.hidden{opacity:0;pointer-events:none;transform:translateY(-4px)}.slider-info-message .slider-info-icon{flex-shrink:0;font-size:14px}.slider-info-message .slider-info-text{font-weight:500;line-height:16px}.slider-info-placeholder{height:20px;width:100%}")),document.head.appendChild(i)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}}();
+!function(){"use strict";try{if("undefined"!=typeof document){var i=document.createElement("style");i.appendChild(document.createTextNode(".slider-container{display:flex;flex-direction:column;gap:2px;min-height:calc(100% + 20px)}.impact_slider_layout{display:flex;gap:16px}.impact_slider_layout .input_layout_style .MuiFormControl-root .MuiInputBase-root{background-color:var(--iu-bg-surface-layer-bg);border:1px solid var(--iu-bg-disabled-2);border-radius:8px;height:32px;width:75px}.impact_slider_layout .input_layout_style .MuiFormControl-root .MuiInputBase-root:focus,.impact_slider_layout .input_layout_style .MuiFormControl-root .MuiInputBase-root:hover{border:1px solid var(--iu-bg-primary)}.impact_slider_layout .input_layout_style .MuiFormControl-root .MuiInputBase-root fieldset{border:none!important}.impact_slider_layout .impact_slider_layout_heading{font-size:22px;font-weight:400;line-height:30.05px}.impact_slider_layout.header-top{flex-direction:column}.impact_slider_layout.header-left{align-items:center;flex-direction:row;gap:32px}.impact_slider_layout.input-position-inline{align-items:flex-end!important;gap:24px}.impact_slider_layout.input-position-inline .impact_slider_main_container{flex:1}.impact_slider_layout.input-position-inline .input_layout_style{flex-shrink:0}.impact_slider_layout.input-position-bottom{flex-direction:column;gap:16px}.impact_slider_layout.input-position-bottom .impact_slider_main_container{width:100%}.impact_slider_layout.input-position-bottom .input_layout_style{align-self:flex-end}.impact_slider_layout .impact_slider_container{width:390px}.impact_slider_layout .impact_slider_container .impact_slider_labelname{color:var(--iu-on-surface-label);display:block;font-size:12px;font-weight:500;margin-bottom:8px;margin-top:8px}.impact_slider_layout .impact_slider_container .impact_slider_main_container{align-items:center;display:flex;gap:16px;position:relative}.impact_slider_layout .impact_slider_container .impact_slider_main_container .impact_slider_threshold_marker{background-color:var(--iu-bg-warning);border-radius:1px;height:8px;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:2px;z-index:1}.impact_slider_layout .impact_slider_container .impact_slider_main_container .MuiSlider-root{color:var(--iu-bg-primary);height:4px}.impact_slider_layout .impact_slider_container .impact_slider_main_container .MuiSlider-rail{background:var(--iu-border-disabled);opacity:1}.impact_slider_layout .impact_slider_container .impact_slider_main_container .MuiSlider-thumb:hover{box-shadow:none}.impact_slider_layout .impact_slider_container .impact_slider_main_container_disabled{pointer-events:none}.impact_slider_layout .impact_slider_container .impact_slider_main_container_disabled .MuiSlider-root{color:var(--iu-bg-disabled-2);height:4px}.impact_slider_layout .impact_slider_container .impact_slider_main_container_disabled .MuiSlider-rail{background:var(--iu-bg-disabled-2);opacity:1}.impact_slider_layout .impact_slider_disabled .MuiSlider-root{color:var(--iu-border-disabled)!important}.impact_slider_layout .impact_slider_disabled .MuiInputBase-root{background:var(--iu-bg-disabled-1);border:1px solid var(--iu-border-disabled);color:var(--iu-border-disabled)}.impact_slider_layout .impact_slider_disabled .MuiInputBase-root:focus,.impact_slider_layout .impact_slider_disabled .MuiInputBase-root:hover{border:1px solid var(--iu-border-disabled)!important}.impact_slider_layout .impact_slider_disabled .MuiInputBase-root fieldset{border:none!important}.impact_slider_layout .input_layout_style.ranged form{align-items:center;display:flex}.impact_slider_layout .input_layout_style.ranged form .MuiFormControl-root{align-items:center;display:flex;flex-direction:row;flex-grow:1;justify-content:space-between}.impact_slider_layout .input_layout_style.single form{align-items:center;display:flex;justify-content:center}.impact_slider_layout .input_layout_style.single form .MuiFormControl-root{width:120px}.MuiSlider-thumb,.MuiSlider-thumb:before{box-shadow:none!important}.MuiSlider-thumb:active,.MuiSlider-thumb:hover{box-shadow:none!important;z-index:2}.MuiSlider-thumb.Mui-focusVisible{box-shadow:0 0 0 var(--ia-focus-ring-offset,2px) var(--ia-focus-bg,var(--iu-bg-surface-layer-bg)),0 0 0 calc(var(--ia-focus-ring-offset, 2px) + var(--ia-focus-ring-width, 2px)) var(--ia-focus-color,var(--iu-bg-primary))!important;outline:none;transition:box-shadow .15s ease-in-out;z-index:2}.Mui-disabled{pointer-events:none}.Mui-disabled.MuiOutlinedInput-root fieldset,:is(.Mui-disabled.MuiOutlinedInput-root:focus-within,.Mui-disabled.MuiOutlinedInput-root:hover) fieldset{border-color:var(--iu-border-disabled)!important}.slider-info-message{align-items:center;color:var(--iu-bg-error);display:flex;font-size:12px;gap:6px;height:20px;opacity:1;padding-left:91px;transform:translateY(0);transition:opacity .2s ease-out,transform .2s ease-out}.slider-info-message.hidden{opacity:0;pointer-events:none;transform:translateY(-4px)}.slider-info-message .slider-info-icon{flex-shrink:0;font-size:14px}.slider-info-message .slider-info-text{font-weight:500;line-height:16px}.slider-info-placeholder{height:20px;width:100%}.impact-tooltip-container.impact-slider-value-tooltip.tertiary-tooltip .MuiTooltip-tooltip{border-radius:2px;font-size:12px;line-height:1.33;min-height:unset;padding:4px 12px}")),document.head.appendChild(i)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}}();
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { useState, useMemo, useEffect } from "react";
 import default_1 from "../../node_modules/@mui/icons-material/InfoOutlined.js";
+import { SliderValueLabel } from "./sliderValueLabel.js";
 
 import { useTranslation } from "../../i18n/useTranslation.js";
 import FormControl from "../../node_modules/@mui/material/FormControl/FormControl.js";
@@ -186,6 +187,7 @@ function Slider({
                   disabled,
                   max,
                   min,
+                  slots: { ...sliderProps.slots, valueLabel: SliderValueLabel },
                   sx: isAboveThreshold ? {
                     color: SLIDER_PRIMARY,
                     "& .MuiSlider-track": {

package/dist/components/Slider/sliderValueLabel.d.ts

@@ -0,0 +1,7 @@
+import { SliderValueLabelProps } from '@mui/material/Slider/SliderValueLabel.types';
+
+/**
+ * MUI Slider value label slot — shows the thumb value in Impact UI Tooltip instead of the default MUI bubble.
+ */
+export declare function SliderValueLabel({ children, open, value, valueLabelDisplay, }: SliderValueLabelProps): import("react").JSX.Element | null;
+//# sourceMappingURL=sliderValueLabel.d.ts.map

package/dist/components/Slider/sliderValueLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sliderValueLabel.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/sliderValueLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,6CAA6C,CAAC;AAEzF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,iBAAyB,GAC1B,EAAE,qBAAqB,sCAqBvB"}

package/dist/components/Slider/sliderValueLabel.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import { isValidElement, cloneElement } from "react";
+import { Tooltip } from "../Tooltip/index.js";
+function SliderValueLabel({
+  children,
+  open,
+  value,
+  valueLabelDisplay = "off"
+}) {
+  if (!isValidElement(children)) {
+    return null;
+  }
+  const labelVisible = valueLabelDisplay === "on" || valueLabelDisplay === "auto" && open;
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      className: "impact-slider-value-tooltip",
+      isHoverEnabled: false,
+      open: labelVisible,
+      orientation: "top",
+      title: value,
+      variant: "tertiary",
+      children: cloneElement(children, {
+        className: children.props.className
+      })
+    }
+  );
+}
+export {
+  SliderValueLabel
+};