@moderneinc/neo-styled-components 2.6.0 → 2.7.0-next.4bcf59

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { shadows, semanticColors, colors, spacing, typography, borderRadius } from '@moderneinc/neo-design';
+import { semanticColors, colors, spacing, typography, borderRadius, shadows } from '@moderneinc/neo-design';
 import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
@@ -7,12 +7,13 @@ import Chip, { chipClasses } from '@mui/material/Chip';
 import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
-import React, { forwardRef, createElement, useState, useMemo, useRef, useEffect } from 'react';
+import React, { forwardRef, createElement, useRef, useCallback, useState, useMemo, useEffect } from 'react';
 import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
 import CircularProgress from '@mui/material/CircularProgress';
-import MuiButtonGroup, { buttonGroupClasses } from '@mui/material/ButtonGroup';
+import MuiToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
+import MuiToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 import Checkbox, { checkboxClasses } from '@mui/material/Checkbox';
 import { useGridApiContext, useGridSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, GridPanelWrapper, useGridApiRef, gridClasses as gridClasses$1, DataGridPro, ColumnsPanelTrigger, ToolbarButton, gridFilterModelSelector, FilterPanelTrigger, Toolbar } from '@mui/x-data-grid-pro';
 import Button, { buttonClasses } from '@mui/material/Button';
@@ -35,6 +36,9 @@ import { PickersShortcuts } from '@mui/x-date-pickers/PickersShortcuts';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { dateRangePickerDayClasses } from '@mui/x-date-pickers-pro/DateRangePickerDay';
 import Badge, { badgeClasses } from '@mui/material/Badge';
+import { listClasses } from '@mui/material/List';
+import Menu from '@mui/material/Menu';
+import { paperClasses } from '@mui/material/Paper';
 import FormControl from '@mui/material/FormControl';
 import FormHelperText, { formHelperTextClasses } from '@mui/material/FormHelperText';
 import ListItemButton, { listItemButtonClasses } from '@mui/material/ListItemButton';
@@ -42,9 +46,6 @@ import ListItemIcon, { listItemIconClasses } from '@mui/material/ListItemIcon';
 import ListItemText, { listItemTextClasses } from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
 import MuiCard from '@mui/material/Card';
-import { listClasses } from '@mui/material/List';
-import Menu from '@mui/material/Menu';
-import { paperClasses } from '@mui/material/Paper';
 import Dialog, { dialogClasses } from '@mui/material/Dialog';
 import DialogActions, { dialogActionsClasses } from '@mui/material/DialogActions';
 import DialogContent, { dialogContentClasses } from '@mui/material/DialogContent';
@@ -60,22 +61,20 @@ import Switch, { switchClasses } from '@mui/material/Switch';
 import { useTreeItemModel } from '@mui/x-tree-view/hooks';
 import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
