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

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import MuiAvatar from '@mui/material/Avatar';
 import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
-import React, { useContext, createContext, forwardRef, createElement, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import React, { useContext, createContext, forwardRef, createElement, useState, useRef, useCallback, useMemo, useEffect, Children, isValidElement, cloneElement } from 'react';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
 import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
@@ -16,7 +16,7 @@ import MuiToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton
 import MuiToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 import MuiCard from '@mui/material/Card';
 import Checkbox, { checkboxClasses } from '@mui/material/Checkbox';
-import { useGridApiContext, useGridSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, GridFilterPanel, gridClasses, ColumnsPanelTrigger, ToolbarButton, gridFilterModelSelector, FilterPanelTrigger, gridPaginationModelSelector, gridRowCountSelector, gridRowSelectionCountSelector, QuickFilter, QuickFilterControl, QuickFilterClear, Toolbar } from '@mui/x-data-grid';
+import { useGridApiContext, useGridSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, GridFilterPanel, gridClasses, ColumnsPanelTrigger, ToolbarButton, gridFilterModelSelector, FilterPanelTrigger, gridPaginationModelSelector, gridRowCountSelector, gridRowSelectionCountSelector, GridActionsCell, QuickFilter, QuickFilterControl, QuickFilterClear, Toolbar } from '@mui/x-data-grid';
 import { useGridApiRef, DataGridPro } from '@mui/x-data-grid-pro';
 import Button, { buttonClasses } from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
@@ -55,6 +55,12 @@ import Fab from '@mui/material/Fab';
 import Fade from '@mui/material/Fade';
 import Radio, { radioClasses } from '@mui/material/Radio';
 import Skeleton from '@mui/material/Skeleton';
+import MuiTable from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell, { tableCellClasses } from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
 import MuiTab, { tabClasses } from '@mui/material/Tab';
 import MuiTabs, { tabsClasses } from '@mui/material/Tabs';
 import Switch, { switchClasses } from '@mui/material/Switch';
@@ -62,8 +68,37 @@ import { useTreeItemModel } from '@mui/x-tree-view/hooks';
 import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
 
-const StyledChip$2 = styled(Chip)(({ theme }) => ({
-    height: 24,
+const STATUS_COLOR_CLASSES = [
+    [chipClasses.colorDefault, semanticColors.status.neutral],
+    [chipClasses.colorError, semanticColors.status.error],
+    [chipClasses.colorWarning, semanticColors.status.warning],
+    [chipClasses.colorSuccess, semanticColors.status.success],
+    [chipClasses.colorInfo, semanticColors.status.info],
+];
+const outlinedColorOverrides = {
+    backgroundColor: 'transparent',
+    color: semanticColors.typography.bodySecondary,
+    border: `1px solid ${semanticColors.border.secondary}`,
+    [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
+        color: 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}`,
+        [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
+            color: palette.dark,
+        },
+    },
+]));
+const outlinedColorRules = Object.fromEntries(STATUS_COLOR_CLASSES.map(([className]) => [`&.${className}`, outlinedColorOverrides]));
+const StyledChip$3 = styled(Chip, {
+    shouldForwardProp: prop => prop !== 'badgeSize' && prop !== 'badgeVariant',
+})(({ theme, badgeSize, badgeVariant }) => ({
+    height: badgeSize === 'small' ? 20 : 24,
     paddingTop: spacing.spacing_1_4,
     paddingBottom: spacing.spacing_1_4,
     paddingLeft: spacing.spacing_1,
@@ -91,51 +126,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
         width: 12,
         height: 12,
     },
-    // Default (Neutral) state
-    [`&.${chipClasses.colorDefault}`]: {
-        backgroundColor: semanticColors.status.neutral.light,
-        color: semanticColors.status.neutral.dark,
-        border: `1px solid ${semanticColors.status.neutral.default}80`,
-        [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
-            color: semanticColors.status.neutral.dark,
-        },
-    },
-    // Error state
-    [`&.${chipClasses.colorError}`]: {
-        backgroundColor: semanticColors.status.error.light,
-        color: semanticColors.status.error.dark,
-        border: `1px solid ${semanticColors.status.error.default}80`,
-        [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
-            color: semanticColors.status.error.dark,
-        },
-    },
-    // Warning state
-    [`&.${chipClasses.colorWarning}`]: {
-        backgroundColor: semanticColors.status.warning.light,
-        color: semanticColors.status.warning.dark,
-        border: `1px solid ${semanticColors.status.warning.default}80`,
-        [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
-            color: semanticColors.status.warning.dark,
-        },
-    },
-    // Success state
-    [`&.${chipClasses.colorSuccess}`]: {
-        backgroundColor: semanticColors.status.success.light,
-        color: semanticColors.status.success.dark,
-        border: `1px solid ${semanticColors.status.success.default}80`,
-        [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
-            color: semanticColors.status.success.dark,
-        },
-    },
-    // Info state
-    [`&.${chipClasses.colorInfo}`]: {
-        backgroundColor: semanticColors.status.info.light,
-        color: semanticColors.status.info.dark,
-        border: `1px solid ${semanticColors.status.info.default}80`,
-        [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
-            color: semanticColors.status.info.dark,
-        },
-    },
+    ...(badgeVariant === 'outlined' ? outlinedColorRules : filledColorRules),
 }));
 /**
  * NeoBadge - Status badge component based on MUI Chip
@@ -148,8 +139,8 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
  * - TrailingIcon → deleteIcon prop (pass React element)
  * - Label → label prop
  */
-const NeoBadge = (props) => {
-    return jsx(StyledChip$2, { ...props });
+const NeoBadge = ({ size = 'medium', variant = 'filled', ...props }) => {
+    return jsx(StyledChip$3, { ...props, badgeSize: size, badgeVariant: variant });
 };
 NeoBadge.displayName = 'NeoBadge';
 
@@ -267,22 +258,6 @@ const NeoDataGridCellContent = ({ children, ...props }) => {
     return 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
@@ -937,14 +912,17 @@ const intentColors$2 = {
 };
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert$2 = 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 ? semanticColors.typography.tooltip : palette.default;
-    const messageColor = isFilled ? semanticColors.typography.tooltip : semanticColors.typography.body;
+    const messageColor = isFilled
+        ? semanticColors.typography.tooltip
+        : semanticColors.typography.body;
     return {
-        height: spacing.spacing_8,
+        ...(isCompact ? { minHeight: spacing.spacing_5 } : { height: spacing.spacing_8 }),
         width: '100%',
         borderRadius: borderRadius.xS,
         alignItems: 'center',
@@ -1007,9 +985,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 (jsxs(StyledAlert$2, { ...props, intent: intent, alertType: type, icon: icon ?? defaultIcon, action: action, children: [jsx("span", { children: title }), description && jsx("span", { children: description })] }));
+    return (jsxs(StyledAlert$2, { ...props, intent: intent, alertType: type, alertSize: size, icon: icon ?? defaultIcon, action: action, children: [jsx("span", { children: title }), description && jsx("span", { children: description })] }));
 };
 NeoAlert.displayName = 'NeoAlert';
 
@@ -2183,7 +2161,7 @@ const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
     gap: theme.spacing(2),
     borderRadius: 0,
     color: semanticColors.icons.default,
-    fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    fontSize: theme.typography.pxToRem(typography.fontSize.default),
     fontWeight: typography.fontWeight.regular,
     lineHeight: `${typography.lineHeight.s}px`,
     transition: theme.transitions.create(['background-color'], {
@@ -2249,7 +2227,7 @@ const Shortcut = 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
@@ -2544,56 +2522,24 @@ function SortedAscendingIcon() {
 function UnsortedIcon() {
     return jsx(ChevronsUpDown, { size: 16, color: 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
         [`& .${gridClasses.columnHeader}`]: {
-            backgroundColor: colors.grey[50],
+            backgroundColor: semanticColors.surfaces.dataGrid.header,
             borderBottom: `1px solid ${semanticColors.border.primary}`,
-            paddingLeft: `${spacing.spacing_3}px`,
-            paddingRight: `${spacing.spacing_3}px`,
+            paddingTop: `${spacing.spacing_1_1_2}px`,
+            paddingBottom: `${spacing.spacing_1_1_2}px`,
+            paddingLeft: `${spacing.spacing_2}px`,
+            paddingRight: `${spacing.spacing_2}px`,
             boxSizing: 'border-box',
         },
         // Style the filler element to match header
         // Height is set via density-specific selectors in DataGrid.tsx
         [`& .${gridClasses.filler}`]: {
-            backgroundColor: colors.grey[50],
+            backgroundColor: semanticColors.surfaces.dataGrid.header,
             borderBottom: `1px solid ${semanticColors.border.primary}`,
             boxSizing: 'border-box',
         },
@@ -2643,6 +2589,20 @@ const getDataGridHeaderStyles = () => {
         },
     };
 };
+const getDataGridRowStyles = () => ({
+    [`& .${gridClasses.row}`]: {
+        backgroundColor: semanticColors.surfaces.dataGrid.default,
+    },
+    [`& .${gridClasses.row}:hover`]: {
+        backgroundColor: semanticColors.surfaces.dataGrid.hover,
+    },
+    [`& .${gridClasses.row}.Mui-selected`]: {
+        backgroundColor: semanticColors.surfaces.dataGrid.selected,
+    },
+    [`& .${gridClasses.row}.Mui-selected:hover`]: {
+        backgroundColor: semanticColors.surfaces.dataGrid.selectedHover,
+    },
+});
 
 /**
  * Adapter to use NeoCheckbox in DataGrid's baseCheckbox slot
@@ -2677,7 +2637,7 @@ const DataGridCheckbox = ({ slotProps, ...props }) => (jsx(NeoCheckbox, { size:
  * - `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_*
  *
@@ -2721,13 +2681,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
         [`& .${gridClasses.main}`]: {
-            backgroundColor: semanticColors.surfaces.white,
+            backgroundColor: semanticColors.surfaces.dataGrid.background,
         },
         // White background for empty/loading overlays
         [`& .${gridClasses.overlay}`]: {
-            backgroundColor: semanticColors.surfaces.white,
+            backgroundColor: semanticColors.surfaces.dataGrid.background,
         },
         ...getDataGridHeaderStyles(),
+        ...getDataGridRowStyles(),
         border: `1px solid ${semanticColors.border.secondary}`,
         // Style row selection checkboxes to match header (16px, proper spacing)
         [`& .${gridClasses.cellCheckbox}`]: {
@@ -2782,7 +2743,7 @@ function NeoDataGridColumnsButton() {
 }
 NeoDataGridColumnsButton.displayName = 'NeoDataGridColumnsButton';
 
-const sizeStyles = {
+const sizeStyles$1 = {
     small: {
         height: 16,
         minWidth: 16,
@@ -2848,14 +2809,14 @@ const filledColorStyles = {
     violet: colors.violet[500],
     beta: colors.digitalBlue[300],
 };
-const StyledChip$1 = styled(Chip)(({ theme, size, variant, color }) => ({
+const StyledChip$2 = styled(Chip)(({ theme, size, variant, color }) => ({
     padding: 0,
     boxSizing: 'border-box',
     borderRadius: borderRadius.full,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     lineHeight: 1,
     fontWeight: typography.fontWeight.medium,
-    ...(size && sizeStyles[size]),
+    ...(size && sizeStyles$1[size]),
     [`& .${chipClasses.label}`]: {
         padding: 0,
     },
@@ -2882,7 +2843,7 @@ const StyledChip$1 = styled(Chip)(({ theme, size, variant, color }) => ({
  * - TEXT Label → label prop
  */
 function NeoTag({ size = 'small', variant = 'outlined', intent = 'default', ...props }) {
-    return jsx(StyledChip$1, { size: size, variant: variant, color: intent, ...props });
+    return jsx(StyledChip$2, { size: size, variant: variant, color: intent, ...props });
 }
 NeoTag.displayName = 'NeoTag';
 
@@ -2941,7 +2902,7 @@ const LabelContainer$2 = styled('div')({
     alignItems: 'center',
     gap: `${spacing.spacing_1_2}px`,
 });
-const LabelText = styled('p')({
+const LabelText$1 = styled('p')({
     fontFamily: `${typography.fontFamily.body}, sans-serif`,
     fontSize: typography.fontSize.sm,
     fontWeight: typography.fontWeight.semiBold, // Always semiBold (600)
@@ -2970,7 +2931,7 @@ const IconWrapper = styled('div')({
     },
 });
 function NeoDataGridHeaderLabel({ children, helpTooltip, className, }) {
-    return (jsxs(LabelContainer$2, { className: className, "data-neo-header-label": true, children: [children && jsx(LabelText, { children: children }), helpTooltip && (jsx(Tooltip, { title: helpTooltip, placement: "top", children: jsx(IconWrapper, { children: jsx(CircleQuestionMark, {}) }) }))] }));
+    return (jsxs(LabelContainer$2, { className: className, "data-neo-header-label": true, children: [children && jsx(LabelText$1, { children: children }), helpTooltip && (jsx(Tooltip, { title: helpTooltip, placement: "top", children: jsx(IconWrapper, { children: jsx(CircleQuestionMark, {}) }) }))] }));
 }
 
 /**
@@ -3508,7 +3469,8 @@ const StyledNavButton = styled(IconButton, {
  */
 const NeoIconButton = ({ size = 'medium', variant = 'tertiary', active = false, loading, children, ...props }) => {
     if (variant === 'nav') {
-        return (jsx(StyledNavButton, { size: size, active: active, disableRipple: true, ...props, children: children }));
+        const { color, ...navProps } = props;
+        return (jsx(StyledNavButton, { size: size, active: active, disableRipple: true, ...navProps, children: children }));
     }
     return (jsx(StyledIconOnlyButton, { variant: variant, size: size, loading: loading, ...props, children: children }));
 };
@@ -3761,6 +3723,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 = styled('div')({});
+
+/**
+ * NeoDatePickerMenu
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4176-8593
+ */
+const NeoDatePickerMenu = styled('div')({});
+
 const StyledDivider = styled(Divider)(({ theme }) => ({
     borderColor: semanticColors.border.secondary,
     marginTop: theme.spacing(1),
@@ -3931,7 +3907,7 @@ const NeoDownloadToast = ({ title, fileName, progress, showClose = true, showPau
 NeoDownloadToast.displayName = 'NeoDownloadToast';
 
 const filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
-const StyledChip = styled(Chip, {
+const StyledChip$1 = styled(Chip, {
     shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
 })(({ theme, selected }) => ({
     borderRadius: borderRadius.full,
@@ -4021,7 +3997,7 @@ const CountBadge = styled('span')(({ theme }) => ({
  */
 const NeoFilterChip = ({ label, selected = false, expanded, selectedLabel, count = 0, onClear, onClick, ...props }) => {
     const chipLabel = selected ? (jsxs(LabelContent, { children: [jsxs(TextStack, { children: [jsx(HeaderLabel, { children: label }), jsx(SelectedLabel, { children: selectedLabel ?? label })] }), count > 0 && jsx(CountBadge, { children: count })] })) : (label);
-    return (jsx(StyledChip, { label: chipLabel, selected: selected, clickable: true, onClick: onClick, onDelete: selected && onClear ? onClear : undefined, deleteIcon: jsx(X, { size: 24 }), "aria-expanded": expanded, ...props }));
+    return (jsx(StyledChip$1, { label: chipLabel, selected: selected, clickable: true, onClick: onClick, onDelete: selected && onClear ? onClear : undefined, deleteIcon: jsx(X, { size: 24 }), "aria-expanded": expanded, ...props }));
 };
 NeoFilterChip.displayName = 'NeoFilterChip';
 
@@ -4819,87 +4795,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 = styled(ListItemButton)(({ theme }) => ({
-    display: 'flex',
-    alignItems: 'center',
-    gap: spacing.spacing_2,
-    borderRadius: borderRadius.m,
-    paddingTop: spacing.spacing_1,
-    paddingBottom: spacing.spacing_1,
-    paddingLeft: spacing.spacing_3_4,
-    paddingRight: spacing.spacing_3_4,
-    border: `1px solid ${semanticColors.border.primary}`,
-    backgroundColor: theme.palette.common.white,
-    transition: theme.transitions.create(['border', 'background-color']),
-    // Active (selected) state
-    [`&.${listItemButtonClasses.selected}`]: {
-        border: `2px solid ${semanticColors.buttons.primary.default}`,
-        backgroundColor: theme.palette.common.white,
-        '&:hover': {
-            backgroundColor: theme.palette.common.white,
-        },
-        // Icon color in selected state
-        [`& .${listItemIconClasses.root}`]: {
-            color: semanticColors.icons.default,
-        },
-        // Text colors in selected state
-        [`& .${listItemTextClasses.primary}`]: {
-            color: colors.grey[800],
-        },
-        [`& .${listItemTextClasses.secondary}`]: {
-            color: semanticColors.typography.bodySecondary,
-        },
-    },
-    // Deselected (default) state
-    [`&:not(.${listItemButtonClasses.selected}):not(.${listItemButtonClasses.disabled})`]: {
-        '&:hover': {
-            backgroundColor: colors.grey[50],
+const StyledListItemButton = 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: spacing.spacing_2,
+        borderRadius: borderRadius.s,
+        paddingTop: spacing.spacing_1,
+        paddingBottom: spacing.spacing_1,
+        paddingLeft: spacing.spacing_2,
+        paddingRight: spacing.spacing_2,
+        border: 'none',
+        color: semanticColors.typography.bodySecondary,
+        backgroundColor: 'transparent',
+        transition: theme.transitions.create(['background-color', 'color']),
+        [`&.${listItemButtonClasses.selected}`]: {
+            backgroundColor: semanticColors.surfaces.activeHighlight,
+            color: semanticColors.typography.body,
+            '&:hover': {
+                backgroundColor: semanticColors.surfaces.activeHighlight,
+            },
         },
-        [`& .${listItemIconClasses.root}`]: {
-            color: semanticColors.icons.disabled,
+        [`&:not(.${listItemButtonClasses.selected}):not(.${listItemButtonClasses.disabled})`]: {
+            '&:hover': {
+                backgroundColor: semanticColors.surfaces.listHover,
+                color: semanticColors.typography.body,
+            },
         },
-        [`& .${listItemTextClasses.primary}`]: {
-            color: semanticColors.buttons.tertiary.disabled,
+        [`&.${listItemButtonClasses.focusVisible}`]: {
+            outline: `2px solid ${semanticColors.border.focus}`,
+            outlineOffset: -2,
         },
-        [`& .${listItemTextClasses.secondary}`]: {
+        [`&.${listItemButtonClasses.disabled}`]: {
             color: semanticColors.typography.button.disabled,
+            opacity: 1,
         },
-    },
-    // Focus state
-    [`&.${listItemButtonClasses.focusVisible}`]: {
-        outline: `2px solid ${semanticColors.buttons.primary.default}`,
-        outlineOffset: 2,
-        border: `2px solid ${semanticColors.buttons.primary.default}`,
+    };
+}
+function cardVariantStyles(theme) {
+    return {
+        display: 'flex',
+        alignItems: 'center',
+        gap: spacing.spacing_2,
+        borderRadius: borderRadius.m,
+        paddingTop: spacing.spacing_1,
+        paddingBottom: spacing.spacing_1,
+        paddingLeft: spacing.spacing_3_4,
+        paddingRight: spacing.spacing_3_4,
+        border: `1px solid ${semanticColors.border.primary}`,
         backgroundColor: theme.palette.common.white,
-        [`& .${listItemIconClasses.root}`]: {
-            color: semanticColors.icons.default,
-        },
-        [`& .${listItemTextClasses.primary}`]: {
-            color: colors.grey[800],
-        },
-        [`& .${listItemTextClasses.secondary}`]: {
-            color: semanticColors.typography.bodySecondary,
+        transition: theme.transitions.create(['border', 'background-color']),
+        // Active (selected) state
+        [`&.${listItemButtonClasses.selected}`]: {
+            border: `2px solid ${semanticColors.buttons.primary.default}`,
+            backgroundColor: theme.palette.common.white,
+            '&:hover': {
+                backgroundColor: theme.palette.common.white,
+            },
+            // Icon color in selected state
+            [`& .${listItemIconClasses.root}`]: {
+                color: semanticColors.icons.default,
+            },
+            // Text colors in selected state
+            [`& .${listItemTextClasses.primary}`]: {
+                color: colors.grey[800],
+            },
+            [`& .${listItemTextClasses.secondary}`]: {
+                color: semanticColors.typography.bodySecondary,
+            },
         },
-    },
-    // Disabled state
-    [`&.${listItemButtonClasses.disabled}`]: {
-        backgroundColor: colors.grey[50],
-        opacity: 1, // Override MUI default opacity
-        [`& .${listItemIconClasses.root}`]: {
-            color: semanticColors.icons.disabled,
+        // Deselected (default) state
+        [`&:not(.${listItemButtonClasses.selected}):not(.${listItemButtonClasses.disabled})`]: {
+            '&:hover': {
+                backgroundColor: colors.grey[50],
+            },
+            [`& .${listItemIconClasses.root}`]: {
+                color: semanticColors.icons.disabled,
+            },
+            [`& .${listItemTextClasses.primary}`]: {
+                color: semanticColors.buttons.tertiary.disabled,
+            },
+            [`& .${listItemTextClasses.secondary}`]: {
+                color: semanticColors.typography.button.disabled,
+            },
         },
-        [`& .${listItemTextClasses.primary}`]: {
-            color: colors.grey[300],
+        // Focus state
+        [`&.${listItemButtonClasses.focusVisible}`]: {
+            outline: `2px solid ${semanticColors.buttons.primary.default}`,
+            outlineOffset: 2,
+            border: `2px solid ${semanticColors.buttons.primary.default}`,
+            backgroundColor: theme.palette.common.white,
+            [`& .${listItemIconClasses.root}`]: {
+                color: semanticColors.icons.default,
+            },
+            [`& .${listItemTextClasses.primary}`]: {
+                color: colors.grey[800],
+            },
+            [`& .${listItemTextClasses.secondary}`]: {
+                color: semanticColors.typography.bodySecondary,
+            },
         },
-        [`& .${listItemTextClasses.secondary}`]: {
-            color: colors.grey[300],
+        // Disabled state
+        [`&.${listItemButtonClasses.disabled}`]: {
+            backgroundColor: colors.grey[50],
+            opacity: 1, // Override MUI default opacity
+            [`& .${listItemIconClasses.root}`]: {
+                color: semanticColors.icons.disabled,
+            },
+            [`& .${listItemTextClasses.primary}`]: {
+                color: colors.grey[300],
+            },
+            [`& .${listItemTextClasses.secondary}`]: {
+                color: colors.grey[300],
+            },
         },
-    },
-}));
+    };
+}
 /**
  * NeoListItemButton - Selectable list item with icon and text
  *
@@ -4943,8 +4959,8 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
  * - colors.grey[300] (#d1d5db) - Disabled text
  * - colors.grey[50] (#f9fafb) - Disabled background
  */
-const NeoListItemButton = ({ children, selected = false, disabled = false, ...props }) => {
-    return (jsx(StyledListItemButton, { selected: selected, disabled: disabled, ...props, children: children }));
+const NeoListItemButton = ({ children, selected = false, disabled = false, variant = 'card', ...props }) => {
+    return (jsx(StyledListItemButton, { selected: selected, disabled: disabled, listVariant: variant, ...props, children: children }));
 };
 NeoListItemButton.displayName = 'NeoListItemButton';
 
@@ -5181,9 +5197,9 @@ NeoModalFooter.displayName = 'NeoModalFooter';
 const NavigationAvatarContainer = styled('div')({
     display: 'flex',
     boxSizing: 'border-box',
-    width: spacing.spacing_5_1_2,
-    height: spacing.spacing_5_1_2,
-    padding: spacing.spacing_3_4,
+    width: spacing.spacing_5,
+    height: spacing.spacing_5,
+    padding: spacing.spacing_1_2,
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: '50%',
@@ -5196,8 +5212,8 @@ const NavigationAvatarContainer = 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
  */
@@ -5229,15 +5245,14 @@ const StyledRoot = styled(ButtonBase, {
     '&:hover .neo-nav-label': {
         color: semanticColors.buttons.primary.hover,
     },
+    [`& .${chipClasses.root}`]: {
+        flexShrink: 0,
+    },
     '&:focus-visible': {
-        ...focusRingStyles,
+        outline: 'none',
     },
     '&:focus-visible .neo-nav-icon-padding': {
-        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
-        borderColor: colors.digitalBlue[100],
-    },
-    '&:focus-visible .neo-nav-label': {
-        color: semanticColors.buttons.primary.hover,
+        ...focusRingStyles,
     },
     ...(selected && {
         '& .neo-nav-icon-padding': {
@@ -5253,12 +5268,6 @@ const StyledRoot = styled(ButtonBase, {
         '&:hover .neo-nav-label': {
             color: semanticColors.buttons.primary.pressed,
         },
-        '&:focus-visible .neo-nav-icon-padding': {
-            backgroundColor: colors.digitalBlue[100],
-        },
-        '&:focus-visible .neo-nav-label': {
-            color: semanticColors.buttons.primary.pressed,
-        },
     }),
 }));
 const IconPadding = styled('span')({
@@ -5279,56 +5288,331 @@ const Label$2 = styled('span')(({ theme }) => ({
     width: '100%',
     transition: 'color 150ms',
 }));
-const TagPill = styled('span')(({ theme }) => ({
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 18,
-    paddingLeft: spacing.spacing_3_4, // 6px
-    paddingRight: spacing.spacing_3_4, // 6px
-    borderRadius: borderRadius.full,
-    backgroundColor: colors.digitalBlue[300], // #8D99FF
-    color: semanticColors.typography.tooltip, // white
-    fontFamily: typography.fontFamily.body,
-    fontWeight: typography.fontWeight.medium,
-    fontSize: theme.typography.pxToRem(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 (jsxs(StyledRoot, { selected: selected, disableRipple: true, ...props, children: [jsx(IconPadding, { className: "neo-nav-icon-padding", children: icon }), label && jsx(Label$2, { className: "neo-nav-label", children: label }), tag && jsx(TagPill, { children: tag }), children] }));
+function NeoNavigationItem({ icon, label, selected = false, tag, slotProps, children, ...props }) {
+    return (jsxs(StyledRoot, { selected: selected, disableRipple: true, ...props, children: [jsx(IconPadding, { className: "neo-nav-icon-padding", children: icon }), label && jsx(Label$2, { className: "neo-nav-label", children: label }), tag && (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 = styled(Box)(({ theme }) => ({
-    position: 'sticky',
-    top: 0,
-    zIndex: theme.zIndex.appBar,
-    backgroundColor: semanticColors.surfaces.white,
-    flexShrink: 0,
+const StyledActionsCell = styled(GridActionsCell)({
+    gap: spacing.spacing_1,
+    paddingLeft: spacing.spacing_1_1_2,
+    paddingRight: spacing.spacing_1_1_2,
+});
+function NeoActionsCell(props) {
+    return jsx(StyledActionsCell, { ...props });
+}
+
+const StyledCell$1 = styled('div', {
+    shouldForwardProp: prop => prop !== 'disabled',
+})(({ disabled }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: spacing.spacing_1, // 8px between avatar and label
+    width: '100%',
+    height: '100%',
+    paddingLeft: spacing.spacing_1_1_2, // 12px — input-horizontal
+    paddingRight: spacing.spacing_1_1_2,
+    paddingTop: spacing.spacing_1_2, // 4px — input-vertical
+    paddingBottom: spacing.spacing_1_2,
+    backgroundColor: disabled
+        ? semanticColors.surfaces.dataGrid.disabled
+        : semanticColors.surfaces.dataGrid.default,
+    boxSizing: 'border-box',
 }));
-/**
- * Page title typography
- */
-const PageTitle = styled(Typography)(() => ({
-    fontSize: typography.fontSize.h3,
-    fontWeight: typography.fontWeight.medium,
-    lineHeight: 1.4,
-    color: colors.grey['900'], // #111827 - matches Figma typography/page-header
+const LabelText = styled('span', {
+    shouldForwardProp: prop => prop !== 'disabled',
+})(({ disabled }) => ({
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    fontFamily: typography.fontFamily.body,
+    fontSize: typography.fontSize.xs,
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: 1.5,
+    color: disabled ? semanticColors.typography.bodySecondary : 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 = styled(Typography)(() => ({
-    fontSize: typography.fontSize.sm,
-    color: semanticColors.typography.bodySecondary,
+const NeoAvatarCell = ({ name, src, colorIndex = 0, label, disabled = false, empty = false, }) => {
+    if (empty) {
+        return jsx(StyledCell$1, { disabled: disabled });
+    }
+    return (jsxs(StyledCell$1, { disabled: disabled, children: [jsx(NeoGeneralAvatar, { size: "small", src: src, alt: name, colorIndex: colorIndex, children: !src && name ? name.charAt(0).toUpperCase() : undefined }), label && jsx(LabelText, { disabled: disabled, children: label })] }));
+};
+NeoAvatarCell.displayName = 'NeoAvatarCell';
+
+const CellRoot = styled('div', {
+    shouldForwardProp: prop => prop !== 'disabled',
+})(({ disabled }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    color: disabled ? semanticColors.icons.disabled : 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 (jsx(CellRoot, { disabled: disabled, "aria-label": ariaLabel, children: jsx(NeoIconWrapper, { size: 16, children: icon }) }));
+};
+NeoIconCell.displayName = 'NeoIconCell';
+
+const CellWrapper = styled('div', {
+    shouldForwardProp: prop => prop !== 'disabled',
+})(({ disabled }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    width: '100%',
+    height: '100%',
+    paddingLeft: spacing.spacing_1,
+    paddingRight: spacing.spacing_1,
+    backgroundColor: disabled
+        ? semanticColors.surfaces.dataGrid.disabled
+        : 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 jsx(CellWrapper, { disabled: disabled });
+    }
+    return (jsx(CellWrapper, { disabled: disabled, children: jsx(NeoIconWrapper, { size: 32, children: jsx("img", { src: src, alt: alt }) }) }));
+};
+NeoLogoCell.displayName = 'NeoLogoCell';
+
+const StyledLinearProgress = styled(LinearProgress, {
+    shouldForwardProp: prop => prop !== 'labelPosition',
+})(() => ({
+    height: 8,
+    borderRadius: borderRadius.xS,
+    backgroundColor: colors.grey[200],
+    [`& .${linearProgressClasses.bar}`]: {
+        borderRadius: borderRadius.xS,
+        backgroundColor: colors.digitalBlue[500],
+    },
+    [`&.${linearProgressClasses.colorPrimary}`]: {
+        backgroundColor: colors.grey[200],
+        [`& .${linearProgressClasses.bar}`]: {
+            backgroundColor: colors.digitalBlue[500],
+        },
+    },
+    // Cancelled variant uses warning color
+    '&[data-variant="cancelled"]': {
+        [`& .${linearProgressClasses.bar}`]: {
+            backgroundColor: semanticColors.status.warning.default,
+        },
+    },
+}));
+const ProgressWrapper = styled('div')(({ labelPosition }) => ({
+    display: 'flex',
+    width: '100%',
+    ...(labelPosition === 'right' && {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: spacing.spacing_3,
+    }),
+    ...(labelPosition === 'top' && {
+        flexDirection: 'column-reverse',
+        alignItems: 'flex-end',
+        gap: spacing.spacing_2,
+    }),
+    ...(labelPosition === 'bottom' && {
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+        gap: spacing.spacing_2,
+    }),
+    ...(labelPosition === 'none' && {
+        flexDirection: 'row',
+    }),
+}));
+const ProgressLabel = styled(Typography)(({ theme }) => ({
+    fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    fontWeight: typography.fontWeight.medium,
+    color: colors.grey[800],
+    lineHeight: 1.4,
+    whiteSpace: 'nowrap',
+    flexShrink: 0,
+}));
+const ProgressBarContainer = 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 (jsxs(ProgressWrapper, { labelPosition: labelPosition, children: [jsx(ProgressBarContainer, { labelPosition: labelPosition, children: jsx(StyledLinearProgress, { variant: "determinate", value: variant === 'cancelled' ? 100 : value, "data-variant": variant, labelPosition: labelPosition, ...props }) }), showLabel && jsx(ProgressLabel, { children: displayLabel })] }));
+};
+NeoProgressbar.displayName = 'NeoProgressbar';
+
+const StyledCell = styled('div', {
+    shouldForwardProp: prop => prop !== 'disabled',
+})(({ disabled }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    height: '100%',
+    paddingLeft: spacing.spacing_1_1_2, // 12px input-horizontal
+    paddingRight: spacing.spacing_1_1_2,
+    backgroundColor: disabled
+        ? semanticColors.surfaces.dataGrid.disabled
+        : 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 (jsx(StyledCell, { disabled: disabled, children: !empty && jsx(NeoProgressbar, { value: clampedValue, labelPosition: "none" }) }));
+};
+NeoProgressCell.displayName = 'NeoProgressCell';
+
+const variantColors = (variant) => ({
+    bg: semanticColors.status[variant].light,
+    fg: semanticColors.status[variant].dark,
+    border: semanticColors.status[variant].transparent,
+});
+const StyledChip = styled('div', {
+    shouldForwardProp: prop => prop !== 'disabled' && prop !== 'variant',
+})(({ disabled, variant }) => {
+    const colors = variantColors(variant);
+    return {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: spacing.spacing_3_4,
+        paddingTop: spacing.spacing_1_2,
+        paddingBottom: spacing.spacing_1_2,
+        paddingLeft: spacing.spacing_1_1_2,
+        paddingRight: spacing.spacing_1_1_2,
+        borderRadius: borderRadius.full,
+        border: `1px solid ${disabled ? semanticColors.border.secondary : colors.border}`,
+        backgroundColor: disabled ? semanticColors.surfaces.dataGrid.disabled : colors.bg,
+        color: disabled ? semanticColors.icons.disabled : colors.fg,
+        fontFamily: typography.fontFamily.body,
+        fontSize: typography.fontSize.xs,
+        fontWeight: typography.fontWeight.medium,
+        lineHeight: 1,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        maxWidth: '100%',
+        '& svg': {
+            flexShrink: 0,
+            width: '1em',
+            height: '1em',
+            fontSize: typography.fontSize.xs,
+        },
+    };
+});
+const TooltipErrorPre = styled('pre')({
+    margin: 0,
+    padding: 0,
+    fontFamily: typography.fontFamily.code,
+    fontSize: typography.fontSize.sm,
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: 1.5,
+    color: semanticColors.typography.tooltip,
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-all',
+    maxHeight: 200,
+    overflowY: 'auto',
+});
+const StyledTooltip$1 = styled(Tooltip)({
+    [`& .${tooltipClasses.tooltip}`]: {
+        backgroundColor: semanticColors.surfaces.tooltip,
+        maxWidth: 400,
+        padding: `${spacing.spacing_1}px ${spacing.spacing_1_1_2}px`,
+    },
+    [`& .${tooltipClasses.arrow}`]: {
+        color: 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 (jsx(Box, { component: "span", sx: {
+                color: semanticColors.typography.body,
+                fontSize: typography.fontSize.sm,
+                lineHeight: 1,
+            }, children: '—' }));
+    }
+    const chip = (jsxs(StyledChip, { disabled: disabled, variant: variant, children: [icon, label] }));
+    if (details) {
+        return (jsx(StyledTooltip$1, { title: jsx(TooltipErrorPre, { children: details }), arrow: true, placement: "bottom-start", children: 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 = styled(Box)(({ theme }) => ({
+    position: 'sticky',
+    top: 0,
+    zIndex: theme.zIndex.appBar,
+    backgroundColor: semanticColors.surfaces.white,
+    flexShrink: 0,
+}));
+/**
+ * Page title typography
+ */
+const PageTitle = styled(Typography)(() => ({
+    fontSize: typography.fontSize.h3,
+    fontWeight: typography.fontWeight.medium,
+    lineHeight: 1.4,
+    color: colors.grey['900'], // #111827 - matches Figma typography/page-header
+}));
+/**
+ * Subtitle typography
+ */
+const Subtitle = styled(Typography)(() => ({
+    fontSize: typography.fontSize.sm,
+    color: semanticColors.typography.bodySecondary,
 }));
 /**
  * NeoPageContent - Page content surface from the Moderne Design System
@@ -5385,7 +5669,12 @@ const Subtitle = 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] = useState(false);
     const headerRef = useRef(null);
     const containerRef = useRef(null);
@@ -5437,7 +5726,7 @@ function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
                         flexDirection: 'column',
                         px: disableGutters ? 0 : `${spacing.spacing_2_1_2}px`,
                         pt: sticky ? 0 : `${spacing.spacing_2}px`,
-                        pb: `${spacing.spacing_2_1_2}px`,
+                        pb: isFullBleed ? 0 : `${spacing.spacing_2_1_2}px`,
                         height: '100%',
                         overflow: 'auto',
                     }, children: [sticky ? (jsx(StickyHeader, { ref: headerRef, sx: {
@@ -5525,84 +5814,6 @@ function NeoPaginatedGrid({ slots, pageSizeOptions, slotProps: userSlotProps, ..
 }
 NeoPaginatedGrid.displayName = 'NeoPaginatedGrid';
 
-const StyledLinearProgress = styled(LinearProgress, {
-    shouldForwardProp: prop => prop !== 'labelPosition',
-})(() => ({
-    height: 8,
-    borderRadius: borderRadius.xS,
-    backgroundColor: colors.grey[200],
-    [`& .${linearProgressClasses.bar}`]: {
-        borderRadius: borderRadius.xS,
-        backgroundColor: colors.digitalBlue[500],
-    },
-    [`&.${linearProgressClasses.colorPrimary}`]: {
-        backgroundColor: colors.grey[200],
-        [`& .${linearProgressClasses.bar}`]: {
-            backgroundColor: colors.digitalBlue[500],
-        },
-    },
-    // Cancelled variant uses warning color
-    '&[data-variant="cancelled"]': {
-        [`& .${linearProgressClasses.bar}`]: {
-            backgroundColor: semanticColors.status.warning.default,
-        },
-    },
-}));
-const ProgressWrapper = styled('div')(({ labelPosition }) => ({
-    display: 'flex',
-    width: '100%',
-    ...(labelPosition === 'right' && {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: spacing.spacing_3,
-    }),
-    ...(labelPosition === 'top' && {
-        flexDirection: 'column-reverse',
-        alignItems: 'flex-end',
-        gap: spacing.spacing_2,
-    }),
-    ...(labelPosition === 'bottom' && {
-        flexDirection: 'column',
-        alignItems: 'flex-end',
-        gap: spacing.spacing_2,
-    }),
-    ...(labelPosition === 'none' && {
-        flexDirection: 'row',
-    }),
-}));
-const ProgressLabel = styled(Typography)(({ theme }) => ({
-    fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-    fontWeight: typography.fontWeight.medium,
-    color: colors.grey[800],
-    lineHeight: 1.4,
-    whiteSpace: 'nowrap',
-    flexShrink: 0,
-}));
-const ProgressBarContainer = 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 (jsxs(ProgressWrapper, { labelPosition: labelPosition, children: [jsx(ProgressBarContainer, { labelPosition: labelPosition, children: jsx(StyledLinearProgress, { variant: "determinate", value: variant === 'cancelled' ? 100 : value, "data-variant": variant, labelPosition: labelPosition, ...props }) }), showLabel && jsx(ProgressLabel, { children: displayLabel })] }));
-};
-NeoProgressbar.displayName = 'NeoProgressbar';
-
 const StyledTextField = styled(TextField)(({ theme }) => ({
     [`& .${inputBaseClasses.root}`]: {
         height: spacing.spacing_5,
@@ -5845,6 +6056,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 = styled('div')({});
+
 const StyledSearchChip = styled(InputBase)(({ theme }) => ({
     borderRadius: borderRadius.full,
     border: `1px solid ${semanticColors.buttons.secondary.defaultBorder}`,
@@ -5910,6 +6128,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 (jsxs(StyledFormControl, { size: size, error: destructive, disabled: disabled, children: [label && (jsxs(StyledInputLabel, { htmlFor: inputId, size: size, infoIcon: !!infoIcon, disabled: disabled, error: destructive, shrink: true, children: [label, required && jsx("span", { "aria-hidden": "true", children: "*" }), infoIcon && jsx(InfoIconWrapper, { children: infoIcon })] })), jsx(NeoSelect, { id: inputId, disabled: disabled, error: destructive, "aria-describedby": helperTextId, ...selectProps, children: children ??
+                    options?.map(opt => (jsx(NeoMenuItem, { value: opt.value, disabled: opt.disabled, children: opt.label }, String(opt.value)))) }), (helperText || errorMessage) && (jsx(StyledFormHelperText, { id: helperTextId, error: destructive, disabled: disabled, sx: { marginTop: `${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 = styled('div')({});
+
 const StyledSkeleton = styled(Skeleton, {
     shouldForwardProp: prop => prop !== 'colorTheme' && prop !== 'position',
 })(({ theme, colorTheme = 'light', position = 'start' }) => ({
@@ -5957,6 +6207,111 @@ const NeoSkeleton = ({ colorTheme = 'light', position = 'start', ...props }) =>
 };
 NeoSkeleton.displayName = 'NeoSkeleton';
 
+const sizePadding = {
+    small: `${spacing.spacing_3_4}px ${spacing.spacing_1_1_2}px`,
+    medium: `${spacing.spacing_1_1_2}px ${spacing.spacing_2}px`,
+};
+const sizeFontSize = {
+    small: typography.fontSize.xs,
+    medium: typography.fontSize.sm,
+};
+const StyledTable = styled(MuiTable, {
+    shouldForwardProp: prop => prop !== 'tableSize',
+})(({ theme, tableSize = 'small' }) => ({
+    borderCollapse: 'separate',
+    borderSpacing: 0,
+    [`& .${tableCellClasses.head}`]: {
+        backgroundColor: colors.grey[50],
+        color: semanticColors.typography.body,
+        fontFamily: typography.fontFamily.body,
+        fontSize: theme.typography.pxToRem(sizeFontSize[tableSize]),
+        fontWeight: typography.fontWeight.semiBold,
+        lineHeight: 1.4,
+        padding: sizePadding[tableSize],
+        borderBottom: `1px solid ${semanticColors.border.secondary}`,
+    },
+    [`& .${tableCellClasses.body}`]: {
+        color: semanticColors.typography.body,
+        fontFamily: typography.fontFamily.body,
+        fontSize: theme.typography.pxToRem(sizeFontSize[tableSize]),
+        fontWeight: typography.fontWeight.regular,
+        lineHeight: 1.4,
+        padding: sizePadding[tableSize],
+        borderBottom: `1px solid ${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 .${tableCellClasses.body}`]: {
+        borderBottom: 'none',
+    },
+}));
+const StyledContainer = styled('div', {
+    shouldForwardProp: prop => prop !== 'tableVariant',
+})(({ tableVariant = 'bordered' }) => tableVariant === 'bordered'
+    ? {
+        border: `1px solid ${semanticColors.border.secondary}`,
+        borderRadius: borderRadius.card,
+        overflow: 'hidden',
+        backgroundColor: 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 }) => (jsx(StyledContainer, { tableVariant: variant, children: jsx(TableContainer, { children: jsxs(StyledTable, { tableSize: size, "aria-label": ariaLabel, ...tableProps, children: [jsx(TableHead, { children: jsx(TableRow, { children: columns.map(col => (jsx(TableCell, { align: col.align ?? 'left', style: col.width ? { width: col.width } : undefined, children: col.header }, col.key))) }) }), jsx(TableBody, { children: rows.map((row, i) => (jsx(TableRow, { children: columns.map(col => (jsx(TableCell, { align: col.align ?? 'left', children: row[col.key] ?? '' }, col.key))) }, i))) })] }) }) }));
+NeoTable.displayName = 'NeoTable';
+
+const StyledTabPanel = styled(Box, {
+    shouldForwardProp: prop => prop !== 'tabPanelVariant',
+})(({ tabPanelVariant = 'default' }) => ({
+    backgroundColor: 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: 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 (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
  *
@@ -6336,6 +6691,102 @@ const NeoToggle = ({ size = 'medium', label, helperText, disabled, ...props }) =
 };
 NeoToggle.displayName = 'NeoToggle';
 
+const sizeStyles = {
+    small: {
+        height: 24,
+        fontSize: typography.fontSize.xs,
+    },
+    medium: {
+        height: 32,
+        fontSize: typography.fontSize.sm,
+    },
+};
+const StyledToggleButton$1 = styled(MuiToggleButton, {
+    shouldForwardProp: prop => prop !== 'toggleSize',
+})(({ theme, toggleSize = 'medium' }) => ({
+    height: sizeStyles[toggleSize].height,
+    padding: `0 ${spacing.spacing_1_1_2}px`,
+    fontFamily: typography.fontFamily.body,
+    fontSize: theme.typography.pxToRem(sizeStyles[toggleSize].fontSize),
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: 1,
+    color: semanticColors.typography.bodySecondary,
+    backgroundColor: 'transparent',
+    border: 'none',
+    textTransform: 'none',
+    transition: theme.transitions.create(['background-color', 'color'], {
+        duration: theme.transitions.duration.short,
+    }),
+    '&:hover': {
+        backgroundColor: colors.grey[100],
+        color: semanticColors.typography.body,
+    },
+    '&.Mui-selected, &.Mui-selected:hover': {
+        backgroundColor: colors.grey[100],
+        color: semanticColors.typography.body,
+        fontWeight: typography.fontWeight.semiBold,
+    },
+    '&.Mui-focusVisible': {
+        outline: `2px solid ${semanticColors.border.focus}`,
+        outlineOffset: -2,
+    },
+    '&.Mui-disabled': {
+        color: 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 }) => (jsx(StyledToggleButton$1, { toggleSize: size, ...props, children: children }));
+NeoToggleButton.displayName = 'NeoToggleButton';
+
+const StyledToggleButtonGroup$1 = styled(MuiToggleButtonGroup)({
+    borderRadius: borderRadius.button,
+    border: `1px solid ${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.
+    [`& .${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 = Children.map(children, child => isValidElement(child) && child.type === NeoToggleButton
+        ? cloneElement(child, { size })
+        : child);
+    return jsx(StyledToggleButtonGroup$1, { ...props, children: sized });
+};
+NeoToggleButtonGroup.displayName = 'NeoToggleButtonGroup';
+
+/**
+ * NeoToggleButtonWithText
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11565-10485
+ */
+const NeoToggleButtonWithText = styled('div')({});
+
 const StyledToolbar = styled(Toolbar)(({ theme }) => ({
     backgroundColor: semanticColors.surfaces.white,
     minHeight: 'auto',
@@ -6477,6 +6928,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 = styled('div')({});
+
+/**
+ * NeoTourModal
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=12408-1800
+ */
+const NeoTourModal = styled('div')({});
+
 /**
  * Custom label component that reads extra slot data from the item model.
  * Used as `slots.label` on the TreeItem.
@@ -6681,5 +7146,5 @@ NeoTypologyControl.displayName = 'NeoTypologyControl';
 
 const version = '0.0.0-development';
 
-export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCheckboxWithText, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDownloadToast, NeoSelect as NeoDropdown, NeoMenu as NeoDropdownMenu, NeoMenuItem as NeoDropdownMenuItem, NeoMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, neoRowHeights, version };
+export { ActivityScene, CIRCLE_RADIUS, NeoActionsCell, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert, NeoAvatarCell, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCheckboxWithText, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDatePickerListItem, NeoDatePickerMenu, NeoDivider, NeoDot, NeoDownloadToast, NeoSelect as NeoDropdown, NeoMenu as NeoDropdownMenu, NeoMenuItem as NeoDropdownMenuItem, NeoMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconCell, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoLogoCell, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressCell, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoRadioButtonWithText, NeoSearchChip, NeoSelect, NeoSelectField, NeoMenuItem as NeoSelectOption, NeoSideNav, NeoSkeleton, NeoStatusBadgeCell, NeoStatusCell, NeoTab, NeoTabPanel, NeoTable, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToggleButton, NeoToggleButtonGroup, NeoToggleButtonWithText, NeoToolbar, NeoTooltip, NeoTopNav, NeoTourModal, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, neoRowHeights, version };
 //# sourceMappingURL=index.esm.js.map