beacon-ui 3.1.7 → 3.1.8

package/CHANGELOG.md

@@ -5,6 +5,13 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.1.8] - 2025-12-29
+
+### Fixed
+- Button component now preserves variant colors (success, critical, warning) when in loading state
+- Previously, buttons would revert to default/primary color when loading was enabled
+- Loading state no longer overrides variant-specific colors
+
 ## [3.1.7] - 2025-12-29
 
 ### Changed

package/dist/components/Button.d.ts

@@ -4,6 +4,7 @@ export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 export type CornerRadiusStep = 0 | 1 | 2 | 3 | 4 | 5;
 export type JustifyContent = "center" | "space-between";
 export type ButtonState = "default" | "hovered" | "focused" | "pressed";
+export type ButtonColor = "primary" | "success" | "critical" | "warning";
 export interface ButtonProps extends Omit<ComponentPropsWithRef<"button">, "type"> {
     variant?: ButtonVariant;
     size?: ButtonSize;
@@ -14,8 +15,9 @@ export interface ButtonProps extends Omit<ComponentPropsWithRef<"button">, "type
     justifyContent?: JustifyContent;
     loading?: boolean;
     state?: ButtonState;
+    color?: ButtonColor;
     type?: "button" | "submit" | "reset";
     children: React.ReactNode;
 }
-export declare function Button({ variant, size, cornerRadius, startIcon, endIcon, fillContainer, justifyContent, loading, disabled, state: stateProp, type, children, className, style, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, ref, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ variant, size, cornerRadius, startIcon, endIcon, fillContainer, justifyContent, loading, disabled, state: stateProp, color, type, children, className, style, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, ref, ...rest }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Button.d.ts.map

package/dist/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,eAAe,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAChF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkED,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,IAAW,EACX,YAAgB,EAChB,SAAS,EACT,OAAO,EACP,aAAqB,EACrB,cAAyB,EACzB,OAAe,EACf,QAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,IAAe,EACf,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAoNb"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkC,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAI9E,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AACpE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,eAAe,CAAC;AACxD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AACxE,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAEzE,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAChF,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,YAAY,CAAC,EAAE,gBAAgB,CAAC;IAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAkED,wBAAgB,MAAM,CAAC,EACrB,OAAkB,EAClB,IAAW,EACX,YAAgB,EAChB,SAAS,EACT,OAAO,EACP,aAAqB,EACrB,cAAyB,EACzB,OAAe,EACf,QAAgB,EAChB,KAAK,EAAE,SAAS,EAChB,KAAiB,EACjB,IAAe,EACf,QAAQ,EACR,SAAS,EACT,KAAK,EACL,OAAO,EACP,YAAY,EACZ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,WAAW,EACX,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACR,EAAE,WAAW,2CAiPb"}

package/dist/components/Button.js

@@ -55,7 +55,7 @@ const LOADER_ICON_SIZE_MAP = {
     lg: 32,
     xl: 40,
 };
-export function Button({ variant = "filled", size = "md", cornerRadius = 2, startIcon, endIcon, fillContainer = false, justifyContent = "center", loading = false, disabled = false, state: stateProp, type = "button", children, className, style, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, ref, ...rest }) {
+export function Button({ variant = "filled", size = "md", cornerRadius = 2, startIcon, endIcon, fillContainer = false, justifyContent = "center", loading = false, disabled = false, state: stateProp, color = "primary", type = "button", children, className, style, onClick, onMouseEnter, onMouseLeave, onFocus, onBlur, onMouseDown, onMouseUp, ref, ...rest }) {
     const themeContext = useThemeSafe();
     const sizeConfig = SIZE_CONFIG[size];
     const borderRadius = CORNER_RADIUS_MAP[cornerRadius];
@@ -97,7 +97,8 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
         }
         onMouseUp?.(e);
     }, [disabled, loading, stateProp, onMouseUp]);
