@moderneinc/neo-styled-components 5.0.0-next.e88b47 → 5.0.0

package/dist/index.esm.js

@@ -1,13 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { semanticColors, spacing, typography, borderRadius, colors, shadows } from '@moderneinc/neo-design';
+import { semanticColors, spacing, typography, borderRadius, shadows, colors, semanticTypography } from '@moderneinc/neo-design';
 import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import Chip, { chipClasses } from '@mui/material/Chip';
 import MuiAvatar from '@mui/material/Avatar';
-import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
+import SvgIcon 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';
@@ -36,7 +36,6 @@ import { pickersCalendarHeaderClasses } from '@mui/x-date-pickers/PickersCalenda
 import { PickersShortcuts } from '@mui/x-date-pickers/PickersShortcuts';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { dateRangePickerDayClasses } from '@mui/x-date-pickers-pro/DateRangePickerDay';
-import Badge, { badgeClasses } from '@mui/material/Badge';
 import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
 import Paper, { paperClasses } from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
@@ -52,9 +51,16 @@ import Dialog, { dialogClasses } from '@mui/material/Dialog';
 import DialogActions, { dialogActionsClasses } from '@mui/material/DialogActions';
 import DialogContent, { dialogContentClasses } from '@mui/material/DialogContent';
 import Fab from '@mui/material/Fab';
-import Fade from '@mui/material/Fade';
+import Fade$1 from '@mui/material/Fade';
 import Radio, { radioClasses } from '@mui/material/Radio';
+import { keyframes, Box as Box$1 } from '@mui/material';
 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$3 = 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$3 = 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,23 +139,26 @@ const StyledChip$3 = styled(Chip)(({ theme }) => ({
  * - TrailingIcon → deleteIcon prop (pass React element)
  * - Label → label prop
  */
-const NeoBadge = (props) => {
-    return jsx(StyledChip$3, { ...props });
+const NeoBadge = ({ size = 'medium', variant = 'filled', ...props }) => {
+    return jsx(StyledChip$3, { ...props, badgeSize: size, badgeVariant: variant });
 };
 NeoBadge.displayName = 'NeoBadge';
 
+const djb2Hash = (str) => {
+    let hash = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash * 33) ^ str.charCodeAt(i);
+    }
+    return hash >>> 0;
+};
 /**
- * Shared color palette for avatar components (GeneralAvatar, NavigationAvatar).
- * Maps color index (1-7) to background color token pairs.
+ * Deterministically derives an HSL background color from a string seed.
+ * Produces pastel colors matching the aesthetic of the status.avatar.initials
+ * semantic tokens (fixed 80% saturation, 90% lightness; only hue varies).
  */
-const avatarColorPalette = {
-    1: { bg: colors.digitalBlue[100] },
-    2: { bg: colors.digitalGreen[100] },
-    3: { bg: colors.gold[100] },
-    4: { bg: colors.red[100] },
-    5: { bg: colors.violet[100] },
-    6: { bg: colors.tealGreen[100] },
-    7: { bg: colors.orange[100] },
+const avatarColorFromSeed = (seed) => {
+    const hue = seed ? djb2Hash(seed) % 360 : 235;
+    return `hsl(${hue}, 80%, 90%)`;
 };
 
 /**
@@ -179,14 +173,13 @@ const focusRingStyles = {
 };
 
 const sizeConfig$1 = {
-    small: { width: spacing.spacing_4, height: spacing.spacing_4, fontSize: typography.fontSize.xs },
+    small: { width: spacing.spacing_4, height: spacing.spacing_4, fontSize: typography.fontSize.sm },
     medium: { width: spacing.spacing_5, height: spacing.spacing_5, fontSize: typography.fontSize.sm },
 };
 const StyledAvatar = styled(MuiAvatar, {
-    shouldForwardProp: prop => prop !== 'avatarSize' && prop !== 'colorIndex',
-})(({ theme, avatarSize, colorIndex }) => {
+    shouldForwardProp: prop => prop !== 'avatarSize' && prop !== 'backgroundColor',
+})(({ theme, avatarSize, backgroundColor }) => {
     const size = sizeConfig$1[avatarSize];
-    const palette = avatarColorPalette[colorIndex];
     return {
         boxSizing: 'border-box',
         width: size.width,
@@ -196,7 +189,7 @@ const StyledAvatar = styled(MuiAvatar, {
         fontWeight: typography.fontWeight.regular,
         lineHeight: 1,
         color: semanticColors.typography.body,
-        backgroundColor: palette ? palette.bg : undefined,
+        backgroundColor,
         border: `1px solid ${semanticColors.border.primary}`,
         '&:focus-visible': {
             ...focusRingStyles,
@@ -209,8 +202,9 @@ const StyledAvatar = styled(MuiAvatar, {
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
  */
-const NeoGeneralAvatar = ({ size = 'medium', colorIndex = 0, children, ...props }) => {
-    return (jsx(StyledAvatar, { avatarSize: size, colorIndex: colorIndex, ...props, children: children }));
+const NeoGeneralAvatar = ({ size = 'medium', alt, children, ...props }) => {
+    const backgroundColor = avatarColorFromSeed(alt);
+    return (jsx(StyledAvatar, { avatarSize: size, backgroundColor: backgroundColor, alt: alt, ...props, children: children }));
 };
 NeoGeneralAvatar.displayName = 'NeoGeneralAvatar';
 
@@ -460,7 +454,7 @@ const NeoActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 NeoActivityIndicatorCell.displayName = 'NeoActivityIndicatorCell';
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -471,7 +465,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 }).join(" ").trim();
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -480,7 +474,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -492,7 +486,7 @@ const toCamelCase = (string) => string.replace(
 );
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -505,7 +499,7 @@ const toPascalCase = (string) => {
 };
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -524,7 +518,7 @@ var defaultAttributes = {
 };
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -574,7 +568,7 @@ const Icon = forwardRef(
 );
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -599,42 +593,42 @@ const createLucideIcon = (iconName, iconNode) => {
 };
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$k = [
+const __iconNode$p = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$k);
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$p);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$j = [
+const __iconNode$o = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$j);
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$o);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$i = [
+const __iconNode$n = [
   [
     "path",
     {
@@ -645,17 +639,17 @@ const __iconNode$i = [
   ["line", { x1: "12", x2: "12", y1: "16", y2: "12", key: "1y1yb1" }],
   ["line", { x1: "12", x2: "12.01", y1: "8", y2: "8", key: "110wyk" }]
 ];
-const BadgeInfo = createLucideIcon("badge-info", __iconNode$i);
+const BadgeInfo = createLucideIcon("badge-info", __iconNode$n);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$h = [
+const __iconNode$m = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
@@ -667,181 +661,252 @@ const __iconNode$h = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$h);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$m);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$g = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$g);
+const __iconNode$l = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$l);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$f = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$f);
+const __iconNode$k = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$k);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$e = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$e);
+const __iconNode$j = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$j);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$d = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$d);
+const __iconNode$i = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$i);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$c = [
+const __iconNode$h = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$c);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$h);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$b = [
+const __iconNode$g = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$b);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$g);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$a = [
+const __iconNode$f = [
   ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
   ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$a);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$f);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$9 = [
+const __iconNode$e = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$9);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$e);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$8 = [
+const __iconNode$d = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
 ];
