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

package/dist/index.js

@@ -14,7 +14,8 @@ var Breadcrumbs = require('@mui/material/Breadcrumbs');
 var Link = require('@mui/material/Link');
 var ButtonBase = require('@mui/material/ButtonBase');
 var CircularProgress = require('@mui/material/CircularProgress');
-var MuiButtonGroup = require('@mui/material/ButtonGroup');
+var MuiToggleButton = require('@mui/material/ToggleButton');
+var MuiToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
 var Checkbox = require('@mui/material/Checkbox');
 var xDataGridPro = require('@mui/x-data-grid-pro');
 var Button = require('@mui/material/Button');
@@ -37,6 +38,9 @@ var PickersShortcuts = require('@mui/x-date-pickers/PickersShortcuts');
 var DateRangePicker = require('@mui/x-date-pickers-pro/DateRangePicker');
 var DateRangePickerDay = require('@mui/x-date-pickers-pro/DateRangePickerDay');
 var Badge = require('@mui/material/Badge');
+var List = require('@mui/material/List');
+var Menu = require('@mui/material/Menu');
+var Paper = require('@mui/material/Paper');
 var FormControl = require('@mui/material/FormControl');
 var FormHelperText = require('@mui/material/FormHelperText');
 var ListItemButton = require('@mui/material/ListItemButton');
@@ -44,9 +48,6 @@ var ListItemIcon = require('@mui/material/ListItemIcon');
 var ListItemText = require('@mui/material/ListItemText');
 var Typography = require('@mui/material/Typography');
 var MuiCard = require('@mui/material/Card');
-var List = require('@mui/material/List');
-var Menu = require('@mui/material/Menu');
-var Paper = require('@mui/material/Paper');
 var Dialog = require('@mui/material/Dialog');
 var DialogActions = require('@mui/material/DialogActions');
 var DialogContent = require('@mui/material/DialogContent');
@@ -62,22 +63,20 @@ var Switch = require('@mui/material/Switch');
 var hooks = require('@mui/x-tree-view/hooks');
 var TreeItem = require('@mui/x-tree-view/TreeItem');
 var RichTreeViewPro = require('@mui/x-tree-view-pro/RichTreeViewPro');