-    const isDisabled = disabled || loading;
+    const isDisabled = disabled;
+    const isLoading = loading;
     const currentState = isDisabled ? "default" : state;
     const buttonStyles = useMemo(() => {
         const baseStyles = {
@@ -113,7 +114,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
             borderStyle: "solid",
             borderColor: "transparent",
             borderRadius,
-            cursor: isDisabled ? "not-allowed" : "pointer",
+            cursor: (isDisabled || isLoading) ? "not-allowed" : "pointer",
             transition: "background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease",
             minHeight: sizeConfig.height,
             paddingLeft: sizeConfig.paddingX,
@@ -123,34 +124,49 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
             width: fillContainer ? "100%" : "auto",
             opacity: isDisabled ? 0.6 : 1,
         };
+        // Get color token prefixes based on color prop
+        const colorPrefix = color === "primary" ? "primary" : color;
+        const bgToken = `--bg-${colorPrefix}`;
+        const bgTonalToken = `--bg-${colorPrefix}-tonal`;
+        const bgHoverToken = `--bg-${colorPrefix}-on-hover`;
+        const bgPressedToken = color === "primary" ? `--bg-${colorPrefix}-pressed` : `--bg-${colorPrefix}-on-hover`;
+        const bgFocusedToken = color === "primary" ? `--bg-${colorPrefix}-on-focused` : `--bg-${colorPrefix}-on-hover`;
+        const bgTonalHoverToken = color === "primary" ? `--bg-${colorPrefix}-tonal-on-hover` : `--bg-${colorPrefix}-tonal`;
+        const fgToken = `--fg-${colorPrefix}`;
+        const fgTonalToken = `--fg-${colorPrefix}-on-tonal`;
+        const fgHoverToken = color === "primary" ? `--fg-${colorPrefix}-on-hover` : `--fg-${colorPrefix}`;
+        const borderToken = `--border-${colorPrefix}`;
+        const borderTonalToken = `--border-${colorPrefix}-tonal`;
+        const borderHoverToken = color === "primary" ? `--border-${colorPrefix}-on-hover` : `--border-${colorPrefix}`;
+        // For non-primary colors, use the base border token for hover since there's no specific hover border token
         // Get base variant styles
         let variantStyles = {};
         switch (variant) {
             case "filled":
                 variantStyles = {
-                    backgroundColor: "var(--bg-primary)",
+                    backgroundColor: `var(${bgToken})`,
                     color: "var(--fg-on-action)",
-                    borderColor: "var(--bg-primary)",
+                    borderColor: `var(${bgToken})`,
                 };
                 break;
             case "tonal":
                 variantStyles = {
-                    backgroundColor: "var(--bg-primary-tonal)",
-                    color: "var(--fg-primary-on-tonal)",
-                    borderColor: "var(--border-primary-tonal)",
+                    backgroundColor: `var(${bgTonalToken})`,
+                    color: `var(${fgTonalToken})`,
+                    borderColor: `var(${borderTonalToken})`,
                 };
                 break;
             case "outline":
                 variantStyles = {
                     backgroundColor: "transparent",
-                    color: "var(--fg-primary)",
-                    borderColor: "var(--border-primary)",
+                    color: `var(${fgToken})`,
+                    borderColor: `var(${borderToken})`,
                 };
                 break;
             case "link":
                 variantStyles = {
                     backgroundColor: "transparent",
-                    color: "var(--fg-primary)",
+                    color: `var(${fgToken})`,
                     borderWidth: 0,
                     borderStyle: "none",
                     borderColor: "transparent",
@@ -160,6 +176,7 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
                 break;
         }
         // Apply state-specific overrides
+        // When loading, preserve variant colors and don't apply state-specific styles
         const stateStyles = {};
         if (isDisabled) {
             if (variant === "filled") {
@@ -180,44 +197,51 @@ export function Button({ variant = "filled", size = "md", cornerRadius = 2, star
                 stateStyles.color = "var(--fg-disabled)";
             }
         }
-        else if (currentState === "hovered") {
+        else if (!isLoading && currentState === "hovered") {
             if (variant === "filled") {
-                stateStyles.backgroundColor = "var(--bg-primary-on-hover)";
-                stateStyles.borderColor = "var(--bg-primary-on-hover)";
+                stateStyles.backgroundColor = `var(${bgHoverToken})`;
+                stateStyles.borderColor = `var(${bgHoverToken})`;
             }
             else if (variant === "tonal") {
-                stateStyles.backgroundColor = "var(--bg-primary-tonal-on-hover)";
+                stateStyles.backgroundColor = `var(${bgTonalHoverToken})`;
             }
             else if (variant === "outline") {
-                stateStyles.borderColor = "var(--border-primary-on-hover)";
+                stateStyles.borderColor = `var(${borderHoverToken})`;
             }
             else if (variant === "link") {
-                stateStyles.color = "var(--fg-primary-on-hover)";
+                stateStyles.color = `var(${fgHoverToken})`;
             }
         }
-        else if (currentState === "pressed") {
+        else if (!isLoading && currentState === "pressed") {
             if (variant === "filled") {
-                stateStyles.backgroundColor = "var(--bg-primary-pressed)";
-                stateStyles.borderColor = "var(--bg-primary-pressed)";
+                stateStyles.backgroundColor = `var(${bgPressedToken})`;
+                stateStyles.borderColor = `var(${bgPressedToken})`;
             }
             else if (variant === "tonal") {
-                stateStyles.backgroundColor = "var(--bg-primary-tonal-on-hover)";
+                stateStyles.backgroundColor = `var(${bgTonalHoverToken})`;
             }
         }
-        else if (currentState === "focused") {
+        else if (!isLoading && currentState === "focused") {
             if (variant === "filled") {
-                stateStyles.backgroundColor = "var(--bg-primary-on-focused)";
-                stateStyles.borderColor = "var(--bg-primary-on-focused)";
+                stateStyles.backgroundColor = `var(${bgFocusedToken})`;
+                stateStyles.borderColor = `var(${bgFocusedToken})`;
             }
             else if (variant === "outline") {
-                stateStyles.borderColor = "var(--border-primary)";
+                stateStyles.borderColor = `var(${borderToken})`;
             }
-            stateStyles.outline = "2px solid var(--border-primary)";
+            stateStyles.outline = `2px solid var(${borderToken})`;
             stateStyles.outlineOffset = "2px";
         }
         return { ...baseStyles, ...variantStyles, ...stateStyles, ...style };
-    }, [variant, sizeConfig, borderRadius, fillContainer, justifyContent, currentState, isDisabled, style]);
+    }, [variant, sizeConfig, borderRadius, fillContainer, justifyContent, currentState, isDisabled, isLoading, color, style]);
     const showStartIcon = !loading && startIcon;
     const showEndIcon = !loading && endIcon;
-    return (_jsx("button", { ref: ref, type: type, className: className, style: buttonStyles, disabled: isDisabled, onClick: onClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...rest, children: loading ? (_jsx(LoaderIcon, { size: LOADER_ICON_SIZE_MAP[size], className: "ds-button-loading-spinner" })) : (_jsxs(_Fragment, { children: [showStartIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: startIcon }), children, showEndIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: endIcon })] })) }));
+    const handleClick = useCallback((e) => {
+        if (isDisabled || isLoading) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    }, [isDisabled, isLoading, onClick]);
+    return (_jsx("button", { ref: ref, type: type, className: className, style: buttonStyles, disabled: isDisabled, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, ...rest, children: loading ? (_jsx(LoaderIcon, { size: LOADER_ICON_SIZE_MAP[size], className: "ds-button-loading-spinner" })) : (_jsxs(_Fragment, { children: [showStartIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: startIcon }), children, showEndIcon && _jsx("span", { style: { display: "inline-flex", alignItems: "center" }, children: endIcon })] })) }));
 }