-const Columns3 = createLucideIcon("columns-3", __iconNode$8);
+const Columns3 = createLucideIcon("columns-3", __iconNode$d);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$7 = [
+const __iconNode$c = [
   ["path", { d: "M2 5h20", key: "1fs1ex" }],
   ["path", { d: "M6 12h12", key: "8npq4p" }],
   ["path", { d: "M9 19h6", key: "456am0" }]
 ];
-const ListFilter = createLucideIcon("list-filter", __iconNode$7);
+const ListFilter = createLucideIcon("list-filter", __iconNode$c);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$6 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$6);
+const __iconNode$b = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$b);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$5 = [
+const __iconNode$a = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
+];
+const PanelLeftClose = createLucideIcon("panel-left-close", __iconNode$a);
+
+/**
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$9 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M9 3v18", key: "fh3hqa" }],
+  ["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
+];
+const PanelLeftOpen = createLucideIcon("panel-left-open", __iconNode$9);
+
+/**
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$8 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$5);
+const Plus = createLucideIcon("plus", __iconNode$8);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
 
 
-const __iconNode$4 = [
+const __iconNode$7 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$4);
+const Search = createLucideIcon("search", __iconNode$7);
+
+/**
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$6 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
+];
+const SquareCheck = createLucideIcon("square-check", __iconNode$6);
+
+/**
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$5 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
+  ["path", { d: "M8 12h8", key: "1wcyev" }]
+];
+const SquareMinus = createLucideIcon("square-minus", __iconNode$5);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$4 = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
+];
+const Square = createLucideIcon("square", __iconNode$4);
+
+/**
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -858,7 +923,7 @@ const __iconNode$3 = [
 const Trash2 = createLucideIcon("trash-2", __iconNode$3);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -879,7 +944,7 @@ const __iconNode$2 = [
 const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$2);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -898,7 +963,7 @@ const __iconNode$1 = [
 const WifiOff = createLucideIcon("wifi-off", __iconNode$1);
 
 /**
- * @license lucide-react v1.7.0 - ISC
+ * @license lucide-react v1.16.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -921,22 +986,29 @@ 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' && prop !== 'hasChildren',
+})(({ theme, intent = 'success', alertType = 'outlined', alertSize = 'default', hasChildren = false, }) => {
     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 }
+            : hasChildren
+                ? { minHeight: spacing.spacing_8, height: 'auto' }
+                : { height: spacing.spacing_8 }),
         width: '100%',
         borderRadius: borderRadius.xS,
-        alignItems: 'center',
+        alignItems: hasChildren ? 'flex-start' : 'center',
         fontFamily: typography.fontFamily.body,
         fontSize: theme.typography.pxToRem(typography.fontSize.default),
         fontWeight: typography.fontWeight.semiBold,
         lineHeight: 1.5,
-        padding: theme.spacing(0, 2),
+        padding: hasChildren ? theme.spacing(1.5, 2) : theme.spacing(0, 2),
         backgroundColor: isFilled ? palette.dark : palette.light,
         border: isFilled ? 'none' : `1px solid ${palette.transparent}`,
         color: isFilled ? semanticColors.typography.tooltip : semanticColors.typography.body,
@@ -953,7 +1025,7 @@ const StyledAlert$2 = styled(Alert, {
             flex: 1,
             display: 'flex',
             flexDirection: 'column',
-            justifyContent: 'center',
+            justifyContent: hasChildren ? 'flex-start' : 'center',
             '& span:last-child': {
                 fontSize: theme.typography.pxToRem(typography.fontSize.sm),
                 fontWeight: typography.fontWeight.medium,
@@ -991,9 +1063,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, children, ...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, hasChildren: Boolean(children), icon: icon ?? defaultIcon, action: action, children: [jsx("span", { children: title }), description && jsx("span", { children: description }), children] }));
 };
 NeoAlert.displayName = 'NeoAlert';
 
@@ -1020,38 +1092,43 @@ const StyledAlert$1 = styled(Alert, {
         };
     return {
         width: '100%',
-        minHeight: 52,
-        paddingTop: spacing.spacing_3_4,
-        paddingBottom: spacing.spacing_3_4,
-        paddingLeft: spacing.spacing_3,
-        paddingRight: spacing.spacing_3,
-        gap: spacing.spacing_2,
+        // Include padding in the width so the full-width banner never overflows its
+        // container (don't rely on a global border-box reset being present).
+        boxSizing: 'border-box',
+        // Square corners by default: banners are full-width and typically sit flush
+        // against the top of the viewport, so rounded corners would break the seam.
+        borderRadius: 0,
+        minHeight: 32,
+        paddingTop: spacing.spacing_1_2,
+        paddingBottom: spacing.spacing_1_2,
+        paddingLeft: spacing.spacing_2,
+        paddingRight: spacing.spacing_2,
+        gap: spacing.spacing_1,
         alignItems: 'center',
         justifyContent: messagePosition === 'center' ? 'center' : 'flex-start',
         ...(messagePosition === 'center' && { position: 'relative' }),
-        boxShadow: `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`,
-        fontSize: typography.fontSize.default,
+        fontSize: typography.fontSize.sm,
         fontWeight: typography.fontWeight.medium,
         lineHeight: 1.5,
         ...typeStyles,
         [`& .${alertClasses.icon}`]: {
             padding: 0,
             opacity: 1,
-            fontSize: typography.fontSize.h2,
+            fontSize: typography.fontSize.default,
             color: 'inherit',
         },
         [`& .${alertClasses.message}`]: {
             padding: 0,
             display: 'flex',
             alignItems: 'center',
-            gap: spacing.spacing_2,
+            gap: spacing.spacing_1,
             ...(messagePosition === 'left' && { flex: 1 }),
         },
         [`& .${alertClasses.action}`]: {
             padding: 0,
             ...(messagePosition === 'center' && {
                 position: 'absolute',
-                right: spacing.spacing_3,
+                right: spacing.spacing_2,
             }),
         },
     };
@@ -1069,6 +1146,8 @@ const LinkText = styled('span')(({ bannerType = 'outlined' }) => ({
     },
 }));
 const StyledIconButton = styled(IconButton)(({ closeIconColor }) => ({
+    minWidth: 24,
+    minHeight: 24,
     padding: 0,
     color: closeIconColor,
     '&:hover': {
@@ -1085,7 +1164,7 @@ const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePositio
         return null;
     }
     const closeIconColor = type === 'filled' ? semanticColors.surfaces.white : intentColors$1[intent].default;
-    return (jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
+    return (jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 16 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 NeoBanner.displayName = 'NeoBanner';
 
@@ -1105,12 +1184,12 @@ const StyledBreadcrumbLink = styled(Link, {
     fontWeight: typography.fontWeight.medium,
     lineHeight: 1,
     textDecoration: 'none',
-    color: current ? semanticColors.buttons.primary.default : semanticColors.typography.bodySecondary,
+    color: current ? semanticColors.typography.bodySecondary : semanticColors.typography.link.primary,
     cursor: current ? 'default' : 'pointer',
     borderRadius: borderRadius.xS,
     transition: 'color 0.2s ease-in-out',
     '&:hover': {
-        color: current ? semanticColors.buttons.tertiary.hover : semanticColors.icons.hover,
+        color: current ? semanticColors.icons.hover : semanticColors.buttons.tertiary.hover,
     },
     '&:focus-visible': {
         outline: `2px solid ${semanticColors.border.focus}`,
@@ -1493,6 +1572,15 @@ const NeoButtonTabGroup = ({ size = 'medium', exclusive = true, ...props }) => {
 };
 NeoButtonTabGroup.displayName = 'NeoButtonTabGroup';
 
+/**
+ * NeoCanceledIcon - Outlined circle struck through by a horizontal line.
+ *
+ * Marks a CANCELED state. Color comes entirely from `currentColor` (stroke plus
+ * a 10% fill tint); set it via the `color`/`sx` prop or a parent.
+ */
+const NeoCanceledIcon = (props) => (jsx(SvgIcon, { viewBox: "0 0 24 24", fill: "none", ...props, children: jsxs("g", { stroke: "currentColor", strokeWidth: "1.35", children: [jsx("path", { fill: "currentColor", fillOpacity: "0.1", d: "M2.55 11.95c0 2.405.918 4.812 2.753 6.647a9.4 9.4 0 0 0 6.647 2.753c2.489 0 4.877-.99 6.646-2.753a9.3 9.3 0 0 0 2.039-3.044 9.4 9.4 0 0 0 .715-3.602m-18.8-.001a9.37 9.37 0 0 1 2.753-6.647A9.4 9.4 0 0 1 11.95 2.55c2.489 0 4.877.99 6.646 2.753a9.3 9.3 0 0 1 2.039 3.045 9.4 9.4 0 0 1 .715 3.603" }), jsx("path", { fill: "none", d: "M3 11.825h18" })] }) }));
+NeoCanceledIcon.displayName = 'NeoCanceledIcon';
+
 // ─── Shared ──────────────────────────────────────────────────────────────────
 const activeShadow = `${shadows.card.x}px ${shadows.card.y}px ${shadows.card.blur}px ${shadows.card.spread}px ${shadows.card.shadow}`;
 // ─── Small card styled components ────────────────────────────────────────────