-import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
-import ToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 
 /**
- * Outline-based focus ring styles derived from Neo shadow tokens.
+ * Outline-based focus ring styles derived from Neo border tokens.
  * Uses CSS outline (not box-shadow) so focus rings are never clipped by overflow:hidden.
  *
- * Produces a double-ring effect: a white inner gap (via outline-offset) and a blue outer ring.
+ * Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
  */
 const focusRingStyles = {
-    outline: `${shadows.focusBlue2.spread - shadows.focusWhite1.spread}px solid ${shadows.focusBlue2.shadow}`,
-    outlineOffset: `${shadows.focusWhite1.spread}px`,
+    outline: `2px solid ${semanticColors.border.focus}`,
+    outlineOffset: '2px',
 };
 
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Avatar variant type without global augmentation
-const StyledAvatar = styled(Avatar, {
+const StyledAvatar$1 = styled(Avatar, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'variant',
 })(({ theme, size = 'medium', variant = 'circular' }) => ({
     boxSizing: 'border-box',
@@ -146,7 +145,7 @@ const AvatarContainer = styled(Box)(({ size = 'medium' }) => ({
 /**
  * NeoAvatar - User avatar component based on MUI Avatar
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4214-58134
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=9600-185
  *
  * Figma Props Mapping:
  * - Figma Type "Initials" → variant="initials", size="small" (20px)
@@ -177,7 +176,7 @@ const AvatarContainer = styled(Box)(({ size = 'medium' }) => ({
  */
 const NeoAvatar = ({ size = 'medium', variant = 'circular', ...props }) => {
     // shouldForwardProp filters out size and variant from being passed to the DOM
-    const avatar = jsx(StyledAvatar, { size: size, variant: variant, ...props });
+    const avatar = jsx(StyledAvatar$1, { size: size, variant: variant, ...props });
     // Medium size with circular variant (image) gets wrapped in white container
     if (size === 'medium' && variant === 'circular') {
         return jsx(AvatarContainer, { size: size, children: avatar });
@@ -219,7 +218,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorDefault}`]: {
         backgroundColor: semanticColors.status.neutral.light,
         color: semanticColors.status.neutral.dark,
-        border: `1px solid ${semanticColors.status.neutral.medium}80`,
+        border: `1px solid ${semanticColors.status.neutral.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.neutral.dark,
         },
@@ -228,7 +227,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorError}`]: {
         backgroundColor: semanticColors.status.error.light,
         color: semanticColors.status.error.dark,
-        border: `1px solid ${semanticColors.status.error.medium}80`,
+        border: `1px solid ${semanticColors.status.error.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.error.dark,
         },
@@ -237,7 +236,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorWarning}`]: {
         backgroundColor: semanticColors.status.warning.light,
         color: semanticColors.status.warning.dark,
-        border: `1px solid ${semanticColors.status.warning.medium}80`,
+        border: `1px solid ${semanticColors.status.warning.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.warning.dark,
         },
@@ -246,7 +245,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorSuccess}`]: {
         backgroundColor: semanticColors.status.success.light,
         color: semanticColors.status.success.dark,
-        border: `1px solid ${semanticColors.status.success.medium}80`,
+        border: `1px solid ${semanticColors.status.success.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.success.dark,
         },
@@ -255,7 +254,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorInfo}`]: {
         backgroundColor: semanticColors.status.info.light,
         color: semanticColors.status.info.dark,
-        border: `1px solid ${semanticColors.status.info.medium}80`,
+        border: `1px solid ${semanticColors.status.info.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.info.dark,
         },
@@ -1066,13 +1065,13 @@ const NeoBanner = ({ variant = 'light', message, messagePosition = 'left', linkT
             return semanticColors.surfaces.white;
         }
         if (variant === 'success') {
-            return semanticColors.status.success.medium;
+            return semanticColors.status.success.default;
         }
         if (variant === 'error') {
-            return semanticColors.status.error.medium;
+            return semanticColors.status.error.default;
         }
         if (variant === 'warning') {
-            return semanticColors.status.warning.medium;
+            return semanticColors.status.warning.default;
         }
         return colors.grey['800'];
     };
@@ -1104,7 +1103,7 @@ const StyledBreadcrumbLink = styled(Link, {
         color: current ? semanticColors.buttons.tertiary.hover : semanticColors.icons.hover,
     },
     '&:focus-visible': {
-        outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+        outline: `2px solid ${semanticColors.border.focus}`,
         outlineOffset: 2,
     },
 }));
@@ -1194,7 +1193,7 @@ const StyledButtonBase$1 = styled(ButtonBase, {
         },
         // Focus visible for keyboard navigation
         [`&.${buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -1234,7 +1233,7 @@ const StyledButtonBase$1 = styled(ButtonBase, {
                 : {
                     [`&.${buttonBaseClasses.disabled}`]: {
                         backgroundColor: semanticColors.buttons.secondary.disabledBackground,
-                        borderColor: semanticColors.buttons.secondary.disabledBorder,
+                        borderColor: semanticColors.border.secondary,
                         color: semanticColors.typography.button.disabled,
                     },
                 }),
@@ -1362,40 +1361,102 @@ function NeoButton({ variant = 'primary', size = 'medium', loading = false, chil
 }
 NeoButton.displayName = 'NeoButton';
 
+const StyledButtonTab = styled(MuiToggleButton)(({ theme }) => ({
+    fontFamily: typography.fontFamily.body,
+    fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    lineHeight: 1,
+    color: semanticColors.typography.tab.inactive,
+    backgroundColor: 'transparent',
+    border: 'none',
+    padding: theme.spacing(1, 1.5),
+    cursor: 'pointer',
+    textTransform: 'none',
+    transition: theme.transitions.create(['color'], {
+        duration: theme.transitions.duration.short,
+    }),
+    '&:hover': {
+        color: semanticColors.typography.tab.active,
+    },
+    '&.Mui-focusVisible': {
+        outline: `2px solid ${semanticColors.border.focus}`,
+        outlineOffset: -2,
+        borderRadius: borderRadius.xXS,
+    },
+    '&.Mui-disabled': {
+        color: semanticColors.typography.button.disabled,
+        cursor: 'default',
+        pointerEvents: 'none',
+    },
+}));
+/**
+ * Syncs aria-selected with MUI's Mui-selected class via MutationObserver.
+ * MUI ToggleButton computes selection internally from context and applies
+ * the Mui-selected class — we mirror that to aria-selected for tab semantics.
+ */
+function useTabAriaSync() {
+    const observerRef = useRef(null);
+    return useCallback((node) => {
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        if (!node)
+            return;
+        const sync = () => {
+            node.setAttribute('role', 'tab');
+            node.setAttribute('aria-selected', String(node.classList.contains('Mui-selected')));
+        };
+        sync();
+        observerRef.current = new MutationObserver(sync);
+        observerRef.current.observe(node, { attributes: true, attributeFilter: ['class'] });
+    }, []);
+}
 /**
- * Styled ButtonGroup that implements Neo design system styling
+ * NeoButtonTab - A tab-style toggle button for use within NeoButtonGroup
  *
- * The ButtonGroup uses MUI's built-in functionality for:
- * - Button grouping and spacing
- * - Orientation handling
- * - Disabled state management
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4106-11048
+ */
+const NeoButtonTab = ({ children, ...props }) => {
+    const tabRef = useTabAriaSync();
+    return (jsx(StyledButtonTab, { ref: tabRef, ...props, children: children }));
+};
+NeoButtonTab.displayName = 'NeoButtonTab';
+
+/**
+ * Styled toggle button group that implements the Figma "Button tab group" design.
+ *
+ * Built on MUI ToggleButtonGroup which provides:
+ * - Selection state management (value/onChange/exclusive)
+ * - Size and disabled propagation via context
+ * - Positional classes (firstButton/middleButton/lastButton)
  *
- * Custom styling focuses on:
- * - Border radius (pill shape with borderRadius.full)
+ * Custom styling:
+ * - Pill-shaped border (borderRadius.full)
  * - Size variants (small=32px, medium=40px)
  * - Border colors using semantic tokens
- * - Active/inactive button states (handled by individual buttons)
+ * - Selected state colors from Neo design tokens
  */
-const StyledButtonGroup = styled(MuiButtonGroup)(({ theme, size = 'medium' }) => {
+const StyledButtonTabGroup = styled(MuiToggleButtonGroup)(({ theme, size = 'medium' }) => {
     const sizeStyles = {
         small: {
-            height: 32,
+            height: spacing.spacing_4,
         },
         medium: {
             height: spacing.spacing_5,
         },
     };
     return {
-        // Apply pill-shaped border radius
         borderRadius: borderRadius.full,
         border: `1px solid ${semanticColors.border.primary}`,
-        // Override MUI's default button group styles
-        [`& .${buttonGroupClasses.grouped}`]: {
+        overflow: 'hidden',
+        // Style all grouped children
+        [`& .${toggleButtonGroupClasses.grouped}`]: {
+            flex: 1,
             minWidth: 'auto',
             height: sizeStyles[size].height,
             padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
             fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-            fontWeight: typography.fontWeight.semiBold,
+            fontWeight: typography.fontWeight.regular,
             lineHeight: 1,
             textTransform: 'none',
             border: 'none',
@@ -1406,40 +1467,35 @@ const StyledButtonGroup = styled(MuiButtonGroup)(({ theme, size = 'medium' }) =>
             transition: theme.transitions.create(['background-color', 'color', 'border-color'], {
                 duration: theme.transitions.duration.short,
             }),
-            // Active state (when button is selected/pressed)
-            '&:active, &.active': {
+            // Selected state — double selector for specificity over MUI ToggleButton defaults
+            [`&.${toggleButtonClasses.selected}.${toggleButtonClasses.selected}`]: {
                 backgroundColor: semanticColors.surfaces.white,
                 color: semanticColors.buttons.tertiary.default,
                 fontWeight: typography.fontWeight.semiBold,
             },
             // Hover state
-            '&:hover': {
+            [`&:hover, &.${toggleButtonClasses.selected}:hover`]: {
                 backgroundColor: semanticColors.buttons.secondary.hoverBackground,
-                borderRight: `1px solid ${semanticColors.border.primary}`,
             },
             // Focus visible for keyboard navigation
-            [`&.${buttonBaseClasses.focusVisible}`]: {
-                outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            '&.Mui-focusVisible': {
+                outline: `2px solid ${semanticColors.border.focus}`,
                 outlineOffset: -2,
                 zIndex: 1,
             },
             // First button: rounded left edge
-            [`&.${buttonGroupClasses.firstButton}`]: {
+            [`&.${toggleButtonGroupClasses.firstButton}`]: {
                 borderTopLeftRadius: borderRadius.full,
                 borderBottomLeftRadius: borderRadius.full,
             },
             // Last button: rounded right edge, no right border
-            [`&.${buttonGroupClasses.lastButton}`]: {
+            [`&.${toggleButtonGroupClasses.lastButton}`]: {
                 borderTopRightRadius: borderRadius.full,
                 borderBottomRightRadius: borderRadius.full,
                 borderRight: 'none',
             },
-            // Middle buttons: no border radius
-            [`&.${buttonGroupClasses.middleButton}`]: {
-                borderRadius: 0,
-            },
             // Disabled state
-            [`&.${buttonBaseClasses.disabled}`]: {
+            [`&.${toggleButtonClasses.disabled}`]: {
                 backgroundColor: semanticColors.buttons.secondary.disabledBackground,
                 color: semanticColors.typography.button.disabled,
                 cursor: 'not-allowed',
@@ -1449,29 +1505,27 @@ const StyledButtonGroup = styled(MuiButtonGroup)(({ theme, size = 'medium' }) =>
     };
 });
 /**
- * NeoButtonGroup - Button group component based on MUI ButtonGroup
+ * NeoButtonTabGroup - Button tab group container
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4106-11129
  *
  * Figma Props Mapping:
  * - Size (Sm|Md) → size prop (small|medium)
- * - Active button state → Controlled externally via button props or classes
+ * - Active button state → Controlled via value/onChange props
  *
  * Usage:
  * ```tsx
- * <NeoButtonGroup size="medium">
- *   <NeoButton>Button 1</NeoButton>
- *   <NeoButton>Button 2</NeoButton>
- *   <NeoButton>Button 3</NeoButton>
- * </NeoButtonGroup>
+ * <NeoButtonTabGroup value={selected} onChange={(_, val) => setSelected(val)} size="medium">
+ *   <NeoButtonTab value="tab1">Tab 1</NeoButtonTab>
+ *   <NeoButtonTab value="tab2">Tab 2</NeoButtonTab>
+ *   <NeoButtonTab value="tab3">Tab 3</NeoButtonTab>
+ * </NeoButtonTabGroup>
  * ```
- *
- * Note: To show active state, add 'active' class to the selected button
  */
-const NeoButtonGroup = ({ size = 'medium', variant = 'outlined', ...props }) => {
-    return jsx(StyledButtonGroup, { size: size, variant: variant, ...props });
+const NeoButtonTabGroup = ({ size = 'medium', exclusive = true, ...props }) => {
+    return jsx(StyledButtonTabGroup, { role: "tablist", size: size, exclusive: exclusive, ...props });
 };
-NeoButtonGroup.displayName = 'NeoButtonGroup';
+NeoButtonTabGroup.displayName = 'NeoButtonTabGroup';
 
 // Border radius per size (from Figma)
 const borderRadiusConfig = {
@@ -1545,7 +1599,7 @@ const StyledCheckbox = styled(Checkbox, {
         height: config.size,
         padding: 0,
         marginTop: size === 'xs' ? 3 : 2,
-        color: semanticColors.border.input,
+        color: semanticColors.border.primary,
         flexShrink: 0,
         // Root element
         [`&.${checkboxClasses.root}`]: {
@@ -1568,20 +1622,20 @@ const StyledCheckbox = styled(Checkbox, {
         },
         // Disabled state
         [`&.${checkboxClasses.disabled}`]: {
-            color: semanticColors.border.input,
+            color: semanticColors.border.primary,
             cursor: 'not-allowed',
             // When checked and disabled
             [`&.${checkboxClasses.checked}`]: {
-                color: semanticColors.border.input,
+                color: semanticColors.border.primary,
             },
             // When indeterminate and disabled
             [`&.${checkboxClasses.indeterminate}`]: {
-                color: semanticColors.border.input,
+                color: semanticColors.border.primary,
             },
         },
         // Focus visible for keyboard navigation
         '&.Mui-focusVisible': {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
             borderRadius: config.borderRadius,
         },
@@ -1711,7 +1765,7 @@ const StyledButtonBase = styled(ButtonBase, {
         cursor: 'text',
         // Focus visible for keyboard navigation
         [`&.${buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -1782,7 +1836,7 @@ const StyledSearchField = styled(TextField)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(typography.fontSize.default),
         borderRadius: borderRadius.input,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.input}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         paddingTop: spacing.spacing_1,
         paddingBottom: spacing.spacing_1,
         paddingLeft: spacing.spacing_1_1_2,
@@ -1993,43 +2047,32 @@ const Shortcut = styled('span')(({ theme }) => ({
     backgroundColor: semanticColors.surfaces.white,
 }));
 /**
- * NeoMenuItem - Menu item component based on MUI MenuItem
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8649
+ * NeoDropdownMenuItem - Dropdown menu item component based on MUI MenuItem
  *
- * Figma Props Mapping:
- * - Figma "Dropdown - Menu" component uses Type (Avatar|Button|Icon) and Open (True|False)
- *   to control the menu trigger. NeoMenuItem is the individual item inside the menu.
- * - Text label → children prop (mapped via figma.children)
- * - selected → selected prop (React-controlled)
- * - disabled → disabled prop (React-controlled)
- * - Hover state → CSS :hover (not mapped)
- * - Icon slot → icon prop (not mappable - ReactNode)
- * - Secondary text → secondaryText prop (not mappable - ReactNode/string)
- * - Keyboard shortcut → shortcut prop (not mappable - ReactNode/string)
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8584
  *
  * @example
  * ```tsx
  * // With icon and shortcut
- * <NeoMenuItem icon={<UserIcon />} shortcut="⌘+P">
+ * <NeoDropdownMenuItem icon={<UserIcon />} shortcut="⌘+P">
  *   View profile
- * </NeoMenuItem>
+ * </NeoDropdownMenuItem>
  *
  * // With secondary text (user list pattern from Figma node 4305:41844)
- * <NeoMenuItem secondaryText="@phoenix">Phoenix Baker</NeoMenuItem>
- * <NeoMenuItem secondaryText="@olivia">Olivia Rhye</NeoMenuItem>
+ * <NeoDropdownMenuItem secondaryText="@phoenix">Phoenix Baker</NeoDropdownMenuItem>
+ * <NeoDropdownMenuItem secondaryText="@olivia">Olivia Rhye</NeoDropdownMenuItem>
  *
  * // Disabled state
- * <NeoMenuItem disabled>Disabled item</NeoMenuItem>
+ * <NeoDropdownMenuItem disabled>Disabled item</NeoDropdownMenuItem>
  * ```
  */
-const NeoMenuItem = ({ icon, shortcut, secondaryText, children, ...props }) => {
+const NeoDropdownMenuItem = ({ icon, shortcut, secondaryText, children, ...props }) => {
     return (jsx(StyledMenuItem, { ...props, children: jsxs(MenuItemContent, { children: [icon && jsx(IconWrapper$1, { children: icon }), jsxs(LabelContainer$3, { children: [jsx(Label$3, { children: children }), secondaryText && jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsx(Shortcut, { children: shortcut })] }) }));
 };
-NeoMenuItem.displayName = 'NeoMenuItem';
+NeoDropdownMenuItem.displayName = 'NeoDropdownMenuItem';
 
 /**
- * Custom chevron icon for select dropdown
+ * Custom chevron icon for dropdown
  * Must accept props from MUI Select to work correctly
  */
 const ChevronDownIcon = (props) => (jsx(ChevronDown, { ...props, size: spacing.spacing_2_1_2, color: semanticColors.typography.input.default, style: { ...props.style } }));
@@ -2039,11 +2082,11 @@ const ChevronDownIcon = (props) => (jsx(ChevronDown, { ...props, size: spacing.s
 const StyledSelect = styled(MuiSelect)({
     minHeight: spacing.spacing_5,
     backgroundColor: semanticColors.input.background,
-    border: `1px solid ${semanticColors.border.input}`,
+    border: `1px solid ${semanticColors.border.primary}`,
     borderRadius: `${borderRadius.input}px`,
     '&:hover': {
         backgroundColor: semanticColors.input.hoverBackground,
-        borderColor: semanticColors.border.input,
+        borderColor: semanticColors.border.primary,
     },
     '&.Mui-focused': {
         backgroundColor: semanticColors.input.background,
@@ -2069,25 +2112,24 @@ const StyledSelect = styled(MuiSelect)({
     },
 });
 /**
- * NeoSelect - Select dropdown component with Neo design system styling
+ * NeoDropdown - Dropdown select component with Neo design system styling
  *
  * A styled version of MUI's Select that uses Neo design tokens, Lucide ChevronDown icon,
- * and NeoMenu/NeoMenuItem for the dropdown list.
+ * and NeoDropdownMenu/NeoDropdownMenuItem for the dropdown list.
  *
  * @example
  * ```tsx
- * import { NeoSelect, NeoSelectOption } from '@moderneinc/neo-styled-components'
+ * import { NeoDropdown, NeoDropdownOption } from '@moderneinc/neo-styled-components'
  *
- * <NeoSelect value={value} onChange={handleChange}>
- *   <NeoSelectOption value="option1">Option 1</NeoSelectOption>
- *   <NeoSelectOption value="option2">Option 2</NeoSelectOption>
- * </NeoSelect>
+ * <NeoDropdown value={value} onChange={handleChange}>
+ *   <NeoDropdownOption value="option1">Option 1</NeoDropdownOption>
+ *   <NeoDropdownOption value="option2">Option 2</NeoDropdownOption>
+ * </NeoDropdown>
  * ```
  */
-const NeoSelect = (props) => {
+const NeoDropdown = (props) => {
     return (jsx(StyledSelect, { ...props, IconComponent: ChevronDownIcon, variant: "standard", MenuProps: {
             ...props.MenuProps,
-            // Apply NeoMenu styling to the dropdown
             PaperProps: {
                 sx: {
                     backgroundColor: semanticColors.surfaces.white,
@@ -2100,7 +2142,7 @@ const NeoSelect = (props) => {
             },
         } }));
 };
-NeoSelect.displayName = 'NeoSelect';
+NeoDropdown.displayName = 'NeoDropdown';
 
 /**
  * Icon components for DataGrid filter panel slots
@@ -2159,7 +2201,7 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
         position: 'relative',
         minHeight: spacing.spacing_5,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.input}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         borderRadius: `${borderRadius.input}px`,
         fontSize: typography.fontSize.default,
         fontWeight: typography.fontWeight.regular,
@@ -2167,11 +2209,11 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}:hover`]: {
         backgroundColor: semanticColors.input.hoverBackground,
-        borderColor: semanticColors.border.input,
+        borderColor: semanticColors.border.primary,
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}.${inputBaseClasses.focused}`]: {
         backgroundColor: semanticColors.input.background,
-        borderColor: semanticColors.border.input,
+        borderColor: semanticColors.border.primary,
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}::before`]: {
         display: 'none',
@@ -2595,11 +2637,11 @@ const outlinedColorStyles = {
     },
 };
 const filledColorStyles = {
-    default: semanticColors.status.neutral.medium,
-    error: semanticColors.status.error.medium,
-    warning: semanticColors.status.warning.medium,
-    success: semanticColors.status.success.medium,
-    info: semanticColors.status.info.medium,
+    default: semanticColors.status.neutral.default,
+    error: semanticColors.status.error.default,
+    warning: semanticColors.status.warning.default,
+    success: semanticColors.status.success.default,
+    info: semanticColors.status.info.default,
     violet: colors.violet[500],
     beta: colors.digitalBlue[300],
 };
@@ -3207,7 +3249,7 @@ const StyledIconButton = styled(IconButton, {
         },
         // Focus visible for keyboard navigation
         '&:focus-visible': {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -3516,16 +3558,16 @@ const StyledDivider = styled(Divider)(({ theme }) => ({
  * Generic divider component that can be used in menus, lists, cards, or any layout
  * that needs visual separation between content sections.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8649
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4633-39807
  *
  * @example
  * ```tsx
  * // In a menu
- * <NeoMenu>
- *   <NeoMenuItem>Settings</NeoMenuItem>
+ * <NeoDropdownMenu>
+ *   <NeoDropdownMenuItem>Settings</NeoDropdownMenuItem>
  *   <NeoDivider />
- *   <NeoMenuItem>Sign out</NeoMenuItem>
- * </NeoMenu>
+ *   <NeoDropdownMenuItem>Sign out</NeoDropdownMenuItem>
+ * </NeoDropdownMenu>
  *
  * // In a card
  * <Card>
@@ -3547,7 +3589,7 @@ const sizeMap = {
 };
 const StyledBadge = styled(Badge)(({ ownerState }) => {
     const size = sizeMap[ownerState.size];
-    const color = semanticColors.status[ownerState.color].medium;
+    const color = semanticColors.status[ownerState.color].default;
     return {
         [`& .${badgeClasses.badge}`]: {
             width: size,
@@ -3575,7 +3617,7 @@ const StyledBadge = styled(Badge)(({ ownerState }) => {
  */
 const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...props }) => {
     const dotSize = sizeMap[size];
-    const mediumColor = semanticColors.status[color].medium;
+    const mediumColor = semanticColors.status[color].default;
     const lightColor = semanticColors.status[color].light;
     // For outline variant, use SVG for precise control
     const renderDot = () => {
@@ -3596,6 +3638,47 @@ const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...prop
 };
 NeoDot.displayName = 'NeoDot';
 
+const StyledMenu = styled(Menu)(({ theme }) => ({
+    [`& .${paperClasses.root}`]: {
+        backgroundColor: semanticColors.surfaces.white,
+        borderRadius: borderRadius.s,
+        border: `1px solid ${semanticColors.border.primary}`,
+        boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
+        minWidth: 200,
+        marginTop: theme.spacing(1),
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+    },
+    [`& .${listClasses.root}`]: {
+        padding: 0,
+    },
+}));
+/**
+ * NeoDropdownMenu - Dropdown menu component based on MUI Menu
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11141-4980
+ *
+ * @example
+ * ```tsx
+ * const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+ * const open = Boolean(anchorEl);
+ *
+ * <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open Menu</Button>
+ * <NeoDropdownMenu
+ *   open={open}
+ *   anchorEl={anchorEl}
+ *   onClose={() => setAnchorEl(null)}
+ * >
+ *   <NeoDropdownMenuItem icon={<Icon />} shortcut="⌘+P">View profile</NeoDropdownMenuItem>
+ *   <NeoDropdownMenuItem>Settings</NeoDropdownMenuItem>
+ * </NeoDropdownMenu>
+ * ```
+ */
+const NeoDropdownMenu = ({ children, ...props }) => {
+    return jsx(StyledMenu, { ...props, children: children });
+};
+NeoDropdownMenu.displayName = 'NeoDropdownMenu';
+
 const filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
 const StyledChip = styled(Chip, {
     shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
@@ -3941,6 +4024,56 @@ const NeoFooter = ({ variant = 'pagination', showShadow = false, loading = false
 };
 NeoFooter.displayName = 'NeoFooter';
 
+/**
+ * Shared color palette for avatar components (GeneralAvatar, NavigationAvatar).
+ * Maps color index (1-7) to background color token pairs.
+ */
+const avatarColorPalette = {
+    1: { bg: colors.digitalBlue[100] },
+    2: { bg: colors.digitalGreen[100] },
+    3: { bg: colors.gold[100] },
+    4: { bg: colors.red[100] },
+    5: { bg: colors.violet[100] },
+    6: { bg: colors.tealGreen[100] },
+    7: { bg: colors.orange[100] },
+};
+
+const sizeConfig$1 = {
+    small: { width: spacing.spacing_4, height: spacing.spacing_4, fontSize: typography.fontSize.xs },
+    medium: { width: spacing.spacing_5, height: spacing.spacing_5, fontSize: typography.fontSize.sm },
+};
+const StyledAvatar = styled(Avatar, {
+    shouldForwardProp: prop => prop !== 'avatarSize' && prop !== 'colorIndex',
+})(({ theme, avatarSize, colorIndex }) => {
+    const size = sizeConfig$1[avatarSize];
+    const palette = avatarColorPalette[colorIndex];
+    return {
+        boxSizing: 'border-box',
+        width: size.width,
+        height: size.height,
+        fontSize: theme.typography.pxToRem(size.fontSize),
+        fontFamily: typography.fontFamily.body,
+        fontWeight: typography.fontWeight.regular,
+        lineHeight: 1,
+        color: semanticColors.typography.body,
+        backgroundColor: palette ? palette.bg : undefined,
+        border: `1px solid ${semanticColors.border.primary}`,
+        '&:focus-visible': {
+            ...focusRingStyles,
+            borderColor: semanticColors.border.focus,
+        },
+    };
+});
+/**
+ * NeoGeneralAvatar - Avatar with image or colored initials display
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
+ */
+const NeoGeneralAvatar = ({ size = 'medium', colorIndex = 0, children, ...props }) => {
+    return (jsx(StyledAvatar, { avatarSize: size, colorIndex: colorIndex, ...props, children: children }));
+};
+NeoGeneralAvatar.displayName = 'NeoGeneralAvatar';
+
 const customProps$1 = ['iconSize'];
 const StyledIconWrapper = styled('div', {
     shouldForwardProp: prop => !customProps$1.includes(prop),
@@ -4122,9 +4255,9 @@ const StyledInputBase = styled(InputBase, {
         },
         medium: {
             height: spacing.spacing_5_1_2,
-            padding: `${spacing.spacing_2}px ${spacing.spacing_3}px ${spacing.spacing_2}px ${startAdornment ? 0 : spacing.spacing_2}px`,
+            padding: `${spacing.spacing_1_1_4}px ${spacing.spacing_2}px ${spacing.spacing_1_1_4}px ${startAdornment ? 0 : spacing.spacing_2}px`,
             fontSize: theme.typography.pxToRem(typography.fontSize.default),
-            borderRadius: borderRadius.input,
+            borderRadius: spacing.spacing_8,
         },
     };
     const sizeStyles = sizeConfig[size];
@@ -4133,7 +4266,7 @@ const StyledInputBase = styled(InputBase, {
         fontSize: sizeStyles.fontSize,
         borderRadius: sizeStyles.borderRadius,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${destructive ? semanticColors.status.error.medium : semanticColors.border.input}`,
+        border: `1px solid ${destructive ? semanticColors.status.error.default : semanticColors.border.primary}`,
         transition: theme.transitions.create(['border-color', 'background-color'], {
             duration: theme.transitions.duration.short,
         }),
@@ -4147,19 +4280,21 @@ const StyledInputBase = styled(InputBase, {
         // Hover state
         '&:hover': {
             backgroundColor: semanticColors.input.hoverBackground,
-            borderColor: destructive ? semanticColors.status.error.medium : semanticColors.border.input,
+            borderColor: destructive
+                ? semanticColors.status.error.default
+                : semanticColors.border.primary,
         },
         // Focused state
         [`&.${inputBaseClasses.focused}`]: {
             backgroundColor: semanticColors.input.background,
             borderColor: destructive
-                ? semanticColors.status.error.medium
+                ? semanticColors.status.error.default
                 : semanticColors.buttons.primary.default,
         },
         // Disabled state
         [`&.${inputBaseClasses.disabled}`]: {
             backgroundColor: semanticColors.input.disabledBackground,
-            borderColor: semanticColors.border.input,
+            borderColor: semanticColors.border.primary,
             color: semanticColors.icons.disabled,
             [`& .${inputBaseClasses.input}`]: {
                 WebkitTextFillColor: semanticColors.icons.disabled,
@@ -4167,11 +4302,11 @@ const StyledInputBase = styled(InputBase, {
         },
         // Error state
         [`&.${inputBaseClasses.error}`]: {
-            borderColor: semanticColors.status.error.medium,
+            borderColor: semanticColors.status.error.default,
         },
         // Adornment styling
         [`& .${inputAdornmentClasses.root}`]: {
-            color: destructive ? semanticColors.status.error.medium : semanticColors.icons.placeholder,
+            color: destructive ? semanticColors.status.error.default : semanticColors.icons.placeholder,
         },
     };
 });
@@ -4185,7 +4320,7 @@ const StyledFormHelperText = styled(FormHelperText, {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         color: semanticColors.typography.input.helper,
         [`&.${formHelperTextClasses.error}`]: {
-            color: semanticColors.status.error.medium,
+            color: semanticColors.status.error.default,
         },
         [`&.${formHelperTextClasses.disabled}`]: {
             color: semanticColors.icons.disabled,
@@ -4485,7 +4620,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
     transition: theme.transitions.create(['border', 'background-color']),
     // Active (selected) state
     [`&.${listItemButtonClasses.selected}`]: {
-        border: `2px solid ${semanticColors.border.tabActive}`,
+        border: `2px solid ${semanticColors.buttons.primary.default}`,
         backgroundColor: theme.palette.common.white,
         '&:hover': {
             backgroundColor: theme.palette.common.white,
@@ -4519,9 +4654,9 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
     },
     // Focus state
     [`&.${listItemButtonClasses.focusVisible}`]: {
-        outline: `2px solid ${semanticColors.border.tabActive}`,
+        outline: `2px solid ${semanticColors.buttons.primary.default}`,
         outlineOffset: 2,
-        border: `2px solid ${semanticColors.border.tabActive}`,
+        border: `2px solid ${semanticColors.buttons.primary.default}`,
         backgroundColor: theme.palette.common.white,
         [`& .${listItemIconClasses.root}`]: {
             color: semanticColors.icons.default,
@@ -4580,7 +4715,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
  * - showIcon → Conditional rendering of ListItemIcon child
  *
  * Design Tokens Used:
- * - semanticColors.border.tabActive (#2f42ff) - Active border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active border
  * - semanticColors.border.primary (#d1d5db) - Default/disabled border
  * - semanticColors.icons.default (#1f2937) - Active icon color
  * - semanticColors.icons.disabled (#d1d5db) - Deselected/disabled icon color
@@ -4613,17 +4748,17 @@ const StyledCard = styled(MuiCard, {
     flexDirection: 'column',
     gap: theme.spacing(2), // 16px
     backgroundColor: semanticColors.surfaces.card,
-    border: `1px solid ${selected ? semanticColors.border.tabActive : semanticColors.border.card}`,
+    border: `1px solid ${selected ? semanticColors.buttons.primary.default : semanticColors.border.primary}`,
     borderRadius: borderRadius.xS,
     boxShadow: selected ? activeShadow$1 : 'none',
     transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
-        borderColor: semanticColors.border.tabActive,
+        borderColor: semanticColors.buttons.primary.default,
         boxShadow: activeShadow$1,
     },
     '&:focus-visible': {
-        borderColor: semanticColors.border.tabActive,
+        borderColor: semanticColors.buttons.primary.default,
         ...focusRingStyles,
     },
     ...(disabled && {
@@ -4727,8 +4862,8 @@ const Description$1 = styled('p')(({ theme }) => ({
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background
  * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
- * - semanticColors.border.card (#d1d5db) - Default border
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
+ * - semanticColors.border.primary (#d1d5db) - Default border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border
  * - shadows.focusWhite1 - Inner white focus ring (2px spread)
  * - shadows.focusBlue2 - Outer blue focus ring (4px spread)
  * - colors.grey[800] (#1F2937) - Text color
@@ -4751,10 +4886,12 @@ const StyledLargeCard = styled(MuiCard, {
     const isActive = cardState === 'active';
     const isDisabled = cardState === 'disabled';
     const isFocused = cardState === 'focused';
-    const activeBorderColor = isLight ? semanticColors.border.tabActive : colors.digitalGreen[300];
+    const activeBorderColor = isLight
+        ? semanticColors.buttons.primary.default
+        : colors.digitalGreen[300];
     const defaultBorderColor = isLight
-        ? semanticColors.border.card
-        : `${semanticColors.border.card}80`;
+        ? semanticColors.border.primary
+        : `${semanticColors.border.primary}80`;
     return {
         width: 340,
         height: 162,
@@ -4770,7 +4907,7 @@ const StyledLargeCard = styled(MuiCard, {
         overflow: 'hidden',
         ...(isFocused && focusRingStyles),
         '&:focus-visible': {
-            borderColor: isLight ? semanticColors.border.tabActive : colors.digitalGreen[300],
+            borderColor: isLight ? semanticColors.buttons.primary.default : colors.digitalGreen[300],
             ...focusRingStyles,
         },
         ...(isDisabled && {
@@ -4850,8 +4987,8 @@ const ButtonsRow = styled('div')({
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#ffffff) - Light theme background
  * - colors.grey[800] (#1f2937) - Dark theme background
- * - semanticColors.border.card (#d1d5db) - Default border (50% opacity on dark)
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border (light theme)
+ * - semanticColors.border.primary (#d1d5db) - Default border (50% opacity on dark)
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border (light theme)
  * - colors.digitalGreen[300] (#88fe9b) - Active/focused border (dark theme)
  * - borderRadius.xS (4px) - Corner radius
  * - shadows.focusWhite1 + shadows.focusBlue2 - Focus ring
@@ -4863,67 +5000,13 @@ const NeoMarketplaceLargeCard = ({ state = 'default', cardTheme = 'light', showI
 };
 NeoMarketplaceLargeCard.displayName = 'NeoMarketplaceLargeCard';
 
-const StyledMenu = styled(Menu)(({ theme }) => ({
-    [`& .${paperClasses.root}`]: {
-        backgroundColor: semanticColors.surfaces.white,
-        borderRadius: borderRadius.s,
-        border: `1px solid ${semanticColors.border.primary}`,
-        boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
-        minWidth: 200,
-        marginTop: theme.spacing(1),
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(1),
-    },
-    [`& .${listClasses.root}`]: {
-        padding: 0,
-    },
-}));
-/**
- * NeoMenu - Dropdown menu component based on MUI Menu
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8649
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4305-41844 (Dropdown list pattern)
- *
- * Figma Props Mapping:
- * - Container shown in Figma is the Menu Paper component
- * - Menu items are styled separately via NeoMenuItem
- * - Any trigger component (Button, IconButton, etc.) can open the menu
- *
- * @example
- * ```tsx
- * const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
- * const open = Boolean(anchorEl);
- *
- * // Standard menu with icons and shortcuts
- * <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open Menu</Button>
- * <NeoMenu
- *   open={open}
- *   anchorEl={anchorEl}
- *   onClose={() => setAnchorEl(null)}
- * >
- *   <NeoMenuItem icon={<Icon />} shortcut="⌘+P">View profile</NeoMenuItem>
- *   <NeoMenuItem>Settings</NeoMenuItem>
- * </NeoMenu>
- *
- * // Dropdown list with secondary text (user list pattern)
- * <NeoMenu open={open} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}>
- *   <NeoMenuItem secondaryText="@phoenix">Phoenix Baker</NeoMenuItem>
- *   <NeoMenuItem secondaryText="@olivia" selected>Olivia Rhye</NeoMenuItem>
- * </NeoMenu>
- * ```
- */
-const NeoMenu = ({ children, ...props }) => {
-    return jsx(StyledMenu, { ...props, children: children });
-};
-NeoMenu.displayName = 'NeoMenu';
-
 // ============================================================================
 // NeoModal - Main Dialog Container
 // ============================================================================
 const StyledDialog = styled(Dialog)({
     [`& .${dialogClasses.paper}`]: {
         borderRadius: borderRadius.card,
-        border: `1px solid ${semanticColors.border.card}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         boxShadow: 'none',
     },
     [`& .${dialogClasses.container}`]: {
@@ -5106,6 +5189,34 @@ const NeoModalFooter = ({ leadingContent, children }) => {
 };
 NeoModalFooter.displayName = 'NeoModalFooter';
 
+const NavigationAvatarContainer = styled('div')({
+    display: 'flex',
+    boxSizing: 'border-box',
+    width: spacing.spacing_5_1_2,
+    height: spacing.spacing_5_1_2,
+    padding: spacing.spacing_3_4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '50%',
+    border: `1px solid ${semanticColors.border.primary}`,
+    backgroundColor: semanticColors.buttons.secondary.defaultBackground,
+    '&:focus-within': {
+        borderColor: semanticColors.border.focus,
+    },
+});
+/**
+ * NeoNavigationAvatar - Compact avatar for navigation contexts
+ *
+ * Wraps NeoGeneralAvatar (size="small") in a 44px container with 6px padding,
+ * providing a larger interactive area for navigation UI.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
+ */
+const NeoNavigationAvatar = ({ colorIndex = 0, children, ...props }) => {
+    return (jsx(NavigationAvatarContainer, { children: jsx(NeoGeneralAvatar, { size: "small", colorIndex: colorIndex, ...props, children: children }) }));
+};
+NeoNavigationAvatar.displayName = 'NeoNavigationAvatar';
+
 const customProps = ['selected'];
 const StyledRoot = styled(ButtonBase, {
     shouldForwardProp: prop => !customProps.includes(prop),
@@ -5445,7 +5556,7 @@ const StyledLinearProgress$1 = styled(LinearProgress, {
     // Cancelled variant uses warning color
     '&[data-variant="cancelled"]': {
         [`& .${linearProgressClasses.bar}`]: {
-            backgroundColor: semanticColors.status.warning.medium,
+            backgroundColor: semanticColors.status.warning.default,
         },
     },
 }));
@@ -5510,7 +5621,7 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(typography.fontSize.default),
         borderRadius: borderRadius.input,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.input}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         paddingTop: spacing.spacing_1,
         paddingBottom: spacing.spacing_1,
         paddingLeft: spacing.spacing_1_1_2,
@@ -5605,7 +5716,7 @@ NeoQuickFilter.displayName = 'NeoQuickFilter';
 const UncheckedIcon = ({ size }) => {
     const dimensions = size === 'small' ? 16 : 20;
     const radius = size === 'small' ? 8 : 10;
-    return (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Unchecked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: semanticColors.border.input, strokeWidth: "1", fill: "transparent" })] }));
+    return (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Unchecked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: semanticColors.border.primary, strokeWidth: "1", fill: "transparent" })] }));
 };
 const CheckedIcon = ({ size }) => {
     const dimensions = size === 'small' ? 16 : 20;
@@ -5861,19 +5972,19 @@ const StyledAlert$1 = styled(Alert, {
     const colorMap = {
         success: {
             light: semanticColors.status.success.light,
-            medium: semanticColors.status.success.medium,
+            medium: semanticColors.status.success.default,
         },
         error: {
             light: semanticColors.status.error.light,
-            medium: semanticColors.status.error.medium,
+            medium: semanticColors.status.error.default,
         },
         neutral: {
             light: semanticColors.status.neutral.light,
-            medium: semanticColors.status.neutral.medium,
+            medium: semanticColors.status.neutral.default,
         },
         info: {
             light: semanticColors.status.info.light,
-            medium: semanticColors.status.info.medium,
+            medium: semanticColors.status.info.default,
         },
     };
     const severityColors = colorMap[severity];
@@ -5944,10 +6055,10 @@ const StyledAlert$1 = styled(Alert, {
  * - Mode (Light|Dark) → variant ('outlined'|'filled')
  *
  * Design Tokens Used:
- * - status.success.light, status.success.medium
- * - status.error.light, status.error.medium
- * - status.neutral.light, status.neutral.medium
- * - status.info.light, status.info.medium
+ * - status.success.light, status.success.default
+ * - status.error.light, status.error.default
+ * - status.neutral.light, status.neutral.default
+ * - status.info.light, status.info.default
  * - typography.tooltip, typography.bodySecondary
  * - grey[800]
  * - fontSize.default, fontSize.sm
@@ -5984,7 +6095,7 @@ NeoStatusBanner.displayName = 'NeoStatusBanner';
 const NeoTabs = styled(MuiTabs)(() => ({
     minHeight: spacing.spacing_5,
     [`& .${tabsClasses.indicator}`]: {
-        backgroundColor: semanticColors.border.tabActive,
+        backgroundColor: semanticColors.buttons.primary.default,
         height: 2,
     },
     [`& .${tabsClasses.flexContainer}`]: {
@@ -6006,7 +6117,7 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
         fontWeight: typography.fontWeight.semiBold,
     },
     [`&.${buttonBaseClasses.focusVisible}`]: {
-        outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+        outline: `2px solid ${semanticColors.border.focus}`,
         outlineOffset: -2,
     },
     [`&.${tabClasses.disabled}`]: {
@@ -6086,17 +6197,17 @@ const StyledAlert = styled(Alert, {
         error: {
             backgroundColor: semanticColors.status.error.light,
             color: semanticColors.status.error.dark,
-            border: `1px solid ${semanticColors.status.error.medium}`,
+            border: `1px solid ${semanticColors.status.error.default}`,
         },
         success: {
             backgroundColor: semanticColors.status.success.light,
             color: semanticColors.status.success.dark,
-            border: `1px solid ${semanticColors.status.success.medium}`,
+            border: `1px solid ${semanticColors.status.success.default}`,
         },
         info: {
             backgroundColor: semanticColors.status.info.light,
             color: semanticColors.status.info.dark,
-            border: `1px solid ${semanticColors.status.info.medium}`,
+            border: `1px solid ${semanticColors.status.info.default}`,
         },
         download: {
             backgroundColor: semanticColors.surfaces.snackbarDarkMode,
@@ -6324,7 +6435,7 @@ const StyledSwitch = styled(Switch, {
             // Focus visible for keyboard navigation
             '&.Mui-focusVisible': {
                 [`& + .${switchClasses.track}`]: {
-                    outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+                    outline: `2px solid ${semanticColors.border.focus}`,
                     outlineOffset: 2,
                 },
             },
@@ -6665,7 +6776,7 @@ const StyledTreeView = styled(RichTreeViewPro)({
         backgroundColor: semanticColors.surfaces.listHover,
     },
     [`& .${treeItemClasses.content}.Mui-focused`]: {
-        boxShadow: `inset 0 0 0 2px ${semanticColors.buttons.primary.focus}`,
+        boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
         backgroundColor: 'transparent',
     },
     [`& .${treeItemClasses.content}.Mui-selected`]: {
@@ -6676,7 +6787,7 @@ const StyledTreeView = styled(RichTreeViewPro)({
     },
     [`& .${treeItemClasses.content}.Mui-selected.Mui-focused`]: {
         backgroundColor: semanticColors.surfaces.listHover,
-        boxShadow: `inset 0 0 0 2px ${semanticColors.buttons.primary.focus}`,
+        boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
     },
     [`& .${treeItemClasses.label}`]: {
         fontSize: typography.fontSize.xs,
@@ -6701,7 +6812,7 @@ const StyledTreeView = styled(RichTreeViewPro)({
 
 // Figma-exact border radius for toggle buttons — no matching design token
 const TOGGLE_BUTTON_BORDER_RADIUS = 14;
-const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+const StyledToggleButtonGroup = styled(MuiToggleButtonGroup)(({ theme }) => ({
     backgroundColor: colors.grey[50],
     padding: theme.spacing(0.625, 0.875),
     borderRadius: borderRadius.full,
@@ -6719,7 +6830,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
         },
     },
 }));
-const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
+const StyledToggleButton = styled(MuiToggleButton)(({ theme }) => ({
     padding: theme.spacing(0.625),
     minWidth: 'auto',
     color: semanticColors.icons.default,
@@ -6768,5 +6879,5 @@ NeoTypologyControl.displayName = 'NeoTypologyControl';
 
 const version = '0.0.0-development';
 
-export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
+export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoDropdown as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDropdown, NeoDropdownMenu, NeoDropdownMenuItem, NeoDropdownMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoDropdownMenu as NeoMenu, NeoDropdownMenuItem as NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoDropdown as NeoSelect, NeoDropdownMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
 //# sourceMappingURL=index.esm.js.map