package/dist/components/Menu.d.ts

@@ -1,8 +1,11 @@
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, ReactNode } from "react";
 type MenuVariant = "desktop" | "tablet-open" | "tablet-closed" | "mobile-open" | "mobile-closed" | "close-menu";
-interface MenuItem {
+export interface MenuItem {
     id: string;
     label: string;
+    icon?: ReactNode;
+    selected?: boolean;
+    onClick?: (item: MenuItem) => void;
 }
 export interface MenuProps extends ComponentPropsWithRef<"div"> {
     variant?: MenuVariant;
@@ -13,7 +16,9 @@ export interface MenuProps extends ComponentPropsWithRef<"div"> {
     headerSubtitle?: string;
     showChevrons?: boolean;
     avatarImageUrl?: string;
+    selectedItemId?: string;
+    onItemClick?: (item: MenuItem) => void;
 }
-export declare function Menu({ variant, showMenu, showButton, menuItems, headerTitle, headerSubtitle, showChevrons, avatarImageUrl, className, style, ref, ...rest }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ variant, showMenu, showButton, menuItems, headerTitle, headerSubtitle, showChevrons, avatarImageUrl, selectedItemId, onItemClick, className, style, ref, ...rest }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Menu.d.ts.map

package/dist/components/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAKvD,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,YAAY,CAAC;AAEhH,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC7D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAUD,wBAAgB,IAAI,CAAC,EACnB,OAAmB,EACnB,QAAe,EACf,UAAiB,EACjB,SAA8B,EAC9B,WAAqB,EACrB,cAA2B,EAC3B,YAAmB,EACnB,cAAc,EACd,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CAgZX"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/components/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,qBAAqB,EAAY,SAAS,EAAE,MAAM,OAAO,CAAC;AAM5E,KAAK,WAAW,GAAG,SAAS,GAAG,aAAa,GAAG,eAAe,GAAG,aAAa,GAAG,eAAe,GAAG,YAAY,CAAC;AAEhH,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,KAAK,CAAC;IAC7D,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;CACxC;AAUD,wBAAgB,IAAI,CAAC,EACnB,OAAmB,EACnB,QAAe,EACf,UAAiB,EACjB,SAA8B,EAC9B,WAAqB,EACrB,cAA2B,EAC3B,YAAmB,EACnB,cAAc,EACd,cAAc,EACd,WAAW,EACX,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,SAAS,2CA2aX"}

package/dist/components/Menu.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { UserPersonIcon, ChevronRightIcon, CloseIcon, MenuIcon, DownloadIcon } from "../icons";
+import { useMemo, useState } from "react";
+import { CloseIcon, MenuIcon, DownloadIcon } from "../icons";
 import { Switch } from "./Switch";
 import { useThemeSafe } from "../providers/ThemeProvider";
+import { MenuItem as MenuItemComponent } from "./MenuItem";
 const DEFAULT_MENU_ITEMS = [
     { id: "1", label: "Menu Item #1" },
     { id: "2", label: "Menu Item #2" },
@@ -11,9 +12,10 @@ const DEFAULT_MENU_ITEMS = [
     { id: "4", label: "Menu Item #4" },
     { id: "5", label: "Menu Item #5" },
 ];
-export function Menu({ variant = "desktop", showMenu = true, showButton = true, menuItems = DEFAULT_MENU_ITEMS, headerTitle = "Title", headerSubtitle = "Subtitle", showChevrons = true, avatarImageUrl, className, style, ref, ...rest }) {
+export function Menu({ variant = "desktop", showMenu = true, showButton = true, menuItems = DEFAULT_MENU_ITEMS, headerTitle = "Title", headerSubtitle = "Subtitle", showChevrons = true, avatarImageUrl, selectedItemId, onItemClick, className, style, ref, ...rest }) {
     const themeContext = useThemeSafe();
     const theme = themeContext?.theme ?? "dark";
+    const [hoveredItemId, setHoveredItemId] = useState(null);
     const containerStyles = useMemo(() => {
         const baseStyles = {
             display: "flex",
@@ -111,17 +113,6 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
             overflow: "hidden",
         };
     }, []);
-    const menuItemStyles = useMemo(() => {
-        return {
-            display: "flex",
-            gap: "var(--spacing-200)",
-            alignItems: "center",
-            padding: "var(--spacing-200) var(--spacing-200)",
-            borderRadius: "var(--corner-radius-200)",
-            backgroundColor: "var(--bg-page-primary)",
-            width: "100%",
-        };
-    }, []);
     const buttonStyles = useMemo(() => {
         return {
             display: "flex",
@@ -196,12 +187,27 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
     const isMobileClosed = variant === "mobile-closed";
     const showMenuItems = (isDesktop || isTabletOpen || isMobileOpen) && showMenu;
     const showHeaderContent = isDesktop || isTabletOpen || isTabletClosed;
-    return (_jsxs("div", { ref: ref, className: className, style: { ...containerStyles, ...style }, ...rest, children: [isDesktop ? (_jsx(_Fragment, { children: _jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: avatarImageUrl ? (_jsx("img", { src: avatarImageUrl, alt: "User avatar", style: {
+    return (_jsxs("div", { ref: ref, className: className, style: { ...containerStyles, ...style }, ...rest, children: [isDesktop ? (_jsx(_Fragment, { children: _jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: _jsx("img", { src: avatarImageUrl || "/images/avatars/avatar-female.png", alt: "User avatar", style: {
                                     width: "100%",
                                     height: "100%",
                                     objectFit: "cover",
                                     objectPosition: "center",
-                                } })) : (_jsx(UserPersonIcon, { size: 24 })) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
+                                }, onError: (e) => {
+                                    // Fallback to icon if image fails to load
+                                    const target = e.target;
+                                    target.style.display = "none";
+                                    const iconContainer = target.parentElement;
+                                    if (iconContainer && !iconContainer.querySelector("svg")) {
+                                        const iconWrapper = document.createElement("div");
+                                        iconWrapper.style.display = "flex";
+                                        iconWrapper.style.alignItems = "center";
+                                        iconWrapper.style.justifyContent = "center";
+                                        iconWrapper.style.width = "100%";
+                                        iconWrapper.style.height = "100%";
+                                        iconWrapper.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="var(--fg-neutral)"/></svg>`;
+                                        iconContainer.appendChild(iconWrapper);
+                                    }
+                                } }) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
                                         fontFamily: "var(--font-secondary)",
                                         fontSize: "var(--body-small-text-size)",
                                         lineHeight: "var(--body-small-line-height)",
@@ -217,12 +223,27 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
                                         margin: 0,
                                     }, children: headerSubtitle })] }))] }) })) : (
             /* Tablet/Mobile: Header and Footer in single row */
-            _jsxs("div", { style: mainRowStyles, children: [_jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: avatarImageUrl ? (_jsx("img", { src: avatarImageUrl, alt: "User avatar", style: {
+            _jsxs("div", { style: mainRowStyles, children: [_jsxs("div", { style: headerStyles, children: [_jsx("div", { style: avatarStyles, children: _jsx("img", { src: avatarImageUrl || "/images/avatars/avatar-female.png", alt: "User avatar", style: {
                                         width: "100%",
                                         height: "100%",
                                         objectFit: "cover",
                                         objectPosition: "center",
-                                    } })) : (_jsx(UserPersonIcon, { size: 24 })) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
+                                    }, onError: (e) => {
+                                        // Fallback to icon if image fails to load
+                                        const target = e.target;
+                                        target.style.display = "none";
+                                        const iconContainer = target.parentElement;
+                                        if (iconContainer && !iconContainer.querySelector("svg")) {
+                                            const iconWrapper = document.createElement("div");
+                                            iconWrapper.style.display = "flex";
+                                            iconWrapper.style.alignItems = "center";
+                                            iconWrapper.style.justifyContent = "center";
+                                            iconWrapper.style.width = "100%";
+                                            iconWrapper.style.height = "100%";
+                                            iconWrapper.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="var(--fg-neutral)"/></svg>`;
+                                            iconContainer.appendChild(iconWrapper);
+                                        }
+                                    } }) }), showHeaderContent && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-none)", flex: 1 }, children: [_jsx("p", { style: {
                                             fontFamily: "var(--font-secondary)",
                                             fontSize: "var(--body-small-text-size)",
                                             lineHeight: "var(--body-small-line-height)",
@@ -243,13 +264,25 @@ export function Menu({ variant = "desktop", showMenu = true, showButton = true,
                     padding: isDesktop ? "var(--spacing-600) 0" : "var(--spacing-400) var(--spacing-200)",
                     width: "100%",
                     flex: isDesktop ? 1 : undefined,
-                }, children: menuItems.map((item) => (_jsxs("div", { style: menuItemStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "20px", height: "20px", flexShrink: 0, color: "var(--fg-neutral)" }, children: _jsx(UserPersonIcon, { size: 20 }) }), _jsx("p", { style: {
-                                fontFamily: "var(--font-secondary)",
-                                fontSize: "var(--body-small-text-size)",
-                                lineHeight: "var(--body-small-line-height)",
-                                fontWeight: "var(--font-weight-secondary-medium)",
-                                color: "var(--fg-neutral-secondary)",
-                                margin: 0,
-                                flex: 1,
-                            }, children: item.label }), showChevrons && (_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px", flexShrink: 0, color: "var(--fg-neutral)" }, children: _jsx(ChevronRightIcon, { size: 16 }) }))] }, item.id))) })), isDesktop && (_jsxs(_Fragment, { children: [showButton && (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-400)", padding: "var(--spacing-400)", width: "100%" }, children: _jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] }) })), _jsx("div", { style: footerStyles, children: _jsx(Switch, { checked: theme === "dark", showIcons: true }) })] }))] }));
+                }, children: menuItems.map((item) => {
+                    const isSelected = selectedItemId === item.id || item.selected === true;
+                    const isHovered = hoveredItemId === item.id;
+                    const handleClick = () => {
+                        if (item.onClick) {
+                            item.onClick(item);
+                        }
+                        if (onItemClick) {
+                            onItemClick(item);
+                        }
+                    };
+                    const handleMouseEnter = () => {
+                        setHoveredItemId(item.id);
+                    };
+                    const handleMouseLeave = () => {
+                        setHoveredItemId(null);
+                    };
+                    // Determine state for MenuItem component
+                    const itemState = isSelected ? "Active" : isHovered ? "Hovered" : "Default";
+                    return (_jsx(MenuItemComponent, { menuTitle: item.label, iconStart: true, iconStart1: item.icon || null, iconEnd: showChevrons, iconEnd1: null, state: itemState, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, item.id));
+                }) })), isDesktop && (_jsxs(_Fragment, { children: [showButton && (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: "var(--spacing-400)", padding: "var(--spacing-400)", width: "100%" }, children: _jsxs("div", { style: buttonStyles, children: [_jsx("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", width: "16px", height: "16px" }, children: _jsx(DownloadIcon, { size: 16 }) }), _jsx("span", { children: "Button" })] }) })), _jsx("div", { style: footerStyles, children: _jsx(Switch, { checked: theme === "dark", showIcons: true }) })] }))] }));
 }