@@ -1684,20 +1772,6 @@ const NeoCard = (props) => {
 };
 NeoCard.displayName = 'NeoCard';
 
-// Border radius per size (from Figma)
-const borderRadiusConfig = {
-    xs: 2,
-    small: 3,
-    medium: 4,
-};
-// Unchecked: Rounded square outline (20x20 viewBox)
-const UncheckedIcon$1 = ({ size = 'medium' }) => (jsx(SvgIcon, { viewBox: "0 0 20 20", children: jsx("rect", { x: "1", y: "1", width: "18", height: "18", rx: borderRadiusConfig[size], fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }));
-// Checked: Filled rounded square with white checkmark
-// Path scaled from Untitled UI 24x24 (M20 6L9 17L4 12) to 20x20
-const CheckedIcon$1 = ({ size = 'medium' }) => (jsxs(SvgIcon, { viewBox: "0 0 20 20", children: [jsx("rect", { width: "20", height: "20", rx: borderRadiusConfig[size], fill: "currentColor" }), jsx("path", { d: "M15 6L8.5 13L5 9.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] }));
-// Indeterminate: Filled rounded square with white minus
-// Path scaled from Untitled UI 24x24 (M5 12H19) to 20x20
-const IndeterminateIcon = ({ size = 'medium' }) => (jsxs(SvgIcon, { viewBox: "0 0 20 20", children: [jsx("rect", { width: "20", height: "20", rx: borderRadiusConfig[size], fill: "currentColor" }), jsx("path", { d: "M5 10H15", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" })] }));
 const CheckboxContainer = styled('label')(({ disabled }) => ({
     display: 'inline-flex',
     alignItems: 'flex-start',
@@ -1730,7 +1804,7 @@ const HelperText$2 = styled('span')(({ theme, size = 'medium' }) => ({
     lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
     color: semanticColors.typography.bodySecondary,
 }));
-// Figma-exact border radius for xs checkbox — no matching design token
+// xs focus-ring radius — no matching design token (box corner comes from the icon)
 const FIGMA_XS_BORDER_RADIUS = 1;
 const StyledCheckbox = styled(Checkbox, {
     shouldForwardProp: prop => prop !== 'size',
@@ -1743,11 +1817,11 @@ const StyledCheckbox = styled(Checkbox, {
         },
         small: {
             size: 16,
-            borderRadius: borderRadius.xXS, // From Figma: 2px for small
+            borderRadius: borderRadius.xXS, // focus-ring radius (small)
         },
         medium: {
             size: 20,
-            borderRadius: borderRadius.xS, // From Figma: 4px for medium
+            borderRadius: borderRadius.xS, // focus-ring radius (medium)
         },
     };
     const config = sizeConfig[size];
@@ -1759,37 +1833,30 @@ const StyledCheckbox = styled(Checkbox, {
         color: semanticColors.border.primary,
         borderRadius: config.borderRadius,
         flexShrink: 0,
-        // Root element
-        [`&.${checkboxClasses.root}`]: {
-            '&:hover': {
-                backgroundColor: 'transparent',
-            },
+        // Suppress MUI's grey hover background
+        '&:hover': {
+            backgroundColor: 'transparent',
         },
-        // Checkbox icon (unchecked)
-        [`& .${checkboxClasses.root}`]: {
-            width: config.size,
-            height: config.size,
+        // Hover on the unchecked box — subtle blue outline affordance (enabled only)
+        [`&:hover:not(.${checkboxClasses.checked}):not(.${checkboxClasses.indeterminate}):not(.${checkboxClasses.disabled})`]: {
+            color: colors.digitalBlue[300],
         },
-        // Checked state
+        // Checked / Indeterminate — primary blue outline + mark
         [`&.${checkboxClasses.checked}`]: {
-            color: semanticColors.buttons.primary.default,
+            color: colors.digitalBlue[600],
         },
-        // Indeterminate state
         [`&.${checkboxClasses.indeterminate}`]: {
-            color: semanticColors.buttons.primary.default,
+            color: colors.digitalBlue[600],
         },
-        // Disabled state
+        // Disabled — enabled colors dimmed to 40%. Checked/indeterminate keep
+        // digitalBlue[600] via the rules above; re-assert the unchecked outline
+        // token so it beats MUI's default `.Mui-disabled` color.
         [`&.${checkboxClasses.disabled}`]: {
-            color: semanticColors.border.primary,
+            opacity: 0.4,
             cursor: 'not-allowed',
-            // When checked and disabled
-            [`&.${checkboxClasses.checked}`]: {
-                color: semanticColors.border.primary,
-            },
-            // When indeterminate and disabled
-            [`&.${checkboxClasses.indeterminate}`]: {
-                color: semanticColors.border.primary,
-            },
+        },
+        [`&.${checkboxClasses.disabled}:not(.${checkboxClasses.checked}):not(.${checkboxClasses.indeterminate})`]: {
+            color: semanticColors.border.primary,
         },
         // Focus visible for keyboard navigation
         '&.Mui-focusVisible': {
@@ -1797,11 +1864,10 @@ const StyledCheckbox = styled(Checkbox, {
             outlineOffset: 2,
             borderRadius: config.borderRadius,
         },
-        // Custom SVG icons
+        // Size the Lucide icon (color comes from `color` → currentColor → stroke)
         '& svg': {
             width: config.size,
             height: config.size,
-            fill: 'currentColor',
         },
     };
 });
@@ -1852,10 +1918,10 @@ const StyledCheckbox = styled(Checkbox, {
 const NeoCheckbox = ({ size = 'medium', label, helperText, disabled, icon, checkedIcon, indeterminateIcon, className, ...props }) => {
     // Add custom class to identify NeoCheckbox instances
     const combinedClassName = className ? `neo-checkbox ${className}` : 'neo-checkbox';
-    // Create size-specific icons
-    const defaultIcon = icon || jsx(UncheckedIcon$1, { size: size });
-    const defaultCheckedIcon = checkedIcon || jsx(CheckedIcon$1, { size: size });
-    const defaultIndeterminateIcon = indeterminateIcon || jsx(IndeterminateIcon, { size: size });
+    // Default icons (sized via CSS on the SVG); overridable per instance
+    const defaultIcon = icon || jsx(Square, {});
+    const defaultCheckedIcon = checkedIcon || jsx(SquareCheck, {});
+    const defaultIndeterminateIcon = indeterminateIcon || jsx(SquareMinus, {});
     // If no label, return just the checkbox
     if (!label && !helperText) {
         return (jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }));
@@ -2167,7 +2233,8 @@ const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
     gap: theme.spacing(2),
     borderRadius: 0,
     color: semanticColors.icons.default,
-    fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    textDecoration: 'none',
+    fontSize: theme.typography.pxToRem(typography.fontSize.default),
     fontWeight: typography.fontWeight.regular,
     lineHeight: `${typography.lineHeight.s}px`,
     transition: theme.transitions.create(['background-color'], {
@@ -2233,7 +2300,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
@@ -2248,11 +2315,22 @@ const Shortcut = styled('span')(({ theme }) => ({
  *
  * // Disabled state
  * <NeoMenuItem disabled>Disabled item</NeoMenuItem>
+ *
+ * // As an anchor — middle-click/right-click open in a new tab
+ * <NeoMenuItem href="/api-explorer">API explorer</NeoMenuItem>
+ *
+ * // External link
+ * <NeoMenuItem href="https://docs.example.com" target="_blank" rel="noopener noreferrer">
+ *   Documentation
+ * </NeoMenuItem>
+ *
+ * // Client-side routing (Next.js)
+ * <NeoMenuItem component={NextLink} href="/api-explorer">API explorer</NeoMenuItem>
  * ```
  */
-const NeoMenuItem = ({ icon, shortcut, secondaryText, children, ...props }) => {
-    return (jsx(StyledMenuItem, { ...props, children: jsxs(MenuItemContent, { children: [icon && jsx(IconWrapper$1, { children: icon }), jsxs(LabelContainer$3, { children: [jsx(Label$3, { children: children }), secondaryText && jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsx(Shortcut, { children: shortcut })] }) }));
-};
+function NeoMenuItem({ icon, shortcut, secondaryText, children, ...rest }) {
+    return (jsx(StyledMenuItem, { ...rest, children: jsxs(MenuItemContent, { children: [icon && jsx(IconWrapper$1, { children: icon }), jsxs(LabelContainer$3, { children: [jsx(Label$3, { children: children }), secondaryText && jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsx(Shortcut, { children: shortcut })] }) }));
+}
 NeoMenuItem.displayName = 'NeoMenuItem';
 
 /**
@@ -2536,8 +2614,10 @@ const getDataGridHeaderStyles = () => {
         [`& .${gridClasses.columnHeader}`]: {
             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
@@ -2575,12 +2655,19 @@ const getDataGridHeaderStyles = () => {
                 },
             },
         },
+        // MUI clips this container when header vertical padding leaves < 16px of content
+        // area (e.g. compact: 38px − 24px padding = 14px). overflow:visible lets the
+        // sort icon render at full 16px without being cropped.
+        [`& .${gridClasses.columnHeaderTitleContainer}`]: {
+            overflow: 'visible',
+            lineHeight: 1,
+        },
         // Style MUI's sort icon to match Neo design (16x16)
         [`& .${gridClasses.iconButtonContainer}`]: {
             width: 16,
             height: 16,
             marginLeft: `${spacing.spacing_1_2}px`,
-            [`& .${checkboxClasses.root}`]: {
+            '& button': {
                 padding: 0,
                 width: 16,
                 height: 16,
@@ -2694,11 +2781,13 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         ...getDataGridHeaderStyles(),
         ...getDataGridRowStyles(),
         border: `1px solid ${semanticColors.border.secondary}`,
-        // Style row selection checkboxes to match header (16px, proper spacing)
+        // Style row selection checkboxes to match header (16px, proper spacing).
+        // Target `& svg` (not `.MuiSvgIcon-root`) so the rule also matches the
+        // lucide `<svg>` icons NeoCheckbox renders, mirroring the header rule.
         [`& .${gridClasses.cellCheckbox}`]: {
             [`& .${checkboxClasses.root}`]: {
                 padding: `${spacing.spacing_1}px`,
-                [`& .${svgIconClasses.root}`]: {
+                '& svg': {
                     width: 16,
                     height: 16,
                 },
@@ -2747,7 +2836,7 @@ function NeoDataGridColumnsButton() {
 }
 NeoDataGridColumnsButton.displayName = 'NeoDataGridColumnsButton';
 
-const sizeStyles = {
+const sizeStyles$1 = {
     small: {
         height: 16,
         minWidth: 16,
@@ -2820,9 +2909,11 @@ const StyledChip$2 = styled(Chip)(({ theme, size, variant, color }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     lineHeight: 1,
     fontWeight: typography.fontWeight.medium,
-    ...(size && sizeStyles[size]),
+    overflow: 'visible',
+    ...(size && sizeStyles$1[size]),
     [`& .${chipClasses.label}`]: {
         padding: 0,
+        overflow: 'visible',
     },
     ...(variant === 'outlined' &&
         color &&
@@ -3727,6 +3818,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),
@@ -3767,26 +3872,34 @@ const sizeMap = {
     medium: 10,
     large: 12,
 };
-const StyledBadge = styled(Badge)(({ ownerState }) => {
+const StyledDot = styled('span', {
+    shouldForwardProp: prop => prop !== 'ownerState',
+})(({ ownerState }) => {
     const size = sizeMap[ownerState.size];
-    const color = semanticColors.status[ownerState.color].default;
+    const palette = semanticColors.status[ownerState.color];
     return {
-        [`& .${badgeClasses.badge}`]: {
-            width: size,
-            height: size,
-            minWidth: size,
-            borderRadius: ownerState.variant === 'solid' ? '50%' : 0,
-            padding: 0,
-            backgroundColor: ownerState.variant === 'solid' ? color : 'transparent',
-            // Remove default badge positioning - make it standalone
-            position: 'static',
-            transform: 'none',
-            overflow: 'visible',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: size,
+        height: size,
+        minWidth: size,
+        borderRadius: '50%',
+        flexShrink: 0,
+        boxSizing: 'border-box',
+        backgroundColor: palette.default,
+        color: semanticColors.typography.tooltip,
+        ...(ownerState.variant === 'outline' && {
+            border: `3px solid ${palette.light}`,
+        }),
+        '& > svg': {
+            width: '70%',
+            height: '70%',
         },
     };
 });
 /**
- * NeoDot - Status indicator dot component based on MUI Badge
+ * NeoDot - Status indicator dot.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
  *
@@ -3795,26 +3908,8 @@ const StyledBadge = styled(Badge)(({ ownerState }) => {
  * - outline (False|True) → variant prop (solid|outline)
  * - Color is configurable via color prop (success|error|warning|info|neutral)
  */
-const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...props }) => {
-    const dotSize = sizeMap[size];
-    const mediumColor = semanticColors.status[color].default;
-    const lightColor = semanticColors.status[color].light;
-    // For outline variant, use SVG for precise control
-    const renderDot = () => {
-        if (variant === 'outline') {
-            // SVG approach: outer circle with light fill, inner circle with medium fill
-            // Stroke width of ~3px creates the ring effect
-            const strokeWidth = 3;
-            const radius = dotSize / 2;
-            const innerRadius = radius - strokeWidth;
-            return (jsxs("svg", { width: dotSize, height: dotSize, viewBox: `0 0 ${dotSize} ${dotSize}`, style: {
-                    display: 'block',
-                    borderRadius: '50%',
-                }, role: "img", "aria-label": `${color} status indicator`, children: [jsx("title", { children: `${color} status indicator` }), jsx("circle", { cx: radius, cy: radius, r: radius, fill: lightColor }), jsx("circle", { cx: radius, cy: radius, r: innerRadius, fill: mediumColor })] }));
-        }
-        return jsx("span", { style: { display: 'inline-block', width: 0, height: 0 } });
-    };
-    return (jsx(StyledBadge, { ...props, ownerState: { size, variant, color }, variant: "dot", children: renderDot() }));
+const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', children, ...props }) => {
+    return (jsx(StyledDot, { ...props, ownerState: { size, variant, color }, role: "img", "aria-label": props['aria-label'] ?? `${color} status indicator`, children: children }));
 };
 NeoDot.displayName = 'NeoDot';
 
@@ -3896,6 +3991,55 @@ const NeoDownloadToast = ({ title, fileName, progress, showClose = true, showPau
 };
 NeoDownloadToast.displayName = 'NeoDownloadToast';
 
+const buildFilledIcon = ({ displayName, fillColor, body, knockout }) => {
+    const Component = (props) => (jsxs(SvgIcon, { viewBox: "0 0 16 16", ...props, children: [jsx("g", { fill: fillColor, children: body }), jsx("g", { stroke: "#FFFFFF", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", children: knockout })] }));
+    Component.displayName = displayName;
+    return Component;
+};
+const CIRCLE_BODY = (jsx("path", { d: "M8.00001 14.6666C11.6819 14.6666 14.6667 11.6818 14.6667 7.99992C14.6667 4.31802 11.6819 1.33325 8.00001 1.33325C4.31811 1.33325 1.33334 4.31802 1.33334 7.99992C1.33334 11.6818 4.31811 14.6666 8.00001 14.6666Z" }));
+const NeoFilledSuccess = buildFilledIcon({
+    displayName: 'NeoFilledSuccess',
+    fillColor: '#3B8948',
+    body: CIRCLE_BODY,
+    knockout: jsx("path", { d: "M6 8.00008L7.33333 9.33341L10 6.66675" }),
+});
+const NeoFilledQueued = buildFilledIcon({
+    displayName: 'NeoFilledQueued',
+    fillColor: '#992FB9',
+    body: CIRCLE_BODY,
+    knockout: jsx("path", { d: "M8 4V8L10.6667 9.33333" }),
+});
+const NeoFilledInfo = buildFilledIcon({
+    displayName: 'NeoFilledInfo',
+    fillColor: '#2F42FF',
+    body: CIRCLE_BODY,
+    knockout: (jsxs(Fragment, { children: [jsx("path", { d: "M8 10.6667V8" }), jsx("path", { d: "M8 5.33325H8.00667" })] })),
+});
+const NeoFilledWarning = buildFilledIcon({
+    displayName: 'NeoFilledWarning',
+    fillColor: '#BD9319',
+    body: (jsx("path", { d: "M14.4867 12L9.15335 2.66665C9.03706 2.46146 8.86842 2.29078 8.66463 2.17203C8.46084 2.05329 8.22921 1.99072 7.99335 1.99072C7.75749 1.99072 7.52585 2.05329 7.32206 2.17203C7.11828 2.29078 6.94964 2.46146 6.83335 2.66665L1.50001 12C1.38247 12.2036 1.32083 12.4346 1.32135 12.6697C1.32187 12.9047 1.38453 13.1355 1.50298 13.3385C1.62142 13.5416 1.79145 13.7097 1.99581 13.8259C2.20018 13.942 2.43162 14.0021 2.66668 14H13.3333C13.5673 13.9997 13.797 13.938 13.9995 13.8208C14.202 13.7037 14.3702 13.5354 14.487 13.3327C14.6039 13.1301 14.6654 12.9002 14.6653 12.6663C14.6653 12.4324 14.6036 12.2026 14.4867 12Z" })),
+    knockout: (jsxs(Fragment, { children: [jsx("path", { d: "M8 6V8.66667" }), jsx("path", { d: "M8 11.3333H8.00667" })] })),
+});
+const NeoFilledError = buildFilledIcon({
+    displayName: 'NeoFilledError',
+    fillColor: '#CB3446',
+    body: (jsx("path", { d: "M10.208 1.33325C10.5616 1.33333 10.9007 1.47385 11.1507 1.72392L14.276 4.84925C14.5261 5.09924 14.6666 5.43832 14.6667 5.79192V10.2079C14.6666 10.5615 14.5261 10.9006 14.276 11.1506L11.1507 14.2759C10.9007 14.526 10.5616 14.6665 10.208 14.6666H5.79201C5.43842 14.6665 5.09933 14.526 4.84934 14.2759L1.72401 11.1506C1.47394 10.9006 1.33342 10.5615 1.33334 10.2079V5.79192C1.33342 5.43832 1.47394 5.09924 1.72401 4.84925L4.84934 1.72392C5.09933 1.47385 5.43842 1.33333 5.79201 1.33325H10.208Z" })),
+    knockout: (jsxs(Fragment, { children: [jsx("path", { d: "M8 5.33325V7.99992" }), jsx("path", { d: "M8 10.6667H8.00667" })] })),
+});
+const NeoFilledNeutral = buildFilledIcon({
+    displayName: 'NeoFilledNeutral',
+    fillColor: '#6B7280',
+    body: CIRCLE_BODY,
+    knockout: jsx("path", { d: "M5.33334 8H10.6667" }),
+});
+const NeoFilledCanceled = buildFilledIcon({
+    displayName: 'NeoFilledCanceled',
+    fillColor: '#7B7263',
+    body: CIRCLE_BODY,
+    knockout: (jsxs(Fragment, { children: [jsx("path", { d: "M10 6L6 10" }), jsx("path", { d: "M6 6L10 10" })] })),
+});
+
 const filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
 const StyledChip$1 = styled(Chip, {
     shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
@@ -4028,6 +4172,7 @@ const StyledFooter = styled(Box, {
     shouldForwardProp: prop => prop !== 'showShadow',
 })(({ theme, showShadow = false }) => ({
     backgroundColor: semanticColors.surfaces.white,
+    borderTop: `1px solid ${semanticColors.border.primary}`,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -4353,13 +4498,7 @@ function NeoInfiniteScrollGrid({ onLoadMore, hasNextPage = true, loadMoreAtScrol
                 showShadow: isScrolling,
                 ...userSlotProps?.footer,
             },
-        }, sx: {
-            // Add border at bottom of rows section (above footer)
-            [`& .${gridClasses.virtualScrollerContent}`]: {
-                borderBottom: `1px solid ${semanticColors.border.primary}`,
-            },
-            ...userSx,
-        }, pagination: false, ...props, 
+        }, sx: userSx, pagination: false, ...props, 
         // Only show loading overlay when loading AND no rows exist yet
         // This keeps existing rows visible while loading more data (footer shows loading spinner)
         loading: props.loading && !hasRows }));
@@ -4785,87 +4924,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
  *
@@ -4909,8 +5088,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';
 
@@ -4920,7 +5099,6 @@ const StyledMenu = styled(Menu)(({ theme }) => ({
         borderRadius: borderRadius.s,
         border: `1px solid ${semanticColors.border.primary}`,
         boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
-        minWidth: 200,
         marginTop: theme.spacing(1),
         paddingTop: theme.spacing(1),
         paddingBottom: theme.spacing(1),
@@ -5147,9 +5325,8 @@ NeoModalFooter.displayName = 'NeoModalFooter';
 const NavigationAvatarContainer = styled('div')({
     display: 'flex',
     boxSizing: 'border-box',
-    width: spacing.spacing_5,
-    height: spacing.spacing_5,
     padding: spacing.spacing_1_2,
+    aspectRatio: '1 / 1',
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: '50%',
@@ -5167,11 +5344,98 @@ const NavigationAvatarContainer = styled('div')({
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
  */
-const NeoNavigationAvatar = ({ colorIndex = 0, children, ...props }) => {
-    return (jsx(NavigationAvatarContainer, { children: jsx(NeoGeneralAvatar, { size: "small", colorIndex: colorIndex, ...props, children: children }) }));
+const NeoNavigationAvatar = ({ children, ...props }) => {
+    return (jsx(NavigationAvatarContainer, { children: jsx(NeoGeneralAvatar, { size: "small", ...props, children: children }) }));
 };
 NeoNavigationAvatar.displayName = 'NeoNavigationAvatar';
 
+const NeoSideNavContext = createContext({
+    collapsed: false,
+});
+const useNeoSideNav = () => useContext(NeoSideNavContext);
+
+/**
+ * Variant color configuration
+ */
+const variantConfig = {
+    light: {
+        backgroundColor: semanticColors.surfaces.tooltip, // #4b5563 - medium gray
+        color: semanticColors.typography.tooltip, // #ffffff - white
+    },
+    dark: {
+        backgroundColor: colors.grey[50], // #f9fafb - very light gray
+        color: colors.grey[800], // #1f2937 - dark gray
+    },
+    brand: {
+        backgroundColor: colors.digitalBlue[800], // #131e7a - dark blue
+        color: semanticColors.typography.tooltip, // #ffffff - white
+    },
+};
+/**
+ * Styled MUI Tooltip with Neo design system tokens
+ */
+const StyledTooltip$1 = styled(Tooltip, {
+    shouldForwardProp: prop => prop !== 'variant' && prop !== 'description',
+})(({ variant = 'light', description }) => {
+    const hasDescription = Boolean(description);
+    const variantStyles = variantConfig[variant];
+    return {
+        // Style the tooltip content
+        [`& .${tooltipClasses.tooltip}`]: {
+            backgroundColor: variantStyles.backgroundColor,
+            color: variantStyles.color,
+            fontSize: typography.fontSize.xs,
+            fontWeight: typography.fontWeight.medium,
+            lineHeight: hasDescription ? 1.5 : 1,
+            borderRadius: hasDescription ? borderRadius.s : borderRadius.xS,
+            padding: hasDescription ? spacing.spacing_1_1_2 : `0 ${spacing.spacing_1}px`,
+            ...(hasDescription && {
+                maxWidth: 296,
+            }),
+            ...(!hasDescription && {
+                height: spacing.spacing_3_1_4,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+            }),
+            boxShadow: `${shadows.neutral.medium.x}px ${shadows.neutral.medium.y}px ${shadows.neutral.medium.blur}px ${shadows.neutral.medium.spread}px ${shadows.neutral.medium.shadow}`,
+        },
+        // Style the arrow
+        [`& .${tooltipClasses.arrow}`]: {
+            color: variantStyles.backgroundColor,
+        },
+    };
+});
+/**
+ * NeoTooltip - Tooltip component following Neo design system
+ *
+ * Provides contextual information when users hover over or focus on an element.
+ * Supports three visual variants (light, dark, brand) and optional supporting text.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4091-26557&t=Bo58EpFmg6ILJtmv-11
+ *
+ * Figma Props Mapping:
+ * - Theme (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
+ * - Placement → arrow (boolean) + placement (top/bottom/left/right/etc)
+ * - Supporting text (True|False) → description (string|undefined)
+ * - text → title (string, literal content)
+ *
+ * Design Tokens Used:
+ * - Light: surfaces.tooltip (#4b5563), typography.tooltip (#ffffff)
+ * - Dark: grey[50] (#f9fafb), grey[800] (#1f2937)
+ * - Brand: digitalBlue[800] (#131e7a), typography.tooltip (#ffffff)
+ * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
+ * - Typography: fontSize.xs (12), fontSize.caption (13), fontWeight.medium (500), fontWeight.semiBold (600)
+ */
+const NeoTooltip = ({ variant = 'light', title, description, children, arrow = false, placement, ...props }) => {
+    // Build the title content
+    // If description is provided, create a structured layout with title + description
+    // Otherwise, just show the title text
+    const titleContent = description ? (jsxs(Stack, { gap: 0.5, children: [jsx(Typography, { fontSize: typography.fontSize.caption, fontWeight: typography.fontWeight.semiBold, children: title }), jsx(Typography, { fontSize: typography.fontSize.xs, fontWeight: typography.fontWeight.medium, sx: { opacity: 0.75 }, children: description })] })) : (title);
+    return (jsx(StyledTooltip$1, { variant: variant, description: description, title: titleContent, arrow: arrow, placement: placement, ...props, children: children }));
+};
+NeoTooltip.displayName = 'NeoTooltip';
+
 const customProps = ['selected'];
 const StyledRoot = styled(ButtonBase, {
     shouldForwardProp: prop => !customProps.includes(prop),
@@ -5190,41 +5454,34 @@ const StyledRoot = styled(ButtonBase, {
     textDecoration: 'none',
     '&:hover .neo-nav-icon-padding': {
         backgroundColor: semanticColors.buttons.secondary.hoverBackground,
-        borderColor: colors.digitalBlue[100],
+        borderColor: semanticColors.buttons.secondary.pressedBackground,
     },
     '&: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': {
-            backgroundColor: colors.digitalBlue[100],
+            backgroundColor: semanticColors.buttons.secondary.pressedBackground,
         },
         '& .neo-nav-label': {
             color: semanticColors.buttons.primary.pressed,
             fontWeight: typography.fontWeight.semiBold,
         },
         '&:hover .neo-nav-icon-padding': {
-            backgroundColor: colors.digitalBlue[100],
+            backgroundColor: semanticColors.buttons.secondary.pressedBackground,
         },
         '&: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')({
@@ -5245,28 +5502,21 @@ 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, tooltip, slotProps, children, ...props }) {
+    const { collapsed } = useNeoSideNav();
+    // When collapsed the label is hidden, so fall back to it for the tooltip and
+    // accessible name — otherwise an icon-only button has no name (WCAG 4.1.2).
+    const collapsedTooltip = tooltip ?? label;
+    const item = (jsxs(StyledRoot, { selected: selected, "aria-label": collapsed && typeof label === 'string' ? label : undefined, disableRipple: true, ...props, children: [jsx(IconPadding, { className: "neo-nav-icon-padding", children: icon }), !collapsed && label && jsx(Label$2, { className: "neo-nav-label", children: label }), !collapsed && tag && (jsx(NeoTag, { size: "medium", variant: "filled", intent: "beta", label: tag, ...slotProps?.badge })), children] }));
+    if (collapsed && collapsedTooltip) {
+        return (jsx(NeoTooltip, { title: collapsedTooltip, placement: "right", arrow: true, children: item }));
+    }
+    return item;
 }
 NeoNavigationItem.displayName = 'NeoNavigationItem';
 
@@ -5312,11 +5562,11 @@ const LabelText = styled('span', {
  * NeoAvatarCell — DataGrid cell displaying a user avatar with optional label.
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=13425-1725
  */
-const NeoAvatarCell = ({ name, src, colorIndex = 0, label, disabled = false, empty = false, }) => {
+const NeoAvatarCell = ({ name, src, 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 })] }));
+    return (jsxs(StyledCell$1, { disabled: disabled, children: [jsx(NeoGeneralAvatar, { size: "small", src: src, alt: name, children: !src && name ? name.charAt(0).toUpperCase() : undefined }), label && jsx(LabelText, { disabled: disabled, children: label })] }));
 };
 NeoAvatarCell.displayName = 'NeoAvatarCell';
 
@@ -5530,7 +5780,7 @@ const TooltipErrorPre = styled('pre')({
     maxHeight: 200,
     overflowY: 'auto',
 });
-const StyledTooltip$1 = styled(Tooltip)({
+const StyledTooltip = styled(Tooltip)({
     [`& .${tooltipClasses.tooltip}`]: {
         backgroundColor: semanticColors.surfaces.tooltip,
         maxWidth: 400,
@@ -5554,7 +5804,7 @@ const NeoStatusCell = ({ icon, label, details, disabled = false, variant = 'succ
     }
     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 (jsx(StyledTooltip, { title: jsx(TooltipErrorPre, { children: details }), arrow: true, placement: "bottom-start", children: jsx(Box, { component: "span", sx: { display: 'inline-flex' }, children: chip }) }));
     }
     return chip;
 };
@@ -5574,10 +5824,9 @@ const StickyHeader = styled(Box)(({ theme }) => ({
  * Page title typography
  */
 const PageTitle = styled(Typography)(() => ({
-    fontSize: typography.fontSize.h3,
-    fontWeight: typography.fontWeight.medium,
+    ...semanticTypography.titles.pageHeader,
     lineHeight: 1.4,
-    color: colors.grey['900'], // #111827 - matches Figma typography/page-header
+    color: colors.grey['900'],
 }));
 /**
  * Subtitle typography
@@ -5641,7 +5890,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);
@@ -5671,7 +5925,7 @@ function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
         // Also try to scroll window in case component is in a different context
         window.scrollTo({ top: 0, behavior: 'smooth' });
     };
-    const headerContent = (jsxs(Stack, { ref: headerRef, sx: { flexShrink: 0, gap: '0.5rem' }, children: [breadcrumbs && breadcrumbs.items.length > 0 && (jsx(NeoBreadcrumbs, { children: breadcrumbs.items.map((item, index) => (jsx(NeoBreadcrumbLink, { href: item.href, component: item.href && breadcrumbs.linkComponent ? breadcrumbs.linkComponent : undefined, current: index === breadcrumbs.items.length - 1, children: item.label }, item.href ?? index))) })), jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { gap: '1rem' }, children: [jsxs(Stack, { sx: { gap: '0.5rem', flexGrow: 1 }, children: [jsx(PageTitle, { children: pageTitle }), subtitle &&
+    const headerContent = (jsxs(Stack, { ref: headerRef, sx: { flexShrink: 0, gap: '0.5rem' }, children: [breadcrumbs && breadcrumbs.items.length > 0 && (jsx(NeoBreadcrumbs, { children: breadcrumbs.items.map((item, index) => (jsx(NeoBreadcrumbLink, { href: item.href, component: item.href && breadcrumbs.linkComponent ? breadcrumbs.linkComponent : undefined, current: index === breadcrumbs.items.length - 1, children: item.label }, item.href ?? index))) })), jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { gap: '1rem' }, children: [jsxs(Stack, { sx: { gap: '0.5rem', flexGrow: 1 }, children: [typeof pageTitle === 'string' ? (jsx(PageTitle, { component: "h1", children: pageTitle })) : (pageTitle), subtitle &&
                                 (typeof subtitle === 'string' ? (jsx(Subtitle, { variant: "caption", children: subtitle })) : (subtitle))] }), action] })] }));
     const content = isLoading ? (jsx(Box, { sx: {
             display: 'flex',
@@ -5693,7 +5947,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: {
@@ -5718,7 +5972,7 @@ function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
                                     width: '100%',
                                     ...(centerContent ? { mx: 'auto' } : { alignSelf: 'flex-start' }),
                                 }),
-                            }, children: content })] }) }), showBackToTop && (jsx(Fade, { in: showBackToTopButton, children: jsx(Box, { sx: {
+                            }, children: content })] }) }), showBackToTop && (jsx(Fade$1, { in: showBackToTopButton, children: jsx(Box, { sx: {
                         position: 'fixed',
                         bottom: spacing.spacing_2,
                         right: spacing.spacing_4,
@@ -6023,6 +6277,55 @@ 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')({});
+
+// Box-breathing rhythm: appear (inhale) → hold → expand+fade (exhale) → rest.
+// Max scale is capped so the ring fits within a parent row's line-height.
+const ripple = keyframes `
+  0% { opacity: 0; transform: scale(0.7); }
+  20% { opacity: 0.9; transform: scale(0.7); }
+  35% { opacity: 0.9; transform: scale(0.7); }
+  80% { opacity: 0; transform: scale(1.7); }
+  100% { opacity: 0; transform: scale(0.7); }
+`;
+/**
+ * NeoRipplingDot - Animated status dot with an expanding ripple ring.
+ *
+ * Indicates an in-progress, indeterminate state (RUNNING / SYNCING / PROCESSING).
+ * Color is inherited from `currentColor`; set it via the `color`/`sx` prop or a
+ * parent. Sized to the lowercase-letter height regardless of parent fontSize.
+ */
+const NeoRipplingDot = props => (jsx(Box$1, { "aria-hidden": "true", ...props, style: {
+        width: spacing.spacing_1,
+        height: spacing.spacing_1,
+        ...props.style,
+    }, sx: {
+        position: 'relative',
+        display: 'inline-block',
+        borderRadius: '50%',
+        backgroundColor: 'currentColor',
+        verticalAlign: 'middle',
+        flexShrink: 0,
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            inset: '-25%',
+            borderRadius: '50%',
+            border: '1px solid currentColor',
+            animation: `${ripple} 5.6s ease-in-out infinite`,
+            '@media (prefers-reduced-motion: reduce)': {
+                display: 'none',
+            },
+        },
+        ...props.sx,
+    } }));
+NeoRipplingDot.displayName = 'NeoRipplingDot';
+
 const StyledSearchChip = styled(InputBase)(({ theme }) => ({
     borderRadius: borderRadius.full,
     border: `1px solid ${semanticColors.buttons.secondary.defaultBorder}`,
@@ -6088,6 +6391,126 @@ 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';
+
+const EXPANDED_WIDTH = 98;
+const COLLAPSED_WIDTH = 56;
+// The fade overlay must end on the same color as the rail to blend cleanly.
+const RAIL_BACKGROUND = colors.grey[100];
+/**
+ * NeoSideNav
+ *
+ * Collapsible vertical navigation rail with fixed `header`/`footer` slots and a
+ * scrolling content area. Controlled via `collapsed` + `onCollapsedChange`;
+ * broadcasts collapsed state to descendant `NeoNavigationItem`s through context.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4065-3425
+ */
+const Root = styled('nav', {
+    shouldForwardProp: prop => prop !== 'collapsed',
+})(({ collapsed, theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH,
+    minWidth: collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH,
+    backgroundColor: RAIL_BACKGROUND,
+    transition: theme.transitions.create(['width', 'min-width'], {
+        duration: theme.transitions.duration.shorter,
+    }),
+    overflow: 'hidden',
+}));
+const Header = styled('div')({
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+});
+const Scroll = styled('div')({
+    flex: 1,
+    minHeight: 0,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: spacing.spacing_1_2,
+    paddingInline: spacing.spacing_1,
+    '&::-webkit-scrollbar': { width: spacing.spacing_1_2 },
+    '&::-webkit-scrollbar-thumb': {
+        backgroundColor: semanticColors.border.primary,
+        borderRadius: borderRadius.xXS,
+    },
+});
+const FooterRegion = styled('div')({
+    position: 'relative',
+    flexShrink: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: spacing.spacing_1_2,
+    paddingInline: spacing.spacing_1,
+    paddingBottom: spacing.spacing_1,
+});
+// Gradient fade so scrolling items dissolve into the footer instead of butting against it.
+const Fade = styled('div')({
+    position: 'absolute',
+    top: -spacing.spacing_3,
+    left: 0,
+    right: 0,
+    height: spacing.spacing_3,
+    pointerEvents: 'none',
+    background: `linear-gradient(to bottom, transparent, ${RAIL_BACKGROUND})`,
+});
+const Toggle = styled(ButtonBase)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexDirection: 'column',
+    gap: spacing.spacing_1_2,
+    width: '100%',
+    paddingBlock: spacing.spacing_1,
+    borderRadius: borderRadius.s,
+    border: `1px solid ${semanticColors.border.secondary}`,
+    color: semanticColors.typography.bodySecondary,
+    fontFamily: typography.fontFamily.body,
+    fontSize: theme.typography.pxToRem(11),
+    lineHeight: 1,
+    '&:hover': {
+        color: semanticColors.typography.body,
+        borderColor: semanticColors.border.primary,
+    },
+}));
+function NeoSideNav({ collapsed, onCollapsedChange, header, footer, children, collapseLabel = 'Less', ...rest }) {
+    const ToggleIcon = collapsed ? PanelLeftOpen : PanelLeftClose;
+    const contextValue = useMemo(() => ({ collapsed }), [collapsed]);
+    return (jsx(NeoSideNavContext.Provider, { value: contextValue, children: jsxs(Root, { collapsed: collapsed, ...rest, children: [header && jsx(Header, { children: header }), jsx(Scroll, { children: children }), jsxs(FooterRegion, { children: [jsx(Fade, {}), footer, jsxs(Toggle, { "data-testid": "neo-side-nav-toggle", "aria-label": collapsed ? 'Expand navigation' : 'Collapse navigation', disableRipple: true, onClick: () => onCollapsedChange(!collapsed), children: [jsx(ToggleIcon, { size: 18 }), !collapsed && jsx("span", { children: collapseLabel })] })] })] }) }));
+}
+NeoSideNav.displayName = 'NeoSideNav';
+
 const StyledSkeleton = styled(Skeleton, {
     shouldForwardProp: prop => prop !== 'colorTheme' && prop !== 'position',
 })(({ theme, colorTheme = 'light', position = 'start' }) => ({
@@ -6135,6 +6558,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
  *
@@ -6514,6 +7042,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',
@@ -6574,86 +7198,18 @@ const NeoToolbar = ({ children, ...props }) => {
 NeoToolbar.displayName = 'NeoToolbar';
 
 /**
- * Variant color configuration
- */
-const variantConfig = {
-    light: {
-        backgroundColor: semanticColors.surfaces.tooltip, // #4b5563 - medium gray
-        color: semanticColors.typography.tooltip, // #ffffff - white
-    },
-    dark: {
-        backgroundColor: colors.grey[50], // #f9fafb - very light gray
-        color: colors.grey[800], // #1f2937 - dark gray
-    },
-    brand: {
-        backgroundColor: colors.digitalBlue[800], // #131e7a - dark blue
-        color: semanticColors.typography.tooltip, // #ffffff - white
-    },
-};
-/**
- * Styled MUI Tooltip with Neo design system tokens
+ * NeoTopNav
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4618-185228
  */
-const StyledTooltip = styled(Tooltip, {
-    shouldForwardProp: prop => prop !== 'variant' && prop !== 'description',
-})(({ variant = 'light', description }) => {
-    const hasDescription = Boolean(description);
-    const variantStyles = variantConfig[variant];
-    return {
-        // Style the tooltip content
-        [`& .${tooltipClasses.tooltip}`]: {
-            backgroundColor: variantStyles.backgroundColor,
-            color: variantStyles.color,
-            fontSize: typography.fontSize.xs,
-            fontWeight: typography.fontWeight.medium,
-            lineHeight: hasDescription ? 1.5 : 1,
-            borderRadius: hasDescription ? borderRadius.s : borderRadius.xS,
-            padding: hasDescription ? spacing.spacing_1_1_2 : `0 ${spacing.spacing_1}px`,
-            ...(hasDescription && {
-                maxWidth: 296,
-            }),
-            ...(!hasDescription && {
-                height: spacing.spacing_3_1_4,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }),
-            boxShadow: `${shadows.neutral.medium.x}px ${shadows.neutral.medium.y}px ${shadows.neutral.medium.blur}px ${shadows.neutral.medium.spread}px ${shadows.neutral.medium.shadow}`,
-        },
-        // Style the arrow
-        [`& .${tooltipClasses.arrow}`]: {
-            color: variantStyles.backgroundColor,
-        },
-    };
-});
+const NeoTopNav = styled('div')({});
+
 /**
- * NeoTooltip - Tooltip component following Neo design system
+ * NeoTourModal
  *
- * Provides contextual information when users hover over or focus on an element.
- * Supports three visual variants (light, dark, brand) and optional supporting text.
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4091-26557&t=Bo58EpFmg6ILJtmv-11
- *
- * Figma Props Mapping:
- * - Theme (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
- * - Placement → arrow (boolean) + placement (top/bottom/left/right/etc)
- * - Supporting text (True|False) → description (string|undefined)
- * - text → title (string, literal content)
- *
- * Design Tokens Used:
- * - Light: surfaces.tooltip (#4b5563), typography.tooltip (#ffffff)
- * - Dark: grey[50] (#f9fafb), grey[800] (#1f2937)
- * - Brand: digitalBlue[800] (#131e7a), typography.tooltip (#ffffff)
- * - Shadow: neutralMedium (0px 8px 15px 0px rgba(31,41,55,0.1))
- * - Typography: fontSize.xs (12), fontWeight.medium (500), fontWeight.semiBold (600)
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=12408-1800
  */
-const NeoTooltip = ({ variant = 'light', title, description, children, arrow = false, placement, ...props }) => {
-    // Build the title content
-    // If description is provided, create a structured layout with title + description
-    // Otherwise, just show the title text
-    const titleContent = description ? (jsxs(Stack, { gap: 0.25, children: [jsx(Typography, { fontWeight: typography.fontWeight.semiBold, children: title }), jsx(Typography, { fontWeight: typography.fontWeight.medium, children: description })] })) : (title);
-    return (jsx(StyledTooltip, { variant: variant, description: description, title: titleContent, arrow: arrow, placement: placement, ...props, children: children }));
-};
-NeoTooltip.displayName = 'NeoTooltip';
+const NeoTourModal = styled('div')({});
 
 /**
  * Custom label component that reads extra slot data from the item model.
@@ -6851,6 +7407,39 @@ const NeoTypologyControl = ({ children, ...props }) => {
 };
 NeoTypologyControl.displayName = 'NeoTypologyControl';
 
+// Box-breathing rhythm: inhale (grow) → hold → exhale (shadow expand+fade) → rest.
+const vibrate = keyframes `
+  0% { transform: scale(0.9); box-shadow: 0 0 0 0 transparent; }
+  25% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
+  50% { transform: scale(1); box-shadow: 0 0 0 0 currentColor; }
+  75% { transform: scale(0.9); box-shadow: 0 0 0 ${spacing.spacing_3_4}px transparent; }
+  100% { transform: scale(0.9); box-shadow: 0 0 0 0 transparent; }
+`;
+/**
+ * NeoVibratingDot - Animated status dot with a breathing pulse halo.
+ *
+ * Indicates a waiting/pending state (QUEUED / CREATED). Color is inherited from
+ * `currentColor`; set it via the `color`/`sx` prop or a parent. Sized to the
+ * lowercase-letter height regardless of parent fontSize.
+ */
+const NeoVibratingDot = props => (jsx(Box$1, { "aria-hidden": "true", ...props, style: {
+        width: spacing.spacing_1,
+        height: spacing.spacing_1,
+        ...props.style,
+    }, sx: {
+        display: 'inline-block',
+        borderRadius: '50%',
+        backgroundColor: 'currentColor',
+        verticalAlign: 'middle',
+        flexShrink: 0,
+        animation: `${vibrate} 5.6s ease-in-out infinite`,
+        '@media (prefers-reduced-motion: reduce)': {
+            animation: 'none',
+        },
+        ...props.sx,
+    } }));
+NeoVibratingDot.displayName = 'NeoVibratingDot';
+
 /**
  * @moderneinc/neo-styled-components
  *
@@ -6859,5 +7448,5 @@ NeoTypologyControl.displayName = 'NeoTypologyControl';
 
 const version = '0.0.0-development';
 
-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, 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, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusCell, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, neoRowHeights, version };
+export { ActivityScene, CIRCLE_RADIUS, NeoActionsCell, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert, NeoAvatarCell, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCanceledIcon, 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, NeoFilledCanceled, NeoFilledError, NeoFilledInfo, NeoFilledNeutral, NeoFilledQueued, NeoFilledSuccess, NeoFilledWarning, 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, NeoRipplingDot, 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, NeoVibratingDot, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, neoRowHeights, version };
 //# sourceMappingURL=index.esm.js.map