@moderneinc/neo-styled-components 5.0.0-next.bd2a49 → 5.0.0-next.d2d555

package/dist/index.js

@@ -57,6 +57,12 @@ var Fab = require('@mui/material/Fab');
 var Fade = require('@mui/material/Fade');
 var Radio = require('@mui/material/Radio');
 var Skeleton = require('@mui/material/Skeleton');
+var MuiTable = require('@mui/material/Table');
+var TableBody = require('@mui/material/TableBody');
+var TableCell = require('@mui/material/TableCell');
+var TableContainer = require('@mui/material/TableContainer');
+var TableHead = require('@mui/material/TableHead');
+var TableRow = require('@mui/material/TableRow');
 var MuiTab = require('@mui/material/Tab');
 var MuiTabs = require('@mui/material/Tabs');
 var Switch = require('@mui/material/Switch');
@@ -64,8 +70,37 @@ 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');
 
-const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
-    height: 24,
+const STATUS_COLOR_CLASSES = [
+    [Chip.chipClasses.colorDefault, neoDesign.semanticColors.status.neutral],
+    [Chip.chipClasses.colorError, neoDesign.semanticColors.status.error],
+    [Chip.chipClasses.colorWarning, neoDesign.semanticColors.status.warning],
+    [Chip.chipClasses.colorSuccess, neoDesign.semanticColors.status.success],
+    [Chip.chipClasses.colorInfo, neoDesign.semanticColors.status.info],
+];
+const outlinedColorOverrides = {
+    backgroundColor: 'transparent',
+    color: neoDesign.semanticColors.typography.bodySecondary,
+    border: `1px solid ${neoDesign.semanticColors.border.secondary}`,
+    [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
+        color: neoDesign.semanticColors.typography.bodySecondary,
+    },
+};
+const filledColorRules = Object.fromEntries(STATUS_COLOR_CLASSES.map(([className, palette]) => [
+    `&.${className}`,
+    {
+        backgroundColor: palette.light,
+        color: palette.dark,
+        border: `1px solid ${palette.transparent}`,
+        [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
+            color: palette.dark,
+        },
+    },
+]));
+const outlinedColorRules = Object.fromEntries(STATUS_COLOR_CLASSES.map(([className]) => [`&.${className}`, outlinedColorOverrides]));
+const StyledChip$3 = styles.styled(Chip, {
+    shouldForwardProp: prop => prop !== 'badgeSize' && prop !== 'badgeVariant',
+})(({ theme, badgeSize, badgeVariant }) => ({
+    height: badgeSize === 'small' ? 20 : 24,
     paddingTop: neoDesign.spacing.spacing_1_4,
     paddingBottom: neoDesign.spacing.spacing_1_4,
     paddingLeft: neoDesign.spacing.spacing_1,
@@ -93,51 +128,7 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
         width: 12,
         height: 12,
     },
-    // Default (Neutral) state
-    [`&.${Chip.chipClasses.colorDefault}`]: {
-        backgroundColor: neoDesign.semanticColors.status.neutral.light,
-        color: neoDesign.semanticColors.status.neutral.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.neutral.default}80`,
-        [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
-            color: neoDesign.semanticColors.status.neutral.dark,
-        },
-    },
-    // Error state
-    [`&.${Chip.chipClasses.colorError}`]: {
-        backgroundColor: neoDesign.semanticColors.status.error.light,
-        color: neoDesign.semanticColors.status.error.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.error.default}80`,
-        [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
-            color: neoDesign.semanticColors.status.error.dark,
-        },
-    },
-    // Warning state
-    [`&.${Chip.chipClasses.colorWarning}`]: {
-        backgroundColor: neoDesign.semanticColors.status.warning.light,
-        color: neoDesign.semanticColors.status.warning.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.warning.default}80`,
-        [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
-            color: neoDesign.semanticColors.status.warning.dark,
-        },
-    },
-    // Success state
-    [`&.${Chip.chipClasses.colorSuccess}`]: {
-        backgroundColor: neoDesign.semanticColors.status.success.light,
-        color: neoDesign.semanticColors.status.success.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.success.default}80`,
-        [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
-            color: neoDesign.semanticColors.status.success.dark,
-        },
-    },
-    // Info state
-    [`&.${Chip.chipClasses.colorInfo}`]: {
-        backgroundColor: neoDesign.semanticColors.status.info.light,
-        color: neoDesign.semanticColors.status.info.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.info.default}80`,
-        [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
-            color: neoDesign.semanticColors.status.info.dark,
-        },
-    },
+    ...(badgeVariant === 'outlined' ? outlinedColorRules : filledColorRules),
 }));
 /**
  * NeoBadge - Status badge component based on MUI Chip
@@ -150,8 +141,8 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
  * - TrailingIcon → deleteIcon prop (pass React element)
  * - Label → label prop
  */
-const NeoBadge = (props) => {
-    return jsxRuntime.jsx(StyledChip$2, { ...props });
+const NeoBadge = ({ size = 'medium', variant = 'filled', ...props }) => {
+    return jsxRuntime.jsx(StyledChip$3, { ...props, badgeSize: size, badgeVariant: variant });
 };
 NeoBadge.displayName = 'NeoBadge';
 
@@ -269,22 +260,6 @@ const NeoDataGridCellContent = ({ children, ...props }) => {
     return jsxRuntime.jsx(CellContentContainer, { ...props, children: children });
 };
 NeoDataGridCellContent.displayName = 'NeoDataGridCellContent';
-/**
- * Utility function to get DataGrid sx styles for consistent cell appearance
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4212-41631
- *
- * Apply this to DataGrid's `sx` prop to ensure cells are properly aligned and styled.
- *
- * @param size - Row size variant (affects row height)
- * @returns SxProps for DataGrid
- *
- * @example
- * <DataGrid
- *   rows={rows}
- *   columns={columns}
- * />
- */
 /**
  * Row height configuration for DataGrid size variants (from Figma specs)
  * - compact: 42px
@@ -939,14 +914,17 @@ const intentColors$2 = {
 };
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert$2 = styles.styled(Alert, {
-    shouldForwardProp: prop => prop !== 'intent' && prop !== 'alertType',
-})(({ theme, intent = 'success', alertType = 'outlined' }) => {
+    shouldForwardProp: prop => prop !== 'intent' && prop !== 'alertType' && prop !== 'alertSize',
+})(({ theme, intent = 'success', alertType = 'outlined', alertSize = 'default' }) => {
     const palette = intentColors$2[intent];
     const isFilled = alertType === 'filled';
+    const isCompact = alertSize === 'compact';
     const iconColor = isFilled ? neoDesign.semanticColors.typography.tooltip : palette.default;
-    const messageColor = isFilled ? neoDesign.semanticColors.typography.tooltip : neoDesign.semanticColors.typography.body;
+    const messageColor = isFilled
+        ? neoDesign.semanticColors.typography.tooltip
+        : neoDesign.semanticColors.typography.body;
     return {
-        height: neoDesign.spacing.spacing_8,
+        ...(isCompact ? { minHeight: neoDesign.spacing.spacing_5 } : { height: neoDesign.spacing.spacing_8 }),
         width: '100%',
         borderRadius: neoDesign.borderRadius.xS,
         alignItems: 'center',
@@ -1009,9 +987,9 @@ const iconMap = {
  * - Show supporting text → description prop presence
  * - Show Button → action prop presence
  */
-const NeoAlert = ({ intent = 'success', type = 'outlined', title, description, icon, action, ...props }) => {
+const NeoAlert = ({ intent = 'success', type = 'outlined', size = 'default', title, description, icon, action, ...props }) => {
     const defaultIcon = iconMap[intent];
-    return (jsxRuntime.jsxs(StyledAlert$2, { ...props, intent: intent, alertType: type, icon: icon ?? defaultIcon, action: action, children: [jsxRuntime.jsx("span", { children: title }), description && jsxRuntime.jsx("span", { children: description })] }));
+    return (jsxRuntime.jsxs(StyledAlert$2, { ...props, intent: intent, alertType: type, alertSize: size, icon: icon ?? defaultIcon, action: action, children: [jsxRuntime.jsx("span", { children: title }), description && jsxRuntime.jsx("span", { children: description })] }));
 };
 NeoAlert.displayName = 'NeoAlert';
 
@@ -2185,7 +2163,7 @@ const StyledMenuItem = styles.styled(MenuItem)(({ theme }) => ({
     gap: theme.spacing(2),
     borderRadius: 0,
     color: neoDesign.semanticColors.icons.default,
-    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.default),
     fontWeight: neoDesign.typography.fontWeight.regular,
     lineHeight: `${neoDesign.typography.lineHeight.s}px`,
     transition: theme.transitions.create(['background-color'], {
@@ -2251,7 +2229,7 @@ const Shortcut = styles.styled('span')(({ theme }) => ({
 /**
  * NeoMenuItem - Menu item component based on MUI MenuItem
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8584
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025-26?node-id=4159-8714
  *
  * @example
  * ```tsx