package/dist/components/MenuItem.d.ts

@@ -0,0 +1,13 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+export type MenuItemState = "Default" | "Hovered" | "Active" | "Disabled";
+export interface MenuItemProps extends Omit<ComponentPropsWithRef<"button">, "onClick"> {
+    menuTitle?: string;
+    iconStart?: boolean;
+    iconStart1?: ReactNode | null;
+    iconEnd?: boolean;
+    iconEnd1?: ReactNode | null;
+    state?: MenuItemState;
+    onClick?: () => void;
+}
+export declare function MenuItem({ menuTitle, iconStart, iconStart1, iconEnd, iconEnd1, state, onClick, className, style, ...rest }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuItem.d.ts.map

package/dist/components/MenuItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../src/components/MenuItem.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1E,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,qBAAqB,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,QAAQ,CAAC,EACvB,SAAuB,EACvB,SAAgB,EAChB,UAAiB,EACjB,OAAc,EACd,QAAe,EACf,KAAiB,EACjB,OAAO,EACP,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,aAAa,2CAiIf"}

package/dist/components/MenuItem.js

@@ -0,0 +1,90 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { UserPersonIcon, ChevronRightIcon } from "../icons";
+export function MenuItem({ menuTitle = "Menu Item", iconStart = true, iconStart1 = null, iconEnd = true, iconEnd1 = null, state = "Default", onClick, className, style, ...rest }) {
+    const isActive = state === "Active";
+    const isDisabled = state === "Disabled";
+    const isHovered = state === "Hovered";
+    const isDefault = state === "Default";
+    // Background colors based on state
+    const backgroundColor = isActive
+        ? "var(--bg-primary-tonal)"
+        : isHovered
+            ? "var(--bg-page-secondary)"
+            : isDisabled
+                ? "var(--bg-page-primary)"
+                : "var(--bg-page-primary)";
+    // Text colors based on state
+    const textColor = isActive
+        ? "var(--fg-primary-on-tonal)"
+        : isDisabled
+            ? "var(--fg-on-disabled)"
+            : isHovered
+                ? "var(--fg-neutral)"
+                : "var(--fg-neutral-secondary)";
+    // Icon colors based on state
+    const iconColor = isActive
+        ? "var(--fg-primary-on-tonal)"
+        : isDisabled
+            ? "var(--fg-on-disabled)"
+            : isHovered
+                ? "var(--fg-neutral)"
+                : "var(--fg-neutral-secondary)";
+    // Chevron colors based on state
+    const chevronColor = isActive
+        ? "var(--fg-primary-on-tonal)"
+        : isDisabled
+            ? "var(--fg-on-disabled)"
+            : "var(--fg-neutral)";
+    // Border for disabled state
+    const borderStyle = isDisabled
+        ? "var(--border-width-25) solid var(--border-neutral-tertiary)"
+        : "none";
+    const containerStyles = {
+        display: "flex",
+        gap: "var(--spacing-200)",
+        alignItems: "center",
+        padding: "var(--spacing-200) var(--spacing-200)",
+        borderRadius: "var(--corner-radius-200)",
+        width: "100%",
+        backgroundColor,
+        border: borderStyle,
+        cursor: isDisabled ? "not-allowed" : onClick ? "pointer" : "default",
+        transition: "background-color 0.2s ease, border-color 0.2s ease",
+        ...style,
+    };
+    return (_jsxs("button", { type: "button", className: className, style: containerStyles, onClick: isDisabled ? undefined : onClick, disabled: isDisabled, ...rest, children: [iconStart && (_jsx("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "20px",
+                    height: "20px",
+                    flexShrink: 0,
+                    color: iconColor,
+                }, children: iconStart1 || _jsx(UserPersonIcon, { size: 20 }) })), _jsx("p", { style: {
+                    fontFamily: "var(--font-secondary)",
+                    fontSize: "var(--body-small-text-size)",
+                    lineHeight: "var(--body-small-line-height)",
+                    fontWeight: isActive ? "var(--font-weight-secondary-semibold)" : "var(--font-weight-secondary-medium)",
+                    color: textColor,
+                    margin: 0,
+                    flex: 1,
+                    textAlign: "left",
+                }, children: menuTitle }), iconEnd && !isDisabled && (_jsx("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "16px",
+                    height: "16px",
+                    flexShrink: 0,
+                    color: chevronColor,
+                }, children: iconEnd1 || _jsx(ChevronRightIcon, { size: 16 }) })), iconEnd && isDisabled && (_jsx("div", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    width: "16px",
+                    height: "16px",
+                    flexShrink: 0,
+                    color: chevronColor,
+                }, children: iconEnd1 || _jsx(ChevronRightIcon, { size: 16 }) }))] }));
+}