-var ToggleButton = require('@mui/material/ToggleButton');
-var ToggleButtonGroup = require('@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: `${neoDesign.shadows.focusBlue2.spread - neoDesign.shadows.focusWhite1.spread}px solid ${neoDesign.shadows.focusBlue2.shadow}`,
-    outlineOffset: `${neoDesign.shadows.focusWhite1.spread}px`,
+    outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
+    outlineOffset: '2px',
 };
 
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Avatar variant type without global augmentation
-const StyledAvatar = styles.styled(Avatar, {
+const StyledAvatar$1 = styles.styled(Avatar, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'variant',
 })(({ theme, size = 'medium', variant = 'circular' }) => ({
     boxSizing: 'border-box',
@@ -148,7 +147,7 @@ const AvatarContainer = styles.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)
@@ -179,7 +178,7 @@ const AvatarContainer = styles.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 = jsxRuntime.jsx(StyledAvatar, { size: size, variant: variant, ...props });
+    const avatar = jsxRuntime.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 jsxRuntime.jsx(AvatarContainer, { size: size, children: avatar });
@@ -221,7 +220,7 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     [`&.${Chip.chipClasses.colorDefault}`]: {
         backgroundColor: neoDesign.semanticColors.status.neutral.light,
         color: neoDesign.semanticColors.status.neutral.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.neutral.medium}80`,
+        border: `1px solid ${neoDesign.semanticColors.status.neutral.default}80`,
         [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
             color: neoDesign.semanticColors.status.neutral.dark,
         },
@@ -230,7 +229,7 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     [`&.${Chip.chipClasses.colorError}`]: {
         backgroundColor: neoDesign.semanticColors.status.error.light,
         color: neoDesign.semanticColors.status.error.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.error.medium}80`,
+        border: `1px solid ${neoDesign.semanticColors.status.error.default}80`,
         [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
             color: neoDesign.semanticColors.status.error.dark,
         },
@@ -239,7 +238,7 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     [`&.${Chip.chipClasses.colorWarning}`]: {
         backgroundColor: neoDesign.semanticColors.status.warning.light,
         color: neoDesign.semanticColors.status.warning.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.warning.medium}80`,
+        border: `1px solid ${neoDesign.semanticColors.status.warning.default}80`,
         [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
             color: neoDesign.semanticColors.status.warning.dark,
         },
@@ -248,7 +247,7 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     [`&.${Chip.chipClasses.colorSuccess}`]: {
         backgroundColor: neoDesign.semanticColors.status.success.light,
         color: neoDesign.semanticColors.status.success.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.success.medium}80`,
+        border: `1px solid ${neoDesign.semanticColors.status.success.default}80`,
         [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
             color: neoDesign.semanticColors.status.success.dark,
         },
@@ -257,7 +256,7 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     [`&.${Chip.chipClasses.colorInfo}`]: {
         backgroundColor: neoDesign.semanticColors.status.info.light,
         color: neoDesign.semanticColors.status.info.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.info.medium}80`,
+        border: `1px solid ${neoDesign.semanticColors.status.info.default}80`,
         [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
             color: neoDesign.semanticColors.status.info.dark,
         },
@@ -1068,13 +1067,13 @@ const NeoBanner = ({ variant = 'light', message, messagePosition = 'left', linkT
             return neoDesign.semanticColors.surfaces.white;
         }
         if (variant === 'success') {
-            return neoDesign.semanticColors.status.success.medium;
+            return neoDesign.semanticColors.status.success.default;
         }
         if (variant === 'error') {
-            return neoDesign.semanticColors.status.error.medium;
+            return neoDesign.semanticColors.status.error.default;
         }
         if (variant === 'warning') {
-            return neoDesign.semanticColors.status.warning.medium;
+            return neoDesign.semanticColors.status.warning.default;
         }
         return neoDesign.colors.grey['800'];
     };
@@ -1106,7 +1105,7 @@ const StyledBreadcrumbLink = styles.styled(Link, {
         color: current ? neoDesign.semanticColors.buttons.tertiary.hover : neoDesign.semanticColors.icons.hover,
     },
     '&:focus-visible': {
-        outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+        outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
         outlineOffset: 2,
     },
 }));
@@ -1196,7 +1195,7 @@ const StyledButtonBase$1 = styles.styled(ButtonBase, {
         },
         // Focus visible for keyboard navigation
         [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -1236,7 +1235,7 @@ const StyledButtonBase$1 = styles.styled(ButtonBase, {
                 : {
                     [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
                         backgroundColor: neoDesign.semanticColors.buttons.secondary.disabledBackground,
-                        borderColor: neoDesign.semanticColors.buttons.secondary.disabledBorder,
+                        borderColor: neoDesign.semanticColors.border.secondary,
                         color: neoDesign.semanticColors.typography.button.disabled,
                     },
                 }),
@@ -1364,40 +1363,102 @@ function NeoButton({ variant = 'primary', size = 'medium', loading = false, chil
 }
 NeoButton.displayName = 'NeoButton';
 
+const StyledButtonTab = styles.styled(MuiToggleButton)(({ theme }) => ({
+    fontFamily: neoDesign.typography.fontFamily.body,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
+    lineHeight: 1,
+    color: neoDesign.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: neoDesign.semanticColors.typography.tab.active,
+    },
+    '&.Mui-focusVisible': {
+        outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
+        outlineOffset: -2,
+        borderRadius: neoDesign.borderRadius.xXS,
+    },
+    '&.Mui-disabled': {
+        color: neoDesign.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 = React.useRef(null);
+    return React.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 (jsxRuntime.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 = styles.styled(MuiButtonGroup)(({ theme, size = 'medium' }) => {
+const StyledButtonTabGroup = styles.styled(MuiToggleButtonGroup)(({ theme, size = 'medium' }) => {
     const sizeStyles = {
         small: {
-            height: 32,
+            height: neoDesign.spacing.spacing_4,
         },
         medium: {
             height: neoDesign.spacing.spacing_5,
         },
     };
     return {
-        // Apply pill-shaped border radius
         borderRadius: neoDesign.borderRadius.full,
         border: `1px solid ${neoDesign.semanticColors.border.primary}`,
-        // Override MUI's default button group styles
-        [`& .${MuiButtonGroup.buttonGroupClasses.grouped}`]: {
+        overflow: 'hidden',
+        // Style all grouped children
+        [`& .${MuiToggleButtonGroup.toggleButtonGroupClasses.grouped}`]: {
+            flex: 1,
             minWidth: 'auto',
             height: sizeStyles[size].height,
             padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
             fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
-            fontWeight: neoDesign.typography.fontWeight.semiBold,
+            fontWeight: neoDesign.typography.fontWeight.regular,
             lineHeight: 1,
             textTransform: 'none',
             border: 'none',
@@ -1408,40 +1469,35 @@ const StyledButtonGroup = styles.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
+            [`&.${MuiToggleButton.toggleButtonClasses.selected}.${MuiToggleButton.toggleButtonClasses.selected}`]: {
                 backgroundColor: neoDesign.semanticColors.surfaces.white,
                 color: neoDesign.semanticColors.buttons.tertiary.default,
                 fontWeight: neoDesign.typography.fontWeight.semiBold,
             },
             // Hover state
-            '&:hover': {
+            [`&:hover, &.${MuiToggleButton.toggleButtonClasses.selected}:hover`]: {
                 backgroundColor: neoDesign.semanticColors.buttons.secondary.hoverBackground,
-                borderRight: `1px solid ${neoDesign.semanticColors.border.primary}`,
             },
             // Focus visible for keyboard navigation
-            [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
-                outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+            '&.Mui-focusVisible': {
+                outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
                 outlineOffset: -2,
                 zIndex: 1,
             },
             // First button: rounded left edge
-            [`&.${MuiButtonGroup.buttonGroupClasses.firstButton}`]: {
+            [`&.${MuiToggleButtonGroup.toggleButtonGroupClasses.firstButton}`]: {
                 borderTopLeftRadius: neoDesign.borderRadius.full,
                 borderBottomLeftRadius: neoDesign.borderRadius.full,
             },
             // Last button: rounded right edge, no right border
-            [`&.${MuiButtonGroup.buttonGroupClasses.lastButton}`]: {
+            [`&.${MuiToggleButtonGroup.toggleButtonGroupClasses.lastButton}`]: {
                 borderTopRightRadius: neoDesign.borderRadius.full,
                 borderBottomRightRadius: neoDesign.borderRadius.full,
                 borderRight: 'none',
             },
-            // Middle buttons: no border radius
-            [`&.${MuiButtonGroup.buttonGroupClasses.middleButton}`]: {
-                borderRadius: 0,
-            },
             // Disabled state
-            [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
+            [`&.${MuiToggleButton.toggleButtonClasses.disabled}`]: {
                 backgroundColor: neoDesign.semanticColors.buttons.secondary.disabledBackground,
                 color: neoDesign.semanticColors.typography.button.disabled,
                 cursor: 'not-allowed',
@@ -1451,29 +1507,27 @@ const StyledButtonGroup = styles.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 jsxRuntime.jsx(StyledButtonGroup, { size: size, variant: variant, ...props });
+const NeoButtonTabGroup = ({ size = 'medium', exclusive = true, ...props }) => {
+    return jsxRuntime.jsx(StyledButtonTabGroup, { role: "tablist", size: size, exclusive: exclusive, ...props });
 };
-NeoButtonGroup.displayName = 'NeoButtonGroup';
+NeoButtonTabGroup.displayName = 'NeoButtonTabGroup';
 
 // Border radius per size (from Figma)
 const borderRadiusConfig = {
@@ -1547,7 +1601,7 @@ const StyledCheckbox = styles.styled(Checkbox, {
         height: config.size,
         padding: 0,
         marginTop: size === 'xs' ? 3 : 2,
-        color: neoDesign.semanticColors.border.input,
+        color: neoDesign.semanticColors.border.primary,
         flexShrink: 0,
         // Root element
         [`&.${Checkbox.checkboxClasses.root}`]: {
@@ -1570,20 +1624,20 @@ const StyledCheckbox = styles.styled(Checkbox, {
         },
         // Disabled state
         [`&.${Checkbox.checkboxClasses.disabled}`]: {
-            color: neoDesign.semanticColors.border.input,
+            color: neoDesign.semanticColors.border.primary,
             cursor: 'not-allowed',
             // When checked and disabled
             [`&.${Checkbox.checkboxClasses.checked}`]: {
-                color: neoDesign.semanticColors.border.input,
+                color: neoDesign.semanticColors.border.primary,
             },
             // When indeterminate and disabled
             [`&.${Checkbox.checkboxClasses.indeterminate}`]: {
-                color: neoDesign.semanticColors.border.input,
+                color: neoDesign.semanticColors.border.primary,
             },
         },
         // Focus visible for keyboard navigation
         '&.Mui-focusVisible': {
-            outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
             outlineOffset: 2,
             borderRadius: config.borderRadius,
         },
@@ -1713,7 +1767,7 @@ const StyledButtonBase = styles.styled(ButtonBase, {
         cursor: 'text',
         // Focus visible for keyboard navigation
         [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -1784,7 +1838,7 @@ const StyledSearchField = styles.styled(TextField)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.default),
         borderRadius: neoDesign.borderRadius.input,
         backgroundColor: neoDesign.semanticColors.input.background,
-        border: `1px solid ${neoDesign.semanticColors.border.input}`,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
         paddingTop: neoDesign.spacing.spacing_1,
         paddingBottom: neoDesign.spacing.spacing_1,
         paddingLeft: neoDesign.spacing.spacing_1_1_2,
@@ -1995,43 +2049,32 @@ const Shortcut = styles.styled('span')(({ theme }) => ({
     backgroundColor: neoDesign.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 (jsxRuntime.jsx(StyledMenuItem, { ...props, children: jsxRuntime.jsxs(MenuItemContent, { children: [icon && jsxRuntime.jsx(IconWrapper$1, { children: icon }), jsxRuntime.jsxs(LabelContainer$3, { children: [jsxRuntime.jsx(Label$3, { children: children }), secondaryText && jsxRuntime.jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsxRuntime.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) => (jsxRuntime.jsx(ChevronDown, { ...props, size: neoDesign.spacing.spacing_2_1_2, color: neoDesign.semanticColors.typography.input.default, style: { ...props.style } }));
@@ -2041,11 +2084,11 @@ const ChevronDownIcon = (props) => (jsxRuntime.jsx(ChevronDown, { ...props, size
 const StyledSelect = styles.styled(MuiSelect)({
     minHeight: neoDesign.spacing.spacing_5,
     backgroundColor: neoDesign.semanticColors.input.background,
-    border: `1px solid ${neoDesign.semanticColors.border.input}`,
+    border: `1px solid ${neoDesign.semanticColors.border.primary}`,
     borderRadius: `${neoDesign.borderRadius.input}px`,
     '&:hover': {
         backgroundColor: neoDesign.semanticColors.input.hoverBackground,
-        borderColor: neoDesign.semanticColors.border.input,
+        borderColor: neoDesign.semanticColors.border.primary,
     },
     '&.Mui-focused': {
         backgroundColor: neoDesign.semanticColors.input.background,
@@ -2071,25 +2114,24 @@ const StyledSelect = styles.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 (jsxRuntime.jsx(StyledSelect, { ...props, IconComponent: ChevronDownIcon, variant: "standard", MenuProps: {
             ...props.MenuProps,
-            // Apply NeoMenu styling to the dropdown
             PaperProps: {
                 sx: {
                     backgroundColor: neoDesign.semanticColors.surfaces.white,
@@ -2102,7 +2144,7 @@ const NeoSelect = (props) => {
             },
         } }));
 };
-NeoSelect.displayName = 'NeoSelect';
+NeoDropdown.displayName = 'NeoDropdown';
 
 /**
  * Icon components for DataGrid filter panel slots
@@ -2161,7 +2203,7 @@ const StyledGridFilterPanel = styles.styled(xDataGrid.GridFilterPanel)({
         position: 'relative',
         minHeight: neoDesign.spacing.spacing_5,
         backgroundColor: neoDesign.semanticColors.input.background,
-        border: `1px solid ${neoDesign.semanticColors.border.input}`,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
         borderRadius: `${neoDesign.borderRadius.input}px`,
         fontSize: neoDesign.typography.fontSize.default,
         fontWeight: neoDesign.typography.fontWeight.regular,
@@ -2169,11 +2211,11 @@ const StyledGridFilterPanel = styles.styled(xDataGrid.GridFilterPanel)({
     },
     [`& .${xDataGrid.gridClasses.filterForm} .${InputBase.inputBaseClasses.root}:hover`]: {
         backgroundColor: neoDesign.semanticColors.input.hoverBackground,
-        borderColor: neoDesign.semanticColors.border.input,
+        borderColor: neoDesign.semanticColors.border.primary,
     },
     [`& .${xDataGrid.gridClasses.filterForm} .${InputBase.inputBaseClasses.root}.${InputBase.inputBaseClasses.focused}`]: {
         backgroundColor: neoDesign.semanticColors.input.background,
-        borderColor: neoDesign.semanticColors.border.input,
+        borderColor: neoDesign.semanticColors.border.primary,
     },
     [`& .${xDataGrid.gridClasses.filterForm} .${InputBase.inputBaseClasses.root}::before`]: {
         display: 'none',
@@ -2597,11 +2639,11 @@ const outlinedColorStyles = {
     },
 };
 const filledColorStyles = {
-    default: neoDesign.semanticColors.status.neutral.medium,
-    error: neoDesign.semanticColors.status.error.medium,
-    warning: neoDesign.semanticColors.status.warning.medium,
-    success: neoDesign.semanticColors.status.success.medium,
-    info: neoDesign.semanticColors.status.info.medium,
+    default: neoDesign.semanticColors.status.neutral.default,
+    error: neoDesign.semanticColors.status.error.default,
+    warning: neoDesign.semanticColors.status.warning.default,
+    success: neoDesign.semanticColors.status.success.default,
+    info: neoDesign.semanticColors.status.info.default,
     violet: neoDesign.colors.violet[500],
     beta: neoDesign.colors.digitalBlue[300],
 };
@@ -3209,7 +3251,7 @@ const StyledIconButton = styles.styled(IconButton, {
         },
         // Focus visible for keyboard navigation
         '&:focus-visible': {
-            outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -3518,16 +3560,16 @@ const StyledDivider = styles.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>
@@ -3549,7 +3591,7 @@ const sizeMap = {
 };
 const StyledBadge = styles.styled(Badge)(({ ownerState }) => {
     const size = sizeMap[ownerState.size];
-    const color = neoDesign.semanticColors.status[ownerState.color].medium;
+    const color = neoDesign.semanticColors.status[ownerState.color].default;
     return {
         [`& .${Badge.badgeClasses.badge}`]: {
             width: size,
@@ -3577,7 +3619,7 @@ const StyledBadge = styles.styled(Badge)(({ ownerState }) => {
  */
 const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...props }) => {
     const dotSize = sizeMap[size];
-    const mediumColor = neoDesign.semanticColors.status[color].medium;
+    const mediumColor = neoDesign.semanticColors.status[color].default;
     const lightColor = neoDesign.semanticColors.status[color].light;
     // For outline variant, use SVG for precise control
     const renderDot = () => {
@@ -3598,6 +3640,47 @@ const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...prop
 };
 NeoDot.displayName = 'NeoDot';
 
+const StyledMenu = styles.styled(Menu)(({ theme }) => ({
+    [`& .${Paper.paperClasses.root}`]: {
+        backgroundColor: neoDesign.semanticColors.surfaces.white,
+        borderRadius: neoDesign.borderRadius.s,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
+        boxShadow: `${neoDesign.shadows.dropdown.x}px ${neoDesign.shadows.dropdown.y}px ${neoDesign.shadows.dropdown.blur}px ${neoDesign.shadows.dropdown.spread}px ${neoDesign.shadows.dropdown.shadow}`,
+        minWidth: 200,
+        marginTop: theme.spacing(1),
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+    },
+    [`& .${List.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 jsxRuntime.jsx(StyledMenu, { ...props, children: children });
+};
+NeoDropdownMenu.displayName = 'NeoDropdownMenu';
+
 const filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
 const StyledChip = styles.styled(Chip, {
     shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
@@ -3943,6 +4026,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: neoDesign.colors.digitalBlue[100] },
+    2: { bg: neoDesign.colors.digitalGreen[100] },
+    3: { bg: neoDesign.colors.gold[100] },
+    4: { bg: neoDesign.colors.red[100] },
+    5: { bg: neoDesign.colors.violet[100] },
+    6: { bg: neoDesign.colors.tealGreen[100] },
+    7: { bg: neoDesign.colors.orange[100] },
+};
+
+const sizeConfig$1 = {
+    small: { width: neoDesign.spacing.spacing_4, height: neoDesign.spacing.spacing_4, fontSize: neoDesign.typography.fontSize.xs },
+    medium: { width: neoDesign.spacing.spacing_5, height: neoDesign.spacing.spacing_5, fontSize: neoDesign.typography.fontSize.sm },
+};
+const StyledAvatar = styles.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: neoDesign.typography.fontFamily.body,
+        fontWeight: neoDesign.typography.fontWeight.regular,
+        lineHeight: 1,
+        color: neoDesign.semanticColors.typography.body,
+        backgroundColor: palette ? palette.bg : undefined,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
+        '&:focus-visible': {
+            ...focusRingStyles,
+            borderColor: neoDesign.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 (jsxRuntime.jsx(StyledAvatar, { avatarSize: size, colorIndex: colorIndex, ...props, children: children }));
+};
+NeoGeneralAvatar.displayName = 'NeoGeneralAvatar';
+
 const customProps$1 = ['iconSize'];
 const StyledIconWrapper = styles.styled('div', {
     shouldForwardProp: prop => !customProps$1.includes(prop),
@@ -4124,9 +4257,9 @@ const StyledInputBase = styles.styled(InputBase, {
         },
         medium: {
             height: neoDesign.spacing.spacing_5_1_2,
-            padding: `${neoDesign.spacing.spacing_2}px ${neoDesign.spacing.spacing_3}px ${neoDesign.spacing.spacing_2}px ${startAdornment ? 0 : neoDesign.spacing.spacing_2}px`,
+            padding: `${neoDesign.spacing.spacing_1_1_4}px ${neoDesign.spacing.spacing_2}px ${neoDesign.spacing.spacing_1_1_4}px ${startAdornment ? 0 : neoDesign.spacing.spacing_2}px`,
             fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.default),
-            borderRadius: neoDesign.borderRadius.input,
+            borderRadius: neoDesign.spacing.spacing_8,
         },
     };
     const sizeStyles = sizeConfig[size];
@@ -4135,7 +4268,7 @@ const StyledInputBase = styles.styled(InputBase, {
         fontSize: sizeStyles.fontSize,
         borderRadius: sizeStyles.borderRadius,
         backgroundColor: neoDesign.semanticColors.input.background,
-        border: `1px solid ${destructive ? neoDesign.semanticColors.status.error.medium : neoDesign.semanticColors.border.input}`,
+        border: `1px solid ${destructive ? neoDesign.semanticColors.status.error.default : neoDesign.semanticColors.border.primary}`,
         transition: theme.transitions.create(['border-color', 'background-color'], {
             duration: theme.transitions.duration.short,
         }),
@@ -4149,19 +4282,21 @@ const StyledInputBase = styles.styled(InputBase, {
         // Hover state
         '&:hover': {
             backgroundColor: neoDesign.semanticColors.input.hoverBackground,
-            borderColor: destructive ? neoDesign.semanticColors.status.error.medium : neoDesign.semanticColors.border.input,
+            borderColor: destructive
+                ? neoDesign.semanticColors.status.error.default
+                : neoDesign.semanticColors.border.primary,
         },
         // Focused state
         [`&.${InputBase.inputBaseClasses.focused}`]: {
             backgroundColor: neoDesign.semanticColors.input.background,
             borderColor: destructive
-                ? neoDesign.semanticColors.status.error.medium
+                ? neoDesign.semanticColors.status.error.default
                 : neoDesign.semanticColors.buttons.primary.default,
         },
         // Disabled state
         [`&.${InputBase.inputBaseClasses.disabled}`]: {
             backgroundColor: neoDesign.semanticColors.input.disabledBackground,
-            borderColor: neoDesign.semanticColors.border.input,
+            borderColor: neoDesign.semanticColors.border.primary,
             color: neoDesign.semanticColors.icons.disabled,
             [`& .${InputBase.inputBaseClasses.input}`]: {
                 WebkitTextFillColor: neoDesign.semanticColors.icons.disabled,
@@ -4169,11 +4304,11 @@ const StyledInputBase = styles.styled(InputBase, {
         },
         // Error state
         [`&.${InputBase.inputBaseClasses.error}`]: {
-            borderColor: neoDesign.semanticColors.status.error.medium,
+            borderColor: neoDesign.semanticColors.status.error.default,
         },
         // Adornment styling
         [`& .${InputAdornment.inputAdornmentClasses.root}`]: {
-            color: destructive ? neoDesign.semanticColors.status.error.medium : neoDesign.semanticColors.icons.placeholder,
+            color: destructive ? neoDesign.semanticColors.status.error.default : neoDesign.semanticColors.icons.placeholder,
         },
     };
 });
@@ -4187,7 +4322,7 @@ const StyledFormHelperText = styles.styled(FormHelperText, {
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
         color: neoDesign.semanticColors.typography.input.helper,
         [`&.${FormHelperText.formHelperTextClasses.error}`]: {
-            color: neoDesign.semanticColors.status.error.medium,
+            color: neoDesign.semanticColors.status.error.default,
         },
         [`&.${FormHelperText.formHelperTextClasses.disabled}`]: {
             color: neoDesign.semanticColors.icons.disabled,
@@ -4487,7 +4622,7 @@ const StyledListItemButton = styles.styled(ListItemButton)(({ theme }) => ({
     transition: theme.transitions.create(['border', 'background-color']),
     // Active (selected) state
     [`&.${ListItemButton.listItemButtonClasses.selected}`]: {
-        border: `2px solid ${neoDesign.semanticColors.border.tabActive}`,
+        border: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
         backgroundColor: theme.palette.common.white,
         '&:hover': {
             backgroundColor: theme.palette.common.white,
@@ -4521,9 +4656,9 @@ const StyledListItemButton = styles.styled(ListItemButton)(({ theme }) => ({
     },
     // Focus state
     [`&.${ListItemButton.listItemButtonClasses.focusVisible}`]: {
-        outline: `2px solid ${neoDesign.semanticColors.border.tabActive}`,
+        outline: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
         outlineOffset: 2,
-        border: `2px solid ${neoDesign.semanticColors.border.tabActive}`,
+        border: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
         backgroundColor: theme.palette.common.white,
         [`& .${ListItemIcon.listItemIconClasses.root}`]: {
             color: neoDesign.semanticColors.icons.default,
@@ -4582,7 +4717,7 @@ const StyledListItemButton = styles.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
@@ -4615,17 +4750,17 @@ const StyledCard = styles.styled(MuiCard, {
     flexDirection: 'column',
     gap: theme.spacing(2), // 16px
     backgroundColor: neoDesign.semanticColors.surfaces.card,
-    border: `1px solid ${selected ? neoDesign.semanticColors.border.tabActive : neoDesign.semanticColors.border.card}`,
+    border: `1px solid ${selected ? neoDesign.semanticColors.buttons.primary.default : neoDesign.semanticColors.border.primary}`,
     borderRadius: neoDesign.borderRadius.xS,
     boxShadow: selected ? activeShadow$1 : 'none',
     transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
-        borderColor: neoDesign.semanticColors.border.tabActive,
+        borderColor: neoDesign.semanticColors.buttons.primary.default,
         boxShadow: activeShadow$1,
     },
     '&:focus-visible': {
-        borderColor: neoDesign.semanticColors.border.tabActive,
+        borderColor: neoDesign.semanticColors.buttons.primary.default,
         ...focusRingStyles,
     },
     ...(disabled && {
@@ -4729,8 +4864,8 @@ const Description$1 = styles.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
@@ -4753,10 +4888,12 @@ const StyledLargeCard = styles.styled(MuiCard, {
     const isActive = cardState === 'active';
     const isDisabled = cardState === 'disabled';
     const isFocused = cardState === 'focused';
-    const activeBorderColor = isLight ? neoDesign.semanticColors.border.tabActive : neoDesign.colors.digitalGreen[300];
+    const activeBorderColor = isLight
+        ? neoDesign.semanticColors.buttons.primary.default
+        : neoDesign.colors.digitalGreen[300];
     const defaultBorderColor = isLight
-        ? neoDesign.semanticColors.border.card
-        : `${neoDesign.semanticColors.border.card}80`;
+        ? neoDesign.semanticColors.border.primary
+        : `${neoDesign.semanticColors.border.primary}80`;
     return {
         width: 340,
         height: 162,
@@ -4772,7 +4909,7 @@ const StyledLargeCard = styles.styled(MuiCard, {
         overflow: 'hidden',
         ...(isFocused && focusRingStyles),
         '&:focus-visible': {
-            borderColor: isLight ? neoDesign.semanticColors.border.tabActive : neoDesign.colors.digitalGreen[300],
+            borderColor: isLight ? neoDesign.semanticColors.buttons.primary.default : neoDesign.colors.digitalGreen[300],
             ...focusRingStyles,
         },
         ...(isDisabled && {
@@ -4852,8 +4989,8 @@ const ButtonsRow = styles.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
@@ -4865,67 +5002,13 @@ const NeoMarketplaceLargeCard = ({ state = 'default', cardTheme = 'light', showI
 };
 NeoMarketplaceLargeCard.displayName = 'NeoMarketplaceLargeCard';
 
-const StyledMenu = styles.styled(Menu)(({ theme }) => ({
-    [`& .${Paper.paperClasses.root}`]: {
-        backgroundColor: neoDesign.semanticColors.surfaces.white,
-        borderRadius: neoDesign.borderRadius.s,
-        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
-        boxShadow: `${neoDesign.shadows.dropdown.x}px ${neoDesign.shadows.dropdown.y}px ${neoDesign.shadows.dropdown.blur}px ${neoDesign.shadows.dropdown.spread}px ${neoDesign.shadows.dropdown.shadow}`,
-        minWidth: 200,
-        marginTop: theme.spacing(1),
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(1),
-    },
-    [`& .${List.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 jsxRuntime.jsx(StyledMenu, { ...props, children: children });
-};
-NeoMenu.displayName = 'NeoMenu';
-
 // ============================================================================
 // NeoModal - Main Dialog Container
 // ============================================================================
 const StyledDialog = styles.styled(Dialog)({
     [`& .${Dialog.dialogClasses.paper}`]: {
         borderRadius: neoDesign.borderRadius.card,
-        border: `1px solid ${neoDesign.semanticColors.border.card}`,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
         boxShadow: 'none',
     },
     [`& .${Dialog.dialogClasses.container}`]: {
@@ -5108,6 +5191,34 @@ const NeoModalFooter = ({ leadingContent, children }) => {
 };
 NeoModalFooter.displayName = 'NeoModalFooter';
 
+const NavigationAvatarContainer = styles.styled('div')({
+    display: 'flex',
+    boxSizing: 'border-box',
+    width: neoDesign.spacing.spacing_5_1_2,
+    height: neoDesign.spacing.spacing_5_1_2,
+    padding: neoDesign.spacing.spacing_3_4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '50%',
+    border: `1px solid ${neoDesign.semanticColors.border.primary}`,
+    backgroundColor: neoDesign.semanticColors.buttons.secondary.defaultBackground,
+    '&:focus-within': {
+        borderColor: neoDesign.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 (jsxRuntime.jsx(NavigationAvatarContainer, { children: jsxRuntime.jsx(NeoGeneralAvatar, { size: "small", colorIndex: colorIndex, ...props, children: children }) }));
+};
+NeoNavigationAvatar.displayName = 'NeoNavigationAvatar';
+
 const customProps = ['selected'];
 const StyledRoot = styles.styled(ButtonBase, {
     shouldForwardProp: prop => !customProps.includes(prop),
@@ -5447,7 +5558,7 @@ const StyledLinearProgress$1 = styles.styled(LinearProgress, {
     // Cancelled variant uses warning color
     '&[data-variant="cancelled"]': {
         [`& .${LinearProgress.linearProgressClasses.bar}`]: {
-            backgroundColor: neoDesign.semanticColors.status.warning.medium,
+            backgroundColor: neoDesign.semanticColors.status.warning.default,
         },
     },
 }));
@@ -5512,7 +5623,7 @@ const StyledTextField = styles.styled(TextField)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.default),
         borderRadius: neoDesign.borderRadius.input,
         backgroundColor: neoDesign.semanticColors.input.background,
-        border: `1px solid ${neoDesign.semanticColors.border.input}`,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
         paddingTop: neoDesign.spacing.spacing_1,
         paddingBottom: neoDesign.spacing.spacing_1,
         paddingLeft: neoDesign.spacing.spacing_1_1_2,
@@ -5607,7 +5718,7 @@ NeoQuickFilter.displayName = 'NeoQuickFilter';
 const UncheckedIcon = ({ size }) => {
     const dimensions = size === 'small' ? 16 : 20;
     const radius = size === 'small' ? 8 : 10;
-    return (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Unchecked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: neoDesign.semanticColors.border.input, strokeWidth: "1", fill: "transparent" })] }));
+    return (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Unchecked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: neoDesign.semanticColors.border.primary, strokeWidth: "1", fill: "transparent" })] }));
 };
 const CheckedIcon = ({ size }) => {
     const dimensions = size === 'small' ? 16 : 20;
@@ -5863,19 +5974,19 @@ const StyledAlert$1 = styles.styled(Alert, {
     const colorMap = {
         success: {
             light: neoDesign.semanticColors.status.success.light,
-            medium: neoDesign.semanticColors.status.success.medium,
+            medium: neoDesign.semanticColors.status.success.default,
         },
         error: {
             light: neoDesign.semanticColors.status.error.light,
-            medium: neoDesign.semanticColors.status.error.medium,
+            medium: neoDesign.semanticColors.status.error.default,
         },
         neutral: {
             light: neoDesign.semanticColors.status.neutral.light,
-            medium: neoDesign.semanticColors.status.neutral.medium,
+            medium: neoDesign.semanticColors.status.neutral.default,
         },
         info: {
             light: neoDesign.semanticColors.status.info.light,
-            medium: neoDesign.semanticColors.status.info.medium,
+            medium: neoDesign.semanticColors.status.info.default,
         },
     };
     const severityColors = colorMap[severity];
@@ -5946,10 +6057,10 @@ const StyledAlert$1 = styles.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
@@ -5986,7 +6097,7 @@ NeoStatusBanner.displayName = 'NeoStatusBanner';
 const NeoTabs = styles.styled(MuiTabs)(() => ({
     minHeight: neoDesign.spacing.spacing_5,
     [`& .${MuiTabs.tabsClasses.indicator}`]: {
-        backgroundColor: neoDesign.semanticColors.border.tabActive,
+        backgroundColor: neoDesign.semanticColors.buttons.primary.default,
         height: 2,
     },
     [`& .${MuiTabs.tabsClasses.flexContainer}`]: {
@@ -6008,7 +6119,7 @@ const StyledTab = styles.styled(MuiTab)(({ theme }) => ({
         fontWeight: neoDesign.typography.fontWeight.semiBold,
     },
     [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
-        outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+        outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
         outlineOffset: -2,
     },
     [`&.${MuiTab.tabClasses.disabled}`]: {
@@ -6088,17 +6199,17 @@ const StyledAlert = styles.styled(Alert, {
         error: {
             backgroundColor: neoDesign.semanticColors.status.error.light,
             color: neoDesign.semanticColors.status.error.dark,
-            border: `1px solid ${neoDesign.semanticColors.status.error.medium}`,
+            border: `1px solid ${neoDesign.semanticColors.status.error.default}`,
         },
         success: {
             backgroundColor: neoDesign.semanticColors.status.success.light,
             color: neoDesign.semanticColors.status.success.dark,
-            border: `1px solid ${neoDesign.semanticColors.status.success.medium}`,
+            border: `1px solid ${neoDesign.semanticColors.status.success.default}`,
         },
         info: {
             backgroundColor: neoDesign.semanticColors.status.info.light,
             color: neoDesign.semanticColors.status.info.dark,
-            border: `1px solid ${neoDesign.semanticColors.status.info.medium}`,
+            border: `1px solid ${neoDesign.semanticColors.status.info.default}`,
         },
         download: {
             backgroundColor: neoDesign.semanticColors.surfaces.snackbarDarkMode,
@@ -6326,7 +6437,7 @@ const StyledSwitch = styles.styled(Switch, {
             // Focus visible for keyboard navigation
             '&.Mui-focusVisible': {
                 [`& + .${Switch.switchClasses.track}`]: {
-                    outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+                    outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
                     outlineOffset: 2,
                 },
             },
@@ -6667,7 +6778,7 @@ const StyledTreeView = styles.styled(RichTreeViewPro.RichTreeViewPro)({
         backgroundColor: neoDesign.semanticColors.surfaces.listHover,
     },
     [`& .${TreeItem.treeItemClasses.content}.Mui-focused`]: {
-        boxShadow: `inset 0 0 0 2px ${neoDesign.semanticColors.buttons.primary.focus}`,
+        boxShadow: `inset 0 0 0 2px ${neoDesign.semanticColors.border.focus}`,
         backgroundColor: 'transparent',
     },
     [`& .${TreeItem.treeItemClasses.content}.Mui-selected`]: {
@@ -6678,7 +6789,7 @@ const StyledTreeView = styles.styled(RichTreeViewPro.RichTreeViewPro)({
     },
     [`& .${TreeItem.treeItemClasses.content}.Mui-selected.Mui-focused`]: {
         backgroundColor: neoDesign.semanticColors.surfaces.listHover,
-        boxShadow: `inset 0 0 0 2px ${neoDesign.semanticColors.buttons.primary.focus}`,
+        boxShadow: `inset 0 0 0 2px ${neoDesign.semanticColors.border.focus}`,
     },
     [`& .${TreeItem.treeItemClasses.label}`]: {
         fontSize: neoDesign.typography.fontSize.xs,
@@ -6703,12 +6814,12 @@ const StyledTreeView = styles.styled(RichTreeViewPro.RichTreeViewPro)({
 
 // Figma-exact border radius for toggle buttons — no matching design token
 const TOGGLE_BUTTON_BORDER_RADIUS = 14;
-const StyledToggleButtonGroup = styles.styled(ToggleButtonGroup)(({ theme }) => ({
+const StyledToggleButtonGroup = styles.styled(MuiToggleButtonGroup)(({ theme }) => ({
     backgroundColor: neoDesign.colors.grey[50],
     padding: theme.spacing(0.625, 0.875),
     borderRadius: neoDesign.borderRadius.full,
     gap: 0,
-    [`& .${ToggleButtonGroup.toggleButtonGroupClasses.grouped}`]: {
+    [`& .${MuiToggleButtonGroup.toggleButtonGroupClasses.grouped}`]: {
         border: 'none',
         borderRadius: TOGGLE_BUTTON_BORDER_RADIUS,
         margin: 0,
@@ -6721,7 +6832,7 @@ const StyledToggleButtonGroup = styles.styled(ToggleButtonGroup)(({ theme }) =>
         },
     },
 }));
-const StyledToggleButton = styles.styled(ToggleButton)(({ theme }) => ({
+const StyledToggleButton = styles.styled(MuiToggleButton)(({ theme }) => ({
     padding: theme.spacing(0.625),
     minWidth: 'auto',
     color: neoDesign.semanticColors.icons.default,
@@ -6733,7 +6844,7 @@ const StyledToggleButton = styles.styled(ToggleButton)(({ theme }) => ({
     '&:hover': {
         backgroundColor: 'transparent',
     },
-    [`&.${ToggleButton.toggleButtonClasses.selected}`]: {
+    [`&.${MuiToggleButton.toggleButtonClasses.selected}`]: {
         backgroundColor: neoDesign.semanticColors.buttons.navigation.pressedBackground,
         color: neoDesign.semanticColors.icons.active,
         '&:hover': {
@@ -6779,7 +6890,8 @@ exports.NeoBanner = NeoBanner;
 exports.NeoBreadcrumbLink = NeoBreadcrumbLink;
 exports.NeoBreadcrumbs = NeoBreadcrumbs;
 exports.NeoButton = NeoButton;
-exports.NeoButtonGroup = NeoButtonGroup;
+exports.NeoButtonTab = NeoButtonTab;
+exports.NeoButtonTabGroup = NeoButtonTabGroup;
 exports.NeoCheckbox = NeoCheckbox;
 exports.NeoCodeSnippet = NeoCodeSnippet;
 exports.NeoDataGrid = NeoDataGrid;
@@ -6792,12 +6904,17 @@ exports.NeoDataGridFilterPanelDeleteIcon = NeoDataGridFilterPanelDeleteIcon;
 exports.NeoDataGridFilterPanelRemoveAllIcon = NeoDataGridFilterPanelRemoveAllIcon;
 exports.NeoDataGridFiltersButton = NeoDataGridFiltersButton;
 exports.NeoDataGridHeaderLabel = NeoDataGridHeaderLabel;
-exports.NeoDataGridSelect = NeoSelect;
+exports.NeoDataGridSelect = NeoDropdown;
 exports.NeoDatePicker = NeoDatePicker;
 exports.NeoDivider = NeoDivider;
 exports.NeoDot = NeoDot;
+exports.NeoDropdown = NeoDropdown;
+exports.NeoDropdownMenu = NeoDropdownMenu;
+exports.NeoDropdownMenuItem = NeoDropdownMenuItem;
+exports.NeoDropdownOption = NeoDropdownMenuItem;
 exports.NeoFilterChip = NeoFilterChip;
 exports.NeoFooter = NeoFooter;
+exports.NeoGeneralAvatar = NeoGeneralAvatar;
 exports.NeoIconButton = NeoIconButton;
 exports.NeoIconWrapper = NeoIconWrapper;
 exports.NeoInfiniteScrollGrid = NeoInfiniteScrollGrid;
@@ -6807,13 +6924,14 @@ exports.NeoListItemButton = NeoListItemButton;
 exports.NeoLoadingSpinner = NeoLoadingSpinner;
 exports.NeoMarketplaceCard = NeoMarketplaceCard;
 exports.NeoMarketplaceLargeCard = NeoMarketplaceLargeCard;
-exports.NeoMenu = NeoMenu;
-exports.NeoMenuItem = NeoMenuItem;
+exports.NeoMenu = NeoDropdownMenu;
+exports.NeoMenuItem = NeoDropdownMenuItem;
 exports.NeoModal = NeoModal;
 exports.NeoModalContent = NeoModalContent;
 exports.NeoModalFooter = NeoModalFooter;
 exports.NeoModalHeader = NeoModalHeader;
 exports.NeoMultiBadgesCell = NeoMultiBadgesCell;
+exports.NeoNavigationAvatar = NeoNavigationAvatar;
 exports.NeoNavigationItem = NeoNavigationItem;
 exports.NeoPageContent = NeoPageContent;
 exports.NeoPaginatedGrid = NeoPaginatedGrid;
@@ -6821,8 +6939,8 @@ exports.NeoProgressbar = NeoProgressbar;
 exports.NeoQuickFilter = NeoQuickFilter;
 exports.NeoRadio = NeoRadio;
 exports.NeoSearchChip = NeoSearchChip;
-exports.NeoSelect = NeoSelect;
-exports.NeoSelectOption = NeoMenuItem;
+exports.NeoSelect = NeoDropdown;
+exports.NeoSelectOption = NeoDropdownMenuItem;
 exports.NeoSkeleton = NeoSkeleton;
 exports.NeoStatusBadgeCell = NeoStatusBadgeCell;
 exports.NeoStatusBanner = NeoStatusBanner;