@@ -2546,56 +2524,24 @@ function SortedAscendingIcon() {
 function UnsortedIcon() {
     return jsxRuntime.jsx(ChevronsUpDown, { size: 16, color: neoDesign.semanticColors.icons.utility });
 }
-/**
- * Utility function to get DataGrid sx styles for header cells
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4212-41618
- *
- * Figma prop mappings:
- * - `size` → `size`: Figma "condensed" → MUI 'compact', Figma "default" → MUI 'standard', Figma "relaxed" → MUI 'comfortable'
- *
- * Design tokens used:
- * - Background: colors.grey[50] (#f9fafb)
- * - Border: semanticColors.border.primary
- * - Padding: 12px vertical, 24px horizontal
- * - Gap: 12px
- *
- *
- * @param size - Header row size variant (affects header cell height)
- * @returns SxProps for DataGrid header cells
- *
- * @example
- * import { getDataGridHeaderStyles, SortedDescendingIcon, SortedAscendingIcon, UnsortedIcon } from './DataGridHeaderCell'
- *
- * <DataGrid
- *   columnHeaderHeight={38} // for compact (Figma: condensed)
- *   sx={{
- *     ...getDataGridHeaderStyles(),
- *   }}
- *   slots={{
- *     columnSortedDescendingIcon: SortedDescendingIcon,
- *     columnSortedAscendingIcon: SortedAscendingIcon,
- *     columnUnsortedIcon: UnsortedIcon,
- *   }}
- *   rows={rows}
- *   columns={columns}
- * />
- */
+
 const getDataGridHeaderStyles = () => {
     return {
         // Header cell container styles - from Figma: bg, border, padding
         // Height is set via density-specific selectors in DataGrid.tsx
         [`& .${xDataGrid.gridClasses.columnHeader}`]: {
-            backgroundColor: neoDesign.colors.grey[50],
+            backgroundColor: neoDesign.semanticColors.surfaces.dataGrid.header,
             borderBottom: `1px solid ${neoDesign.semanticColors.border.primary}`,
-            paddingLeft: `${neoDesign.spacing.spacing_3}px`,
-            paddingRight: `${neoDesign.spacing.spacing_3}px`,
+            paddingTop: `${neoDesign.spacing.spacing_1_1_2}px`,
+            paddingBottom: `${neoDesign.spacing.spacing_1_1_2}px`,
+            paddingLeft: `${neoDesign.spacing.spacing_2}px`,
+            paddingRight: `${neoDesign.spacing.spacing_2}px`,
             boxSizing: 'border-box',
         },
         // Style the filler element to match header
         // Height is set via density-specific selectors in DataGrid.tsx
         [`& .${xDataGrid.gridClasses.filler}`]: {
-            backgroundColor: neoDesign.colors.grey[50],
+            backgroundColor: neoDesign.semanticColors.surfaces.dataGrid.header,
             borderBottom: `1px solid ${neoDesign.semanticColors.border.primary}`,
             boxSizing: 'border-box',
         },
@@ -2645,6 +2591,20 @@ const getDataGridHeaderStyles = () => {
         },
     };
 };
+const getDataGridRowStyles = () => ({
+    [`& .${xDataGrid.gridClasses.row}`]: {
+        backgroundColor: neoDesign.semanticColors.surfaces.dataGrid.default,
+    },
+    [`& .${xDataGrid.gridClasses.row}:hover`]: {
+        backgroundColor: neoDesign.semanticColors.surfaces.dataGrid.hover,
+    },
+    [`& .${xDataGrid.gridClasses.row}.Mui-selected`]: {
+        backgroundColor: neoDesign.semanticColors.surfaces.dataGrid.selected,
+    },
+    [`& .${xDataGrid.gridClasses.row}.Mui-selected:hover`]: {
+        backgroundColor: neoDesign.semanticColors.surfaces.dataGrid.selectedHover,
+    },
+});
 
 /**
  * Adapter to use NeoCheckbox in DataGrid's baseCheckbox slot
@@ -2679,7 +2639,7 @@ const DataGridCheckbox = ({ slotProps, ...props }) => (jsxRuntime.jsx(NeoCheckbo
  * - `size` → Row heights (compact: 42px, standard: 48px, comfortable: 56px) and header heights (compact: 38px, standard: 44px, comfortable: 52px)
  *
  * Design tokens used:
- * - Colors: semanticColors.border.primary, semanticColors.background.*
+ * - Colors: semanticColors.border.primary, semanticColors.surfaces.dataGrid.*
  * - Typography: typography.fontFamily.body, typography.fontSize.sm
  * - Spacing: spacing.spacing_*
  *
@@ -2723,13 +2683,14 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         // See: https://github.com/mui/mui-x/issues/20107
         // This must be set to prevent scroll shadow artifacts
         [`& .${xDataGrid.gridClasses.main}`]: {
-            backgroundColor: neoDesign.semanticColors.surfaces.white,
+            backgroundColor: neoDesign.semanticColors.surfaces.dataGrid.background,
         },
         // White background for empty/loading overlays
         [`& .${xDataGrid.gridClasses.overlay}`]: {
-            backgroundColor: neoDesign.semanticColors.surfaces.white,
+            backgroundColor: neoDesign.semanticColors.surfaces.dataGrid.background,
         },
         ...getDataGridHeaderStyles(),
+        ...getDataGridRowStyles(),
         border: `1px solid ${neoDesign.semanticColors.border.secondary}`,
         // Style row selection checkboxes to match header (16px, proper spacing)
         [`& .${xDataGrid.gridClasses.cellCheckbox}`]: {
@@ -2784,7 +2745,7 @@ function NeoDataGridColumnsButton() {
 }
 NeoDataGridColumnsButton.displayName = 'NeoDataGridColumnsButton';
 
-const sizeStyles = {
+const sizeStyles$1 = {
     small: {
         height: 16,
         minWidth: 16,
@@ -2850,14 +2811,14 @@ const filledColorStyles = {
     violet: neoDesign.colors.violet[500],
     beta: neoDesign.colors.digitalBlue[300],
 };
-const StyledChip$1 = styles.styled(Chip)(({ theme, size, variant, color }) => ({
+const StyledChip$2 = styles.styled(Chip)(({ theme, size, variant, color }) => ({
     padding: 0,
     boxSizing: 'border-box',
     borderRadius: neoDesign.borderRadius.full,
     fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
     lineHeight: 1,
     fontWeight: neoDesign.typography.fontWeight.medium,
-    ...(size && sizeStyles[size]),
+    ...(size && sizeStyles$1[size]),
     [`& .${Chip.chipClasses.label}`]: {
         padding: 0,
     },
@@ -2884,7 +2845,7 @@ const StyledChip$1 = styles.styled(Chip)(({ theme, size, variant, color }) => ({
  * - TEXT Label → label prop
  */
 function NeoTag({ size = 'small', variant = 'outlined', intent = 'default', ...props }) {
-    return jsxRuntime.jsx(StyledChip$1, { size: size, variant: variant, color: intent, ...props });
+    return jsxRuntime.jsx(StyledChip$2, { size: size, variant: variant, color: intent, ...props });
 }
 NeoTag.displayName = 'NeoTag';
 
@@ -2943,7 +2904,7 @@ const LabelContainer$2 = styles.styled('div')({
     alignItems: 'center',
     gap: `${neoDesign.spacing.spacing_1_2}px`,
 });
-const LabelText = styles.styled('p')({
+const LabelText$1 = styles.styled('p')({
     fontFamily: `${neoDesign.typography.fontFamily.body}, sans-serif`,
     fontSize: neoDesign.typography.fontSize.sm,
     fontWeight: neoDesign.typography.fontWeight.semiBold, // Always semiBold (600)
@@ -2972,7 +2933,7 @@ const IconWrapper = styles.styled('div')({
     },
 });
 function NeoDataGridHeaderLabel({ children, helpTooltip, className, }) {
-    return (jsxRuntime.jsxs(LabelContainer$2, { className: className, "data-neo-header-label": true, children: [children && jsxRuntime.jsx(LabelText, { children: children }), helpTooltip && (jsxRuntime.jsx(Tooltip, { title: helpTooltip, placement: "top", children: jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(CircleQuestionMark, {}) }) }))] }));
+    return (jsxRuntime.jsxs(LabelContainer$2, { className: className, "data-neo-header-label": true, children: [children && jsxRuntime.jsx(LabelText$1, { children: children }), helpTooltip && (jsxRuntime.jsx(Tooltip, { title: helpTooltip, placement: "top", children: jsxRuntime.jsx(IconWrapper, { children: jsxRuntime.jsx(CircleQuestionMark, {}) }) }))] }));
 }
 
 /**
@@ -3510,7 +3471,8 @@ const StyledNavButton = styles.styled(IconButton, {
  */
 const NeoIconButton = ({ size = 'medium', variant = 'tertiary', active = false, loading, children, ...props }) => {
     if (variant === 'nav') {
-        return (jsxRuntime.jsx(StyledNavButton, { size: size, active: active, disableRipple: true, ...props, children: children }));
+        const { color, ...navProps } = props;
+        return (jsxRuntime.jsx(StyledNavButton, { size: size, active: active, disableRipple: true, ...navProps, children: children }));
     }
     return (jsxRuntime.jsx(StyledIconOnlyButton, { variant: variant, size: size, loading: loading, ...props, children: children }));
 };
@@ -3763,6 +3725,20 @@ const NeoDatePicker = ({ type = 'single', open, label, value, rangeValue, onChan
 };
 NeoDatePicker.displayName = 'NeoDatePicker';
 
+/**
+ * NeoDatePickerListItem
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4176-8521
+ */
+const NeoDatePickerListItem = styles.styled('div')({});
+
+/**
+ * NeoDatePickerMenu
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4176-8593
+ */
+const NeoDatePickerMenu = styles.styled('div')({});
+
 const StyledDivider = styles.styled(Divider)(({ theme }) => ({
     borderColor: neoDesign.semanticColors.border.secondary,
     marginTop: theme.spacing(1),
@@ -3933,7 +3909,7 @@ const NeoDownloadToast = ({ title, fileName, progress, showClose = true, showPau
 NeoDownloadToast.displayName = 'NeoDownloadToast';
 
 const filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
-const StyledChip = styles.styled(Chip, {
+const StyledChip$1 = styles.styled(Chip, {
     shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
 })(({ theme, selected }) => ({
     borderRadius: neoDesign.borderRadius.full,
@@ -4023,7 +3999,7 @@ const CountBadge = styles.styled('span')(({ theme }) => ({
  */
 const NeoFilterChip = ({ label, selected = false, expanded, selectedLabel, count = 0, onClear, onClick, ...props }) => {
     const chipLabel = selected ? (jsxRuntime.jsxs(LabelContent, { children: [jsxRuntime.jsxs(TextStack, { children: [jsxRuntime.jsx(HeaderLabel, { children: label }), jsxRuntime.jsx(SelectedLabel, { children: selectedLabel ?? label })] }), count > 0 && jsxRuntime.jsx(CountBadge, { children: count })] })) : (label);
-    return (jsxRuntime.jsx(StyledChip, { label: chipLabel, selected: selected, clickable: true, onClick: onClick, onDelete: selected && onClear ? onClear : undefined, deleteIcon: jsxRuntime.jsx(X, { size: 24 }), "aria-expanded": expanded, ...props }));
+    return (jsxRuntime.jsx(StyledChip$1, { label: chipLabel, selected: selected, clickable: true, onClick: onClick, onDelete: selected && onClear ? onClear : undefined, deleteIcon: jsxRuntime.jsx(X, { size: 24 }), "aria-expanded": expanded, ...props }));
 };
 NeoFilterChip.displayName = 'NeoFilterChip';
 
@@ -4821,87 +4797,127 @@ const NeoListItem = ({ size = 'medium', primaryText, secondaryText, badge, icon,
 };
 NeoListItem.displayName = 'NeoListItem';
 
-/**
- * Styled ListItemButton with Neo design tokens
- * Uses MUI's ListItemButton as base for proper accessibility and interaction
- */
-const StyledListItemButton = styles.styled(ListItemButton)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: neoDesign.spacing.spacing_2,
-    borderRadius: neoDesign.borderRadius.m,
-    paddingTop: neoDesign.spacing.spacing_1,
-    paddingBottom: neoDesign.spacing.spacing_1,
-    paddingLeft: neoDesign.spacing.spacing_3_4,
-    paddingRight: neoDesign.spacing.spacing_3_4,
-    border: `1px solid ${neoDesign.semanticColors.border.primary}`,
-    backgroundColor: theme.palette.common.white,
-    transition: theme.transitions.create(['border', 'background-color']),
-    // Active (selected) state
-    [`&.${ListItemButton.listItemButtonClasses.selected}`]: {
-        border: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
-        backgroundColor: theme.palette.common.white,
-        '&:hover': {
-            backgroundColor: theme.palette.common.white,
-        },
-        // Icon color in selected state
-        [`& .${ListItemIcon.listItemIconClasses.root}`]: {
-            color: neoDesign.semanticColors.icons.default,
-        },
-        // Text colors in selected state
-        [`& .${ListItemText.listItemTextClasses.primary}`]: {
-            color: neoDesign.colors.grey[800],
-        },
-        [`& .${ListItemText.listItemTextClasses.secondary}`]: {
-            color: neoDesign.semanticColors.typography.bodySecondary,
-        },
-    },
-    // Deselected (default) state
-    [`&:not(.${ListItemButton.listItemButtonClasses.selected}):not(.${ListItemButton.listItemButtonClasses.disabled})`]: {
-        '&:hover': {
-            backgroundColor: neoDesign.colors.grey[50],
+const StyledListItemButton = styles.styled(ListItemButton, {
+    shouldForwardProp: prop => prop !== 'listVariant',
+})(({ theme, listVariant = 'card' }) => listVariant === 'nav' ? navVariantStyles(theme) : cardVariantStyles(theme));
+// Nav variant — sidebar list item: no border, compact, subtle highlights.
+// Renders children inline; no ListItemIcon/ListItemText wrappers required.
+function navVariantStyles(theme) {
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        gap: neoDesign.spacing.spacing_2,
+        borderRadius: neoDesign.borderRadius.s,
+        paddingTop: neoDesign.spacing.spacing_1,
+        paddingBottom: neoDesign.spacing.spacing_1,
+        paddingLeft: neoDesign.spacing.spacing_2,
+        paddingRight: neoDesign.spacing.spacing_2,
+        border: 'none',
+        color: neoDesign.semanticColors.typography.bodySecondary,
+        backgroundColor: 'transparent',
+        transition: theme.transitions.create(['background-color', 'color']),
+        [`&.${ListItemButton.listItemButtonClasses.selected}`]: {
+            backgroundColor: neoDesign.semanticColors.surfaces.activeHighlight,
+            color: neoDesign.semanticColors.typography.body,
+            '&:hover': {
+                backgroundColor: neoDesign.semanticColors.surfaces.activeHighlight,
+            },
         },
-        [`& .${ListItemIcon.listItemIconClasses.root}`]: {
-            color: neoDesign.semanticColors.icons.disabled,
+        [`&:not(.${ListItemButton.listItemButtonClasses.selected}):not(.${ListItemButton.listItemButtonClasses.disabled})`]: {
+            '&:hover': {
+                backgroundColor: neoDesign.semanticColors.surfaces.listHover,
+                color: neoDesign.semanticColors.typography.body,
+            },
         },
-        [`& .${ListItemText.listItemTextClasses.primary}`]: {
-            color: neoDesign.semanticColors.buttons.tertiary.disabled,
+        [`&.${ListItemButton.listItemButtonClasses.focusVisible}`]: {
+            outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
+            outlineOffset: -2,
         },
-        [`& .${ListItemText.listItemTextClasses.secondary}`]: {
+        [`&.${ListItemButton.listItemButtonClasses.disabled}`]: {
             color: neoDesign.semanticColors.typography.button.disabled,
+            opacity: 1,
         },
-    },
-    // Focus state
-    [`&.${ListItemButton.listItemButtonClasses.focusVisible}`]: {
-        outline: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
-        outlineOffset: 2,
-        border: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
+    };
+}
+function cardVariantStyles(theme) {
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        gap: neoDesign.spacing.spacing_2,
+        borderRadius: neoDesign.borderRadius.m,
+        paddingTop: neoDesign.spacing.spacing_1,
+        paddingBottom: neoDesign.spacing.spacing_1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
         backgroundColor: theme.palette.common.white,
-        [`& .${ListItemIcon.listItemIconClasses.root}`]: {
-            color: neoDesign.semanticColors.icons.default,
-        },
-        [`& .${ListItemText.listItemTextClasses.primary}`]: {
-            color: neoDesign.colors.grey[800],
-        },
-        [`& .${ListItemText.listItemTextClasses.secondary}`]: {
-            color: neoDesign.semanticColors.typography.bodySecondary,
+        transition: theme.transitions.create(['border', 'background-color']),
+        // Active (selected) state
+        [`&.${ListItemButton.listItemButtonClasses.selected}`]: {
+            border: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
+            backgroundColor: theme.palette.common.white,
+            '&:hover': {
+                backgroundColor: theme.palette.common.white,
+            },
+            // Icon color in selected state
+            [`& .${ListItemIcon.listItemIconClasses.root}`]: {
+                color: neoDesign.semanticColors.icons.default,
+            },
+            // Text colors in selected state
+            [`& .${ListItemText.listItemTextClasses.primary}`]: {
+                color: neoDesign.colors.grey[800],
+            },
+            [`& .${ListItemText.listItemTextClasses.secondary}`]: {
+                color: neoDesign.semanticColors.typography.bodySecondary,
+            },
         },
-    },
-    // Disabled state
-    [`&.${ListItemButton.listItemButtonClasses.disabled}`]: {
-        backgroundColor: neoDesign.colors.grey[50],
-        opacity: 1, // Override MUI default opacity
-        [`& .${ListItemIcon.listItemIconClasses.root}`]: {
-            color: neoDesign.semanticColors.icons.disabled,
+        // Deselected (default) state
+        [`&:not(.${ListItemButton.listItemButtonClasses.selected}):not(.${ListItemButton.listItemButtonClasses.disabled})`]: {
+            '&:hover': {
+                backgroundColor: neoDesign.colors.grey[50],
+            },
+            [`& .${ListItemIcon.listItemIconClasses.root}`]: {
+                color: neoDesign.semanticColors.icons.disabled,
+            },
+            [`& .${ListItemText.listItemTextClasses.primary}`]: {
+                color: neoDesign.semanticColors.buttons.tertiary.disabled,
+            },
+            [`& .${ListItemText.listItemTextClasses.secondary}`]: {
+                color: neoDesign.semanticColors.typography.button.disabled,
+            },
         },
-        [`& .${ListItemText.listItemTextClasses.primary}`]: {
-            color: neoDesign.colors.grey[300],
+        // Focus state
+        [`&.${ListItemButton.listItemButtonClasses.focusVisible}`]: {
+            outline: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
+            outlineOffset: 2,
+            border: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
+            backgroundColor: theme.palette.common.white,
+            [`& .${ListItemIcon.listItemIconClasses.root}`]: {
+                color: neoDesign.semanticColors.icons.default,
+            },
+            [`& .${ListItemText.listItemTextClasses.primary}`]: {
+                color: neoDesign.colors.grey[800],
+            },
+            [`& .${ListItemText.listItemTextClasses.secondary}`]: {
+                color: neoDesign.semanticColors.typography.bodySecondary,
+            },
         },
-        [`& .${ListItemText.listItemTextClasses.secondary}`]: {
-            color: neoDesign.colors.grey[300],
+        // Disabled state
+        [`&.${ListItemButton.listItemButtonClasses.disabled}`]: {
+            backgroundColor: neoDesign.colors.grey[50],
+            opacity: 1, // Override MUI default opacity
+            [`& .${ListItemIcon.listItemIconClasses.root}`]: {
+                color: neoDesign.semanticColors.icons.disabled,
+            },
+            [`& .${ListItemText.listItemTextClasses.primary}`]: {
+                color: neoDesign.colors.grey[300],
+            },
+            [`& .${ListItemText.listItemTextClasses.secondary}`]: {
+                color: neoDesign.colors.grey[300],
+            },
         },
-    },
-}));
+    };
+}
 /**
  * NeoListItemButton - Selectable list item with icon and text
  *
@@ -4945,8 +4961,8 @@ const StyledListItemButton = styles.styled(ListItemButton)(({ theme }) => ({
  * - colors.grey[300] (#d1d5db) - Disabled text
  * - colors.grey[50] (#f9fafb) - Disabled background
  */
-const NeoListItemButton = ({ children, selected = false, disabled = false, ...props }) => {
-    return (jsxRuntime.jsx(StyledListItemButton, { selected: selected, disabled: disabled, ...props, children: children }));
+const NeoListItemButton = ({ children, selected = false, disabled = false, variant = 'card', ...props }) => {
+    return (jsxRuntime.jsx(StyledListItemButton, { selected: selected, disabled: disabled, listVariant: variant, ...props, children: children }));
 };
 NeoListItemButton.displayName = 'NeoListItemButton';
 
@@ -5183,9 +5199,9 @@ 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,
+    width: neoDesign.spacing.spacing_5,
+    height: neoDesign.spacing.spacing_5,
+    padding: neoDesign.spacing.spacing_1_2,
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: '50%',
@@ -5198,8 +5214,8 @@ const NavigationAvatarContainer = styles.styled('div')({
 /**
  * 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.
+ * Wraps NeoGeneralAvatar (size="small") in a 40px container,
+ * providing an interactive area for navigation UI.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
  */
@@ -5231,15 +5247,14 @@ const StyledRoot = styles.styled(ButtonBase, {
     '&:hover .neo-nav-label': {
         color: neoDesign.semanticColors.buttons.primary.hover,
     },
+    [`& .${Chip.chipClasses.root}`]: {
+        flexShrink: 0,
+    },
     '&:focus-visible': {
-        ...focusRingStyles,
+        outline: 'none',
     },
     '&:focus-visible .neo-nav-icon-padding': {
-        backgroundColor: neoDesign.semanticColors.buttons.secondary.hoverBackground,
-        borderColor: neoDesign.colors.digitalBlue[100],
-    },
-    '&:focus-visible .neo-nav-label': {
-        color: neoDesign.semanticColors.buttons.primary.hover,
+        ...focusRingStyles,
     },
     ...(selected && {
         '& .neo-nav-icon-padding': {
@@ -5255,12 +5270,6 @@ const StyledRoot = styles.styled(ButtonBase, {
         '&:hover .neo-nav-label': {
             color: neoDesign.semanticColors.buttons.primary.pressed,
         },
-        '&:focus-visible .neo-nav-icon-padding': {
-            backgroundColor: neoDesign.colors.digitalBlue[100],
-        },
-        '&:focus-visible .neo-nav-label': {
-            color: neoDesign.semanticColors.buttons.primary.pressed,
-        },
     }),
 }));
 const IconPadding = styles.styled('span')({
@@ -5281,56 +5290,331 @@ const Label$2 = styles.styled('span')(({ theme }) => ({
     width: '100%',
     transition: 'color 150ms',
 }));
-const TagPill = styles.styled('span')(({ theme }) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 18,
-    paddingLeft: neoDesign.spacing.spacing_3_4, // 6px
-    paddingRight: neoDesign.spacing.spacing_3_4, // 6px
-    borderRadius: neoDesign.borderRadius.full,
-    backgroundColor: neoDesign.colors.digitalBlue[300], // #8D99FF
-    color: neoDesign.semanticColors.typography.tooltip, // white
-    fontFamily: neoDesign.typography.fontFamily.body,
-    fontWeight: neoDesign.typography.fontWeight.medium,
-    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs), // 12px
-    lineHeight: 1,
-}));
 /**
  * NeoNavigationItem - Vertical navigation item with icon, label, and optional tag
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
  */
-function NeoNavigationItem({ icon, label, selected = false, tag, children, ...props }) {
-    return (jsxRuntime.jsxs(StyledRoot, { selected: selected, disableRipple: true, ...props, children: [jsxRuntime.jsx(IconPadding, { className: "neo-nav-icon-padding", children: icon }), label && jsxRuntime.jsx(Label$2, { className: "neo-nav-label", children: label }), tag && jsxRuntime.jsx(TagPill, { children: tag }), children] }));
+function NeoNavigationItem({ icon, label, selected = false, tag, slotProps, children, ...props }) {
+    return (jsxRuntime.jsxs(StyledRoot, { selected: selected, disableRipple: true, ...props, children: [jsxRuntime.jsx(IconPadding, { className: "neo-nav-icon-padding", children: icon }), label && jsxRuntime.jsx(Label$2, { className: "neo-nav-label", children: label }), tag && (jsxRuntime.jsx(NeoTag, { size: "medium", variant: "filled", intent: "beta", label: tag, ...slotProps?.badge })), children] }));
 }
 NeoNavigationItem.displayName = 'NeoNavigationItem';
 
-/**
- * Sticky header wrapper - sticks to top when scrolling
- */
-const StickyHeader = styles.styled(Box)(({ theme }) => ({
-    position: 'sticky',
-    top: 0,
-    zIndex: theme.zIndex.appBar,
-    backgroundColor: neoDesign.semanticColors.surfaces.white,
-    flexShrink: 0,
+const StyledActionsCell = styles.styled(xDataGrid.GridActionsCell)({
+    gap: neoDesign.spacing.spacing_1,
+    paddingLeft: neoDesign.spacing.spacing_1_1_2,
+    paddingRight: neoDesign.spacing.spacing_1_1_2,
+});
+function NeoActionsCell(props) {
+    return jsxRuntime.jsx(StyledActionsCell, { ...props });
+}
+
+const StyledCell$1 = styles.styled('div', {
+    shouldForwardProp: prop => prop !== 'disabled',
+})(({ disabled }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: neoDesign.spacing.spacing_1, // 8px between avatar and label
+    width: '100%',
+    height: '100%',
+    paddingLeft: neoDesign.spacing.spacing_1_1_2, // 12px — input-horizontal
+    paddingRight: neoDesign.spacing.spacing_1_1_2,
+    paddingTop: neoDesign.spacing.spacing_1_2, // 4px — input-vertical
+    paddingBottom: neoDesign.spacing.spacing_1_2,
+    backgroundColor: disabled
+        ? neoDesign.semanticColors.surfaces.dataGrid.disabled
+        : neoDesign.semanticColors.surfaces.dataGrid.default,
+    boxSizing: 'border-box',
 }));
-/**
- * Page title typography
- */
-const PageTitle = styles.styled(Typography)(() => ({
-    fontSize: neoDesign.typography.fontSize.h3,
-    fontWeight: neoDesign.typography.fontWeight.medium,
-    lineHeight: 1.4,
-    color: neoDesign.colors.grey['900'], // #111827 - matches Figma typography/page-header
+const LabelText = styles.styled('span', {
+    shouldForwardProp: prop => prop !== 'disabled',
+})(({ disabled }) => ({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    fontFamily: neoDesign.typography.fontFamily.body,
+    fontSize: neoDesign.typography.fontSize.xs,
+    fontWeight: neoDesign.typography.fontWeight.regular,
+    lineHeight: 1.5,
+    color: disabled ? neoDesign.semanticColors.typography.bodySecondary : neoDesign.semanticColors.typography.body,
 }));
 /**
- * Subtitle typography
+ * NeoAvatarCell — DataGrid cell displaying a user avatar with optional label.
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=13425-1725
  */
-const Subtitle = styles.styled(Typography)(() => ({
-    fontSize: neoDesign.typography.fontSize.sm,
-    color: neoDesign.semanticColors.typography.bodySecondary,
+const NeoAvatarCell = ({ name, src, colorIndex = 0, label, disabled = false, empty = false, }) => {
+    if (empty) {
+        return jsxRuntime.jsx(StyledCell$1, { disabled: disabled });
+    }
+    return (jsxRuntime.jsxs(StyledCell$1, { disabled: disabled, children: [jsxRuntime.jsx(NeoGeneralAvatar, { size: "small", src: src, alt: name, colorIndex: colorIndex, children: !src && name ? name.charAt(0).toUpperCase() : undefined }), label && jsxRuntime.jsx(LabelText, { disabled: disabled, children: label })] }));
+};
+NeoAvatarCell.displayName = 'NeoAvatarCell';
+
+const CellRoot = styles.styled('div', {
+    shouldForwardProp: prop => prop !== 'disabled',
+})(({ disabled }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    color: disabled ? neoDesign.semanticColors.icons.disabled : neoDesign.semanticColors.icons.default,
+}));
+/**
+ * NeoIconCell — Icon cell for DataGrid. Renders an icon centered in the cell.
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13272-9345
+ */
+const NeoIconCell = ({ icon, ariaLabel, disabled = false }) => {
+    if (!icon)
+        return null;
+    return (jsxRuntime.jsx(CellRoot, { disabled: disabled, "aria-label": ariaLabel, children: jsxRuntime.jsx(NeoIconWrapper, { size: 16, children: icon }) }));
+};
+NeoIconCell.displayName = 'NeoIconCell';
+
+const CellWrapper = styles.styled('div', {
+    shouldForwardProp: prop => prop !== 'disabled',
+})(({ disabled }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    width: '100%',
+    height: '100%',
+    paddingLeft: neoDesign.spacing.spacing_1,
+    paddingRight: neoDesign.spacing.spacing_1,
+    backgroundColor: disabled
+        ? neoDesign.semanticColors.surfaces.dataGrid.disabled
+        : neoDesign.semanticColors.surfaces.dataGrid.default,
+    '& img': {
+        display: 'block',
+        maxHeight: 32,
+        width: 'auto',
+        maxWidth: '100%',
+        objectFit: 'contain',
+        opacity: disabled ? 0.4 : 1,
+    },
+}));
+/**
+ * NeoLogoCell — DataGrid cell displaying a raster or SVG logo image.
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13278-9558
+ *
+ * Kept separate from NeoIconCell to match Neo's Icon/Logo component split:
+ * - NeoIconCell: MUI SvgIcon components
+ * - NeoLogoCell: raster or SVG image URLs (img tag)
+ */
+const NeoLogoCell = ({ src, alt = '', disabled = false }) => {
+    if (!src) {
+        return jsxRuntime.jsx(CellWrapper, { disabled: disabled });
+    }
+    return (jsxRuntime.jsx(CellWrapper, { disabled: disabled, children: jsxRuntime.jsx(NeoIconWrapper, { size: 32, children: jsxRuntime.jsx("img", { src: src, alt: alt }) }) }));
+};
+NeoLogoCell.displayName = 'NeoLogoCell';
+
+const StyledLinearProgress = styles.styled(LinearProgress, {
+    shouldForwardProp: prop => prop !== 'labelPosition',
+})(() => ({
+    height: 8,
+    borderRadius: neoDesign.borderRadius.xS,
+    backgroundColor: neoDesign.colors.grey[200],
+    [`& .${LinearProgress.linearProgressClasses.bar}`]: {
+        borderRadius: neoDesign.borderRadius.xS,
+        backgroundColor: neoDesign.colors.digitalBlue[500],
+    },
+    [`&.${LinearProgress.linearProgressClasses.colorPrimary}`]: {
+        backgroundColor: neoDesign.colors.grey[200],
+        [`& .${LinearProgress.linearProgressClasses.bar}`]: {
+            backgroundColor: neoDesign.colors.digitalBlue[500],
+        },
+    },
+    // Cancelled variant uses warning color
+    '&[data-variant="cancelled"]': {
+        [`& .${LinearProgress.linearProgressClasses.bar}`]: {
+            backgroundColor: neoDesign.semanticColors.status.warning.default,
+        },
+    },
+}));
+const ProgressWrapper = styles.styled('div')(({ labelPosition }) => ({
+    display: 'flex',
+    width: '100%',
+    ...(labelPosition === 'right' && {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: neoDesign.spacing.spacing_3,
+    }),
+    ...(labelPosition === 'top' && {
+        flexDirection: 'column-reverse',
+        alignItems: 'flex-end',
+        gap: neoDesign.spacing.spacing_2,
+    }),
+    ...(labelPosition === 'bottom' && {
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        gap: neoDesign.spacing.spacing_2,
+    }),
+    ...(labelPosition === 'none' && {
+        flexDirection: 'row',
+    }),
+}));
+const ProgressLabel = styles.styled(Typography)(({ theme }) => ({
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    color: neoDesign.colors.grey[800],
+    lineHeight: 1.4,
+    whiteSpace: 'nowrap',
+    flexShrink: 0,
+}));
+const ProgressBarContainer = styles.styled('div')(({ labelPosition }) => ({
+    flexGrow: labelPosition === 'right' ? 1 : 0,
+    width: labelPosition === 'right' ? 'auto' : '100%',
+}));
+/**
+ * NeoProgressbar - Linear progress indicator based on MUI LinearProgress
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-36679
+ *
+ * Figma Props Mapping:
+ * - progress (0%-100% | Cancelled) → value (0-100) + variant (default|cancelled)
+ * - label (False|Right|Top|Bottom) → labelPosition (none|right|top|bottom)
+ *
+ * Design Decisions (from Issue #75):
+ * - MUI Base Component: LinearProgress (provides accessibility, animations, progress tracking)
+ * - Label Positioning: Single labelPosition prop with values 'none', 'right', 'top', 'bottom'
+ * - Cancelled State: Separate variant prop (variant='cancelled') alongside value prop
+ */
+const NeoProgressbar = ({ value = 0, labelPosition = 'none', variant = 'default', labelText, ...props }) => {
+    const showLabel = labelPosition !== 'none';
+    const displayLabel = labelText || (variant === 'cancelled' ? 'Canceled' : `${Math.round(value)}%`);
+    return (jsxRuntime.jsxs(ProgressWrapper, { labelPosition: labelPosition, children: [jsxRuntime.jsx(ProgressBarContainer, { labelPosition: labelPosition, children: jsxRuntime.jsx(StyledLinearProgress, { variant: "determinate", value: variant === 'cancelled' ? 100 : value, "data-variant": variant, labelPosition: labelPosition, ...props }) }), showLabel && jsxRuntime.jsx(ProgressLabel, { children: displayLabel })] }));
+};
+NeoProgressbar.displayName = 'NeoProgressbar';
+
+const StyledCell = styles.styled('div', {
+    shouldForwardProp: prop => prop !== 'disabled',
+})(({ disabled }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+    paddingLeft: neoDesign.spacing.spacing_1_1_2, // 12px input-horizontal
+    paddingRight: neoDesign.spacing.spacing_1_1_2,
+    backgroundColor: disabled
+        ? neoDesign.semanticColors.surfaces.dataGrid.disabled
+        : neoDesign.semanticColors.surfaces.dataGrid.default,
+    boxSizing: 'border-box',
+}));
+/**
+ * NeoProgressCell — DataGrid cell displaying a linear progress indicator.
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13425-5378
+ */
+const NeoProgressCell = ({ value = 0, disabled = false, empty = false, }) => {
+    const clampedValue = Math.min(100, Math.max(0, value));
+    return (jsxRuntime.jsx(StyledCell, { disabled: disabled, children: !empty && jsxRuntime.jsx(NeoProgressbar, { value: clampedValue, labelPosition: "none" }) }));
+};
+NeoProgressCell.displayName = 'NeoProgressCell';
+
+const variantColors = (variant) => ({
+    bg: neoDesign.semanticColors.status[variant].light,
+    fg: neoDesign.semanticColors.status[variant].dark,
+    border: neoDesign.semanticColors.status[variant].transparent,
+});
+const StyledChip = styles.styled('div', {
+    shouldForwardProp: prop => prop !== 'disabled' && prop !== 'variant',
+})(({ disabled, variant }) => {
+    const colors = variantColors(variant);
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: neoDesign.spacing.spacing_3_4,
+        paddingTop: neoDesign.spacing.spacing_1_2,
+        paddingBottom: neoDesign.spacing.spacing_1_2,
+        paddingLeft: neoDesign.spacing.spacing_1_1_2,
+        paddingRight: neoDesign.spacing.spacing_1_1_2,
+        borderRadius: neoDesign.borderRadius.full,
+        border: `1px solid ${disabled ? neoDesign.semanticColors.border.secondary : colors.border}`,
+        backgroundColor: disabled ? neoDesign.semanticColors.surfaces.dataGrid.disabled : colors.bg,
+        color: disabled ? neoDesign.semanticColors.icons.disabled : colors.fg,
+        fontFamily: neoDesign.typography.fontFamily.body,
+        fontSize: neoDesign.typography.fontSize.xs,
+        fontWeight: neoDesign.typography.fontWeight.medium,
+        lineHeight: 1,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        maxWidth: '100%',
+        '& svg': {
+            flexShrink: 0,
+            width: '1em',
+            height: '1em',
+            fontSize: neoDesign.typography.fontSize.xs,
+        },
+    };
+});
+const TooltipErrorPre = styles.styled('pre')({
+    margin: 0,
+    padding: 0,
+    fontFamily: neoDesign.typography.fontFamily.code,
+    fontSize: neoDesign.typography.fontSize.sm,
+    fontWeight: neoDesign.typography.fontWeight.regular,
+    lineHeight: 1.5,
+    color: neoDesign.semanticColors.typography.tooltip,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-all',
+    maxHeight: 200,
+    overflowY: 'auto',
+});
+const StyledTooltip$1 = styles.styled(Tooltip)({
+    [`& .${Tooltip.tooltipClasses.tooltip}`]: {
+        backgroundColor: neoDesign.semanticColors.surfaces.tooltip,
+        maxWidth: 400,
+        padding: `${neoDesign.spacing.spacing_1}px ${neoDesign.spacing.spacing_1_1_2}px`,
+    },
+    [`& .${Tooltip.tooltipClasses.arrow}`]: {
+        color: neoDesign.semanticColors.surfaces.tooltip,
+    },
+});
+/**
+ * NeoStatusCell — DataGrid cell displaying an icon + label chip with optional error tooltip.
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=13272-8705
+ */
+const NeoStatusCell = ({ icon, label, details, disabled = false, variant = 'success', empty = false, }) => {
+    if (empty) {
+        return (jsxRuntime.jsx(Box, { component: "span", sx: {
+                color: neoDesign.semanticColors.typography.body,
+                fontSize: neoDesign.typography.fontSize.sm,
+                lineHeight: 1,
+            }, children: '—' }));
+    }
+    const chip = (jsxRuntime.jsxs(StyledChip, { disabled: disabled, variant: variant, children: [icon, label] }));
+    if (details) {
+        return (jsxRuntime.jsx(StyledTooltip$1, { title: jsxRuntime.jsx(TooltipErrorPre, { children: details }), arrow: true, placement: "bottom-start", children: jsxRuntime.jsx(Box, { component: "span", sx: { display: 'inline-flex' }, children: chip }) }));
+    }
+    return chip;
+};
+NeoStatusCell.displayName = 'NeoStatusCell';
+
+/**
+ * Sticky header wrapper - sticks to top when scrolling
+ */
+const StickyHeader = styles.styled(Box)(({ theme }) => ({
+    position: 'sticky',
+    top: 0,
+    zIndex: theme.zIndex.appBar,
+    backgroundColor: neoDesign.semanticColors.surfaces.white,
+    flexShrink: 0,
+}));
+/**
+ * Page title typography
+ */
+const PageTitle = styles.styled(Typography)(() => ({
+    fontSize: neoDesign.typography.fontSize.h3,
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    lineHeight: 1.4,
+    color: neoDesign.colors.grey['900'], // #111827 - matches Figma typography/page-header
+}));
+/**
+ * Subtitle typography
+ */
+const Subtitle = styles.styled(Typography)(() => ({
+    fontSize: neoDesign.typography.fontSize.sm,
+    color: neoDesign.semanticColors.typography.bodySecondary,
 }));
 /**
  * NeoPageContent - Page content surface from the Moderne Design System
@@ -5387,7 +5671,12 @@ const Subtitle = styles.styled(Typography)(() => ({
  * </NeoPageContent>
  * ```
  */
-function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = false, contentMaxWidth = false, centerContent = true, disableGutters = false, isLoading = false, showBackToTop = true, children, sx, ...boxProps }) {
+function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = false, contentMaxWidth: contentMaxWidthProp = false, centerContent = true, disableGutters: disableGuttersProp = false, isLoading = false, showBackToTop = true, layout = 'default', children, sx, ...boxProps }) {
+    // fullBleed forces no max-width, no gutters, and zero bottom padding
+    // so children can fill the viewport edge-to-edge.
+    const isFullBleed = layout === 'fullBleed';
+    const contentMaxWidth = isFullBleed ? false : contentMaxWidthProp;
+    const disableGutters = isFullBleed || disableGuttersProp;
     const [showBackToTopButton, setShowBackToTopButton] = React.useState(false);
     const headerRef = React.useRef(null);
     const containerRef = React.useRef(null);
@@ -5439,7 +5728,7 @@ function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
                         flexDirection: 'column',
                         px: disableGutters ? 0 : `${neoDesign.spacing.spacing_2_1_2}px`,
                         pt: sticky ? 0 : `${neoDesign.spacing.spacing_2}px`,
-                        pb: `${neoDesign.spacing.spacing_2_1_2}px`,
+                        pb: isFullBleed ? 0 : `${neoDesign.spacing.spacing_2_1_2}px`,
                         height: '100%',
                         overflow: 'auto',
                     }, children: [sticky ? (jsxRuntime.jsx(StickyHeader, { ref: headerRef, sx: {
@@ -5527,84 +5816,6 @@ function NeoPaginatedGrid({ slots, pageSizeOptions, slotProps: userSlotProps, ..
 }
 NeoPaginatedGrid.displayName = 'NeoPaginatedGrid';
 
-const StyledLinearProgress = styles.styled(LinearProgress, {
-    shouldForwardProp: prop => prop !== 'labelPosition',
-})(() => ({
-    height: 8,
-    borderRadius: neoDesign.borderRadius.xS,
-    backgroundColor: neoDesign.colors.grey[200],
-    [`& .${LinearProgress.linearProgressClasses.bar}`]: {
-        borderRadius: neoDesign.borderRadius.xS,
-        backgroundColor: neoDesign.colors.digitalBlue[500],
-    },
-    [`&.${LinearProgress.linearProgressClasses.colorPrimary}`]: {
-        backgroundColor: neoDesign.colors.grey[200],
-        [`& .${LinearProgress.linearProgressClasses.bar}`]: {
-            backgroundColor: neoDesign.colors.digitalBlue[500],
-        },
-    },
-    // Cancelled variant uses warning color
-    '&[data-variant="cancelled"]': {
-        [`& .${LinearProgress.linearProgressClasses.bar}`]: {
-            backgroundColor: neoDesign.semanticColors.status.warning.default,
-        },
-    },
-}));
-const ProgressWrapper = styles.styled('div')(({ labelPosition }) => ({
-    display: 'flex',
-    width: '100%',
-    ...(labelPosition === 'right' && {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: neoDesign.spacing.spacing_3,
-    }),
-    ...(labelPosition === 'top' && {
-        flexDirection: 'column-reverse',
-        alignItems: 'flex-end',
-        gap: neoDesign.spacing.spacing_2,
-    }),
-    ...(labelPosition === 'bottom' && {
-        flexDirection: 'column',
-        alignItems: 'flex-end',
-        gap: neoDesign.spacing.spacing_2,
-    }),
-    ...(labelPosition === 'none' && {
-        flexDirection: 'row',
-    }),
-}));
-const ProgressLabel = styles.styled(Typography)(({ theme }) => ({
-    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
-    fontWeight: neoDesign.typography.fontWeight.medium,
-    color: neoDesign.colors.grey[800],
-    lineHeight: 1.4,
-    whiteSpace: 'nowrap',
-    flexShrink: 0,
-}));
-const ProgressBarContainer = styles.styled('div')(({ labelPosition }) => ({
-    flexGrow: labelPosition === 'right' ? 1 : 0,
-    width: labelPosition === 'right' ? 'auto' : '100%',
-}));
-/**
- * NeoProgressbar - Linear progress indicator based on MUI LinearProgress
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-36679
- *
- * Figma Props Mapping:
- * - progress (0%-100% | Cancelled) → value (0-100) + variant (default|cancelled)
- * - label (False|Right|Top|Bottom) → labelPosition (none|right|top|bottom)
- *
- * Design Decisions (from Issue #75):
- * - MUI Base Component: LinearProgress (provides accessibility, animations, progress tracking)
- * - Label Positioning: Single labelPosition prop with values 'none', 'right', 'top', 'bottom'
- * - Cancelled State: Separate variant prop (variant='cancelled') alongside value prop
- */
-const NeoProgressbar = ({ value = 0, labelPosition = 'none', variant = 'default', labelText, ...props }) => {
-    const showLabel = labelPosition !== 'none';
-    const displayLabel = labelText || (variant === 'cancelled' ? 'Canceled' : `${Math.round(value)}%`);
-    return (jsxRuntime.jsxs(ProgressWrapper, { labelPosition: labelPosition, children: [jsxRuntime.jsx(ProgressBarContainer, { labelPosition: labelPosition, children: jsxRuntime.jsx(StyledLinearProgress, { variant: "determinate", value: variant === 'cancelled' ? 100 : value, "data-variant": variant, labelPosition: labelPosition, ...props }) }), showLabel && jsxRuntime.jsx(ProgressLabel, { children: displayLabel })] }));
-};
-NeoProgressbar.displayName = 'NeoProgressbar';
-
 const StyledTextField = styles.styled(TextField)(({ theme }) => ({
     [`& .${InputBase.inputBaseClasses.root}`]: {
         height: neoDesign.spacing.spacing_5,
@@ -5847,6 +6058,13 @@ const NeoRadio = ({ size = 'medium', label, helperText, disabled, ...props }) =>
 };
 NeoRadio.displayName = 'NeoRadio';
 
+/**
+ * NeoRadioButtonWithText
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11565-7682
+ */
+const NeoRadioButtonWithText = styles.styled('div')({});
+
 const StyledSearchChip = styles.styled(InputBase)(({ theme }) => ({
     borderRadius: neoDesign.borderRadius.full,
     border: `1px solid ${neoDesign.semanticColors.buttons.secondary.defaultBorder}`,
@@ -5912,6 +6130,38 @@ const NeoSearchChip = ({ onClear, value, ...props }) => {
 };
 NeoSearchChip.displayName = 'NeoSearchChip';
 
+/**
+ * NeoSelectField — composite of NeoInputField's form chrome (label,
+ * helper text, error state) wrapped around NeoSelect. Mirrors the
+ * MUI `<TextField select>` ergonomics with Neo design tokens, so
+ * consumers don't have to compose the two manually.
+ *
+ * @example
+ * <NeoSelectField
+ *   label="Response format"
+ *   value={format}
+ *   onChange={e => setFormat(e.target.value)}
+ *   options={[
+ *     { value: 'json', label: 'JSON' },
+ *     { value: 'plain', label: 'Plain text' },
+ *   ]}
+ * />
+ */
+const NeoSelectField = ({ size = 'medium', destructive = false, label, required = false, infoIcon, helperText, errorMessage, options, children, disabled, id, ...selectProps }) => {
+    const inputId = id || `neo-select-${Math.random().toString(36).substring(7)}`;
+    const helperTextId = helperText || errorMessage ? `${inputId}-helper-text` : undefined;
+    return (jsxRuntime.jsxs(StyledFormControl, { size: size, error: destructive, disabled: disabled, children: [label && (jsxRuntime.jsxs(StyledInputLabel, { htmlFor: inputId, size: size, infoIcon: !!infoIcon, disabled: disabled, error: destructive, shrink: true, children: [label, required && jsxRuntime.jsx("span", { "aria-hidden": "true", children: "*" }), infoIcon && jsxRuntime.jsx(InfoIconWrapper, { children: infoIcon })] })), jsxRuntime.jsx(NeoSelect, { id: inputId, disabled: disabled, error: destructive, "aria-describedby": helperTextId, ...selectProps, children: children ??
+                    options?.map(opt => (jsxRuntime.jsx(NeoMenuItem, { value: opt.value, disabled: opt.disabled, children: opt.label }, String(opt.value)))) }), (helperText || errorMessage) && (jsxRuntime.jsx(StyledFormHelperText, { id: helperTextId, error: destructive, disabled: disabled, sx: { marginTop: `${neoDesign.spacing.spacing_3_4}px` }, children: destructive ? errorMessage : helperText }))] }));
+};
+NeoSelectField.displayName = 'NeoSelectField';
+
+/**
+ * NeoSideNav
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4065-3425
+ */
+const NeoSideNav = styles.styled('div')({});
+
 const StyledSkeleton = styles.styled(Skeleton, {
     shouldForwardProp: prop => prop !== 'colorTheme' && prop !== 'position',
 })(({ theme, colorTheme = 'light', position = 'start' }) => ({
@@ -5959,6 +6209,111 @@ const NeoSkeleton = ({ colorTheme = 'light', position = 'start', ...props }) =>
 };
 NeoSkeleton.displayName = 'NeoSkeleton';
 
+const sizePadding = {
+    small: `${neoDesign.spacing.spacing_3_4}px ${neoDesign.spacing.spacing_1_1_2}px`,
+    medium: `${neoDesign.spacing.spacing_1_1_2}px ${neoDesign.spacing.spacing_2}px`,
+};
+const sizeFontSize = {
+    small: neoDesign.typography.fontSize.xs,
+    medium: neoDesign.typography.fontSize.sm,
+};
+const StyledTable = styles.styled(MuiTable, {
+    shouldForwardProp: prop => prop !== 'tableSize',
+})(({ theme, tableSize = 'small' }) => ({
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    [`& .${TableCell.tableCellClasses.head}`]: {
+        backgroundColor: neoDesign.colors.grey[50],
+        color: neoDesign.semanticColors.typography.body,
+        fontFamily: neoDesign.typography.fontFamily.body,
+        fontSize: theme.typography.pxToRem(sizeFontSize[tableSize]),
+        fontWeight: neoDesign.typography.fontWeight.semiBold,
+        lineHeight: 1.4,
+        padding: sizePadding[tableSize],
+        borderBottom: `1px solid ${neoDesign.semanticColors.border.secondary}`,
+    },
+    [`& .${TableCell.tableCellClasses.body}`]: {
+        color: neoDesign.semanticColors.typography.body,
+        fontFamily: neoDesign.typography.fontFamily.body,
+        fontSize: theme.typography.pxToRem(sizeFontSize[tableSize]),
+        fontWeight: neoDesign.typography.fontWeight.regular,
+        lineHeight: 1.4,
+        padding: sizePadding[tableSize],
+        borderBottom: `1px solid ${neoDesign.semanticColors.border.secondary}`,
+    },
+    // Drop the trailing row's bottom border so the container border (if
+    // any) is the visual edge.
+    [`& tbody tr:last-of-type .${TableCell.tableCellClasses.body}`]: {
+        borderBottom: 'none',
+    },
+}));
+const StyledContainer = styles.styled('div', {
+    shouldForwardProp: prop => prop !== 'tableVariant',
+})(({ tableVariant = 'bordered' }) => tableVariant === 'bordered'
+    ? {
+        border: `1px solid ${neoDesign.semanticColors.border.secondary}`,
+        borderRadius: neoDesign.borderRadius.card,
+        overflow: 'hidden',
+        backgroundColor: neoDesign.semanticColors.surfaces.white,
+    }
+    : { backgroundColor: 'transparent' });
+/**
+ * NeoTable — lightweight read-only table for static data (schema rows,
+ * key/value summaries, response metadata). For interactive grids with
+ * sorting / filtering / pagination, use NeoDataGrid instead.
+ *
+ * @example
+ * <NeoTable
+ *   columns={[
+ *     { key: 'name', header: 'Property' },
+ *     { key: 'type', header: 'Type', align: 'center', width: '120px' },
+ *     { key: 'description', header: 'Description' },
+ *   ]}
+ *   rows={[
+ *     { name: 'id', type: 'string', description: 'Resource identifier' },
+ *     { name: 'count', type: 'number', description: 'Item count' },
+ *   ]}
+ *   size="small"
+ * />
+ */
+const NeoTable = ({ columns, rows, size = 'small', variant = 'bordered', ariaLabel, ...tableProps }) => (jsxRuntime.jsx(StyledContainer, { tableVariant: variant, children: jsxRuntime.jsx(TableContainer, { children: jsxRuntime.jsxs(StyledTable, { tableSize: size, "aria-label": ariaLabel, ...tableProps, children: [jsxRuntime.jsx(TableHead, { children: jsxRuntime.jsx(TableRow, { children: columns.map(col => (jsxRuntime.jsx(TableCell, { align: col.align ?? 'left', style: col.width ? { width: col.width } : undefined, children: col.header }, col.key))) }) }), jsxRuntime.jsx(TableBody, { children: rows.map((row, i) => (jsxRuntime.jsx(TableRow, { children: columns.map(col => (jsxRuntime.jsx(TableCell, { align: col.align ?? 'left', children: row[col.key] ?? '' }, col.key))) }, i))) })] }) }) }));
+NeoTable.displayName = 'NeoTable';
+
+const StyledTabPanel = styles.styled(Box, {
+    shouldForwardProp: prop => prop !== 'tabPanelVariant',
+})(({ tabPanelVariant = 'default' }) => ({
+    backgroundColor: neoDesign.semanticColors.surfaces.white,
+    // default: 16px top padding for content-driven pages.
+    // flush: zero padding so content sits directly against the tab bar's
+    // bottom border (sidebars, panels, builders, canvases).
+    padding: 0,
+    ...(tabPanelVariant === 'flush' ? {} : { paddingTop: neoDesign.spacing.spacing_2 }),
+}));
+/**
+ * NeoTabPanel — completes the NeoTabs + NeoTab + NeoTabPanel set.
+ *
+ * Lightweight ARIA-compliant tab panel that renders children when its
+ * `value` matches `currentValue`. No MUI Lab / TabContext dependency.
+ *
+ * @example
+ * const [tab, setTab] = useState('overview')
+ * return (
+ *   <>
+ *     <NeoTabs value={tab} onChange={(_, v) => setTab(v)}>
+ *       <NeoTab value="overview" label="Overview" />
+ *       <NeoTab value="details" label="Details" />
+ *     </NeoTabs>
+ *     <NeoTabPanel value="overview" currentValue={tab}>...</NeoTabPanel>
+ *     <NeoTabPanel value="details" currentValue={tab} variant="flush">...</NeoTabPanel>
+ *   </>
+ * )
+ */
+const NeoTabPanel = ({ value, currentValue, variant = 'default', children, ...boxProps }) => {
+    const selected = value === currentValue;
+    return (jsxRuntime.jsx(StyledTabPanel, { role: "tabpanel", hidden: !selected, tabPanelVariant: variant, id: `tabpanel-${value}`, "aria-labelledby": `tab-${value}`, ...boxProps, children: selected ? children : null }));
+};
+NeoTabPanel.displayName = 'NeoTabPanel';
+
 /**
  * NeoTabs - Tabs container component based on MUI Tabs
  *
@@ -6338,6 +6693,102 @@ const NeoToggle = ({ size = 'medium', label, helperText, disabled, ...props }) =
 };
 NeoToggle.displayName = 'NeoToggle';
 
+const sizeStyles = {
+    small: {
+        height: 24,
+        fontSize: neoDesign.typography.fontSize.xs,
+    },
+    medium: {
+        height: 32,
+        fontSize: neoDesign.typography.fontSize.sm,
+    },
+};
+const StyledToggleButton$1 = styles.styled(MuiToggleButton, {
+    shouldForwardProp: prop => prop !== 'toggleSize',
+})(({ theme, toggleSize = 'medium' }) => ({
+    height: sizeStyles[toggleSize].height,
+    padding: `0 ${neoDesign.spacing.spacing_1_1_2}px`,
+    fontFamily: neoDesign.typography.fontFamily.body,
+    fontSize: theme.typography.pxToRem(sizeStyles[toggleSize].fontSize),
+    fontWeight: neoDesign.typography.fontWeight.regular,
+    lineHeight: 1,
+    color: neoDesign.semanticColors.typography.bodySecondary,
+    backgroundColor: 'transparent',
+    border: 'none',
+    textTransform: 'none',
+    transition: theme.transitions.create(['background-color', 'color'], {
+        duration: theme.transitions.duration.short,
+    }),
+    '&:hover': {
+        backgroundColor: neoDesign.colors.grey[100],
+        color: neoDesign.semanticColors.typography.body,
+    },
+    '&.Mui-selected, &.Mui-selected:hover': {
+        backgroundColor: neoDesign.colors.grey[100],
+        color: neoDesign.semanticColors.typography.body,
+        fontWeight: neoDesign.typography.fontWeight.semiBold,
+    },
+    '&.Mui-focusVisible': {
+        outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
+        outlineOffset: -2,
+    },
+    '&.Mui-disabled': {
+        color: neoDesign.semanticColors.typography.button.disabled,
+        cursor: 'default',
+        pointerEvents: 'none',
+    },
+}));
+/**
+ * NeoToggleButton — a single button in a segmented control. Use inside
+ * NeoToggleButtonGroup; the group manages selection state and forwards
+ * size to its children. Suitable for inline toolbar mode switches
+ * ("Table" / "Raw"). For page-level tabs, prefer NeoButtonTab.
+ */
+const NeoToggleButton = ({ children, size = 'medium', ...props }) => (jsxRuntime.jsx(StyledToggleButton$1, { toggleSize: size, ...props, children: children }));
+NeoToggleButton.displayName = 'NeoToggleButton';
+
+const StyledToggleButtonGroup$1 = styles.styled(MuiToggleButtonGroup)({
+    borderRadius: neoDesign.borderRadius.button,
+    border: `1px solid ${neoDesign.semanticColors.border.secondary}`,
+    overflow: 'hidden',
+    display: 'inline-flex',
+    // Children fill the pill — first/last get the rounded corners, middles
+    // are square. MUI applies positional classes via ToggleButtonGroup
+    // context; we rely on borderRadius inheritance from the container.
+    [`& .${MuiToggleButton.toggleButtonClasses.root}`]: {
+        borderRadius: 0,
+    },
+});
+/**
+ * NeoToggleButtonGroup — pill-shaped segmented control wrapping
+ * MUI ToggleButtonGroup with Neo tokens. Use for inline toolbar mode
+ * switches (e.g. "Table" / "Raw" in a panel header). For page-level
+ * tab navigation, prefer NeoButtonTabGroup.
+ *
+ * @example
+ * <NeoToggleButtonGroup value={mode} exclusive onChange={(_, v) => v && setMode(v)} size="small">
+ *   <NeoToggleButton value="table">Table</NeoToggleButton>
+ *   <NeoToggleButton value="raw">Raw</NeoToggleButton>
+ * </NeoToggleButtonGroup>
+ */
+const NeoToggleButtonGroup = ({ size = 'medium', children, ...props }) => {
+    // Forward size to each NeoToggleButton child so consumers don't have to
+    // set it on every button. MUI's group already does this via context for
+    // its own size prop, but our `size` shape doesn't pass through unchanged.
+    const sized = React.Children.map(children, child => React.isValidElement(child) && child.type === NeoToggleButton
+        ? React.cloneElement(child, { size })
+        : child);
+    return jsxRuntime.jsx(StyledToggleButtonGroup$1, { ...props, children: sized });
+};
+NeoToggleButtonGroup.displayName = 'NeoToggleButtonGroup';
+
+/**
+ * NeoToggleButtonWithText
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11565-10485
+ */
+const NeoToggleButtonWithText = styles.styled('div')({});
+
 const StyledToolbar = styles.styled(xDataGrid.Toolbar)(({ theme }) => ({
     backgroundColor: neoDesign.semanticColors.surfaces.white,
     minHeight: 'auto',
@@ -6479,6 +6930,20 @@ const NeoTooltip = ({ variant = 'light', title, description, children, arrow = f
 };
 NeoTooltip.displayName = 'NeoTooltip';
 
+/**
+ * NeoTopNav
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4618-185228
+ */
+const NeoTopNav = styles.styled('div')({});
+
+/**
+ * NeoTourModal
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=12408-1800
+ */
+const NeoTourModal = styles.styled('div')({});
+
 /**
  * Custom label component that reads extra slot data from the item model.
  * Used as `slots.label` on the TreeItem.
@@ -6684,9 +7149,11 @@ NeoTypologyControl.displayName = 'NeoTypologyControl';
 const version = '0.0.0-development';
 
 exports.CIRCLE_RADIUS = CIRCLE_RADIUS;
+exports.NeoActionsCell = NeoActionsCell;
 exports.NeoActivityHeader = NeoActivityHeader;
 exports.NeoActivityIndicatorCell = NeoActivityIndicatorCell;
 exports.NeoAlert = NeoAlert;
+exports.NeoAvatarCell = NeoAvatarCell;
 exports.NeoBadge = NeoBadge;
 exports.NeoBanner = NeoBanner;
 exports.NeoBreadcrumbLink = NeoBreadcrumbLink;
@@ -6710,6 +7177,8 @@ exports.NeoDataGridFiltersButton = NeoDataGridFiltersButton;
 exports.NeoDataGridHeaderLabel = NeoDataGridHeaderLabel;
 exports.NeoDataGridSelect = NeoSelect;
 exports.NeoDatePicker = NeoDatePicker;
+exports.NeoDatePickerListItem = NeoDatePickerListItem;
+exports.NeoDatePickerMenu = NeoDatePickerMenu;
 exports.NeoDivider = NeoDivider;
 exports.NeoDot = NeoDot;
 exports.NeoDownloadToast = NeoDownloadToast;
@@ -6721,12 +7190,14 @@ exports.NeoFilterChip = NeoFilterChip;
 exports.NeoFooter = NeoFooter;
 exports.NeoGeneralAvatar = NeoGeneralAvatar;
 exports.NeoIconButton = NeoIconButton;
+exports.NeoIconCell = NeoIconCell;
 exports.NeoIconWrapper = NeoIconWrapper;
 exports.NeoInfiniteScrollGrid = NeoInfiniteScrollGrid;
 exports.NeoInputField = NeoInputField;
 exports.NeoListItem = NeoListItem;
 exports.NeoListItemButton = NeoListItemButton;
 exports.NeoLoadingSpinner = NeoLoadingSpinner;
+exports.NeoLogoCell = NeoLogoCell;
 exports.NeoMenu = NeoMenu;
 exports.NeoMenuItem = NeoMenuItem;
 exports.NeoModal = NeoModal;
@@ -6738,22 +7209,34 @@ exports.NeoNavigationAvatar = NeoNavigationAvatar;
 exports.NeoNavigationItem = NeoNavigationItem;
 exports.NeoPageContent = NeoPageContent;
 exports.NeoPaginatedGrid = NeoPaginatedGrid;
+exports.NeoProgressCell = NeoProgressCell;
 exports.NeoProgressbar = NeoProgressbar;
 exports.NeoQuickFilter = NeoQuickFilter;
 exports.NeoRadio = NeoRadio;
+exports.NeoRadioButtonWithText = NeoRadioButtonWithText;
 exports.NeoSearchChip = NeoSearchChip;
 exports.NeoSelect = NeoSelect;
+exports.NeoSelectField = NeoSelectField;
 exports.NeoSelectOption = NeoMenuItem;
+exports.NeoSideNav = NeoSideNav;
 exports.NeoSkeleton = NeoSkeleton;
 exports.NeoStatusBadgeCell = NeoStatusBadgeCell;
+exports.NeoStatusCell = NeoStatusCell;
 exports.NeoTab = NeoTab;
+exports.NeoTabPanel = NeoTabPanel;
+exports.NeoTable = NeoTable;
 exports.NeoTabs = NeoTabs;
 exports.NeoTag = NeoTag;
 exports.NeoToast = NeoToast;
 exports.NeoToastButton = NeoToastButton;
 exports.NeoToggle = NeoToggle;
+exports.NeoToggleButton = NeoToggleButton;
+exports.NeoToggleButtonGroup = NeoToggleButtonGroup;
+exports.NeoToggleButtonWithText = NeoToggleButtonWithText;
 exports.NeoToolbar = NeoToolbar;
 exports.NeoTooltip = NeoTooltip;
+exports.NeoTopNav = NeoTopNav;
+exports.NeoTourModal = NeoTourModal;
 exports.NeoTreeItem = NeoTreeItem;
 exports.NeoTreeView = NeoTreeView;
 exports.NeoTypologyButton = StyledToggleButton;
@@ -6764,6 +7247,7 @@ exports.SortedDescendingIcon = SortedDescendingIcon;
 exports.UnsortedIcon = UnsortedIcon;
 exports.focusRingStyles = focusRingStyles;
 exports.getDataGridHeaderStyles = getDataGridHeaderStyles;
+exports.getDataGridRowStyles = getDataGridRowStyles;
 exports.neoRowHeights = neoRowHeights;
 exports.version = version;
 //# sourceMappingURL=index.js.map