package/dist/index.d.ts

@@ -5,9 +5,10 @@ export { Switch } from "./components/Switch";
 export { Input } from "./components/Input";
 export { Avatar } from "./components/Avatar";
 export { Chip } from "./components/Chip";
-export { Menu } from "./components/Menu";
+export { Menu, type MenuItem as MenuItemData } from "./components/Menu";
+export { MenuItem, type MenuItemProps, type MenuItemState } from "./components/MenuItem";
 export { RadioButton } from "./components/RadioButton";
-export type { ButtonProps, ButtonVariant, ButtonSize, CornerRadiusStep, JustifyContent, ButtonState } from "./components/Button";
+export type { ButtonProps, ButtonVariant, ButtonSize, CornerRadiusStep, JustifyContent, ButtonState, ButtonColor } from "./components/Button";
 export type { CardProps, CardType, ProductCardSize, ProductCardStatus, ExperienceCardType, GenericCardStatus } from "./components/Card";
 export type { CheckboxProps, CheckboxStatus } from "./components/Checkbox";
 export type { SwitchProps, SwitchStatus } from "./components/Switch";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AACjI,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxI,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGpF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,IAAI,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGvD,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAC9I,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,eAAe,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACxI,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAC3E,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAC7E,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC3G,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACxE,YAAY,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGpF,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AAGlF,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EACV,cAAc,EACd,aAAa,EACb,YAAY,EACZ,eAAe,EACf,eAAe,EACf,WAAW,GACZ,MAAM,gBAAgB,CAAC"}

package/dist/index.js

@@ -7,6 +7,7 @@ export { Input } from "./components/Input";
 export { Avatar } from "./components/Avatar";
 export { Chip } from "./components/Chip";
 export { Menu } from "./components/Menu";
+export { MenuItem } from "./components/MenuItem";
 export { RadioButton } from "./components/RadioButton";
 // Providers
 export { ThemeProvider, useTheme, useThemeSafe } from "./providers/ThemeProvider";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "beacon-ui",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "description": "Beacon Design System - Components and tokens",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",