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

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { shadows, semanticColors, colors, spacing, typography, borderRadius } from '@moderneinc/neo-design';
+import { semanticColors, colors, spacing, typography, borderRadius, shadows } from '@moderneinc/neo-design';
 import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
@@ -7,12 +7,13 @@ import Chip, { chipClasses } from '@mui/material/Chip';
 import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
-import React, { forwardRef, createElement, useState, useMemo, useRef, useEffect } from 'react';
+import React, { forwardRef, createElement, useRef, useCallback, useState, useMemo, useEffect } from 'react';
 import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
 import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
 import CircularProgress from '@mui/material/CircularProgress';
-import MuiButtonGroup, { buttonGroupClasses } from '@mui/material/ButtonGroup';
+import MuiToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
+import MuiToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 import Checkbox, { checkboxClasses } from '@mui/material/Checkbox';
 import { useGridApiContext, useGridSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, GridPanelWrapper, useGridApiRef, gridClasses as gridClasses$1, DataGridPro, ColumnsPanelTrigger, ToolbarButton, gridFilterModelSelector, FilterPanelTrigger, Toolbar } from '@mui/x-data-grid-pro';
 import Button, { buttonClasses } from '@mui/material/Button';
@@ -60,22 +61,20 @@ import Switch, { switchClasses } from '@mui/material/Switch';
 import { useTreeItemModel } from '@mui/x-tree-view/hooks';
 import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 import { RichTreeViewPro } from '@mui/x-tree-view-pro/RichTreeViewPro';
-import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
-import ToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 
 /**
- * Outline-based focus ring styles derived from Neo shadow tokens.
+ * Outline-based focus ring styles derived from Neo border tokens.
  * Uses CSS outline (not box-shadow) so focus rings are never clipped by overflow:hidden.
  *
- * Produces a double-ring effect: a white inner gap (via outline-offset) and a blue outer ring.
+ * Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
  */
 const focusRingStyles = {
-    outline: `${shadows.focusBlue2.spread - shadows.focusWhite1.spread}px solid ${shadows.focusBlue2.shadow}`,
-    outlineOffset: `${shadows.focusWhite1.spread}px`,
+    outline: `2px solid ${semanticColors.border.focus}`,
+    outlineOffset: '2px',
 };
 
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Avatar variant type without global augmentation
-const StyledAvatar = styled(Avatar, {
+const StyledAvatar$1 = styled(Avatar, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'variant',
 })(({ theme, size = 'medium', variant = 'circular' }) => ({
     boxSizing: 'border-box',
@@ -177,7 +176,7 @@ const AvatarContainer = styled(Box)(({ size = 'medium' }) => ({
  */
 const NeoAvatar = ({ size = 'medium', variant = 'circular', ...props }) => {
     // shouldForwardProp filters out size and variant from being passed to the DOM
-    const avatar = jsx(StyledAvatar, { size: size, variant: variant, ...props });
+    const avatar = jsx(StyledAvatar$1, { size: size, variant: variant, ...props });
     // Medium size with circular variant (image) gets wrapped in white container
     if (size === 'medium' && variant === 'circular') {
         return jsx(AvatarContainer, { size: size, children: avatar });
@@ -219,7 +218,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorDefault}`]: {
         backgroundColor: semanticColors.status.neutral.light,
         color: semanticColors.status.neutral.dark,
-        border: `1px solid ${semanticColors.status.neutral.medium}80`,
+        border: `1px solid ${semanticColors.status.neutral.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.neutral.dark,
         },
@@ -228,7 +227,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorError}`]: {
         backgroundColor: semanticColors.status.error.light,
         color: semanticColors.status.error.dark,
-        border: `1px solid ${semanticColors.status.error.medium}80`,
+        border: `1px solid ${semanticColors.status.error.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.error.dark,
         },
@@ -237,7 +236,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorWarning}`]: {
         backgroundColor: semanticColors.status.warning.light,
         color: semanticColors.status.warning.dark,
-        border: `1px solid ${semanticColors.status.warning.medium}80`,
+        border: `1px solid ${semanticColors.status.warning.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.warning.dark,
         },
@@ -246,7 +245,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorSuccess}`]: {
         backgroundColor: semanticColors.status.success.light,
         color: semanticColors.status.success.dark,
-        border: `1px solid ${semanticColors.status.success.medium}80`,
+        border: `1px solid ${semanticColors.status.success.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.success.dark,
         },
@@ -255,7 +254,7 @@ const StyledChip$2 = styled(Chip)(({ theme }) => ({
     [`&.${chipClasses.colorInfo}`]: {
         backgroundColor: semanticColors.status.info.light,
         color: semanticColors.status.info.dark,
-        border: `1px solid ${semanticColors.status.info.medium}80`,
+        border: `1px solid ${semanticColors.status.info.default}80`,
         [`& .${chipClasses.icon}, & .${chipClasses.deleteIcon}`]: {
             color: semanticColors.status.info.dark,
         },
@@ -689,11 +688,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$i = [
+const __iconNode$j = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$i);
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$j);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -703,11 +702,11 @@ const ArrowDown = createLucideIcon("arrow-down", __iconNode$i);
  */
 
 
-const __iconNode$h = [
+const __iconNode$i = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$h);
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$i);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -717,7 +716,7 @@ const ArrowUp = createLucideIcon("arrow-up", __iconNode$h);
  */
 
 
-const __iconNode$g = [
+const __iconNode$h = [
   ["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" }],
@@ -729,7 +728,7 @@ const __iconNode$g = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$g);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$h);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -739,8 +738,8 @@ const CalendarDays = createLucideIcon("calendar-days", __iconNode$g);
  */
 
 
-const __iconNode$f = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
+const __iconNode$g = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$g);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -750,8 +749,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
  */
 
 
-const __iconNode$e = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$e);
+const __iconNode$f = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$f);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -761,8 +760,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$e);
  */
 
 
-const __iconNode$d = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
+const __iconNode$e = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$e);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -772,8 +771,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
  */
 
 
-const __iconNode$c = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$c);
+const __iconNode$d = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$d);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -783,11 +782,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$c = [
   ["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$b);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$c);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -797,12 +796,12 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$b);
  */
 
 
-const __iconNode$a = [
+const __iconNode$b = [
   ["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$a);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$b);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -812,11 +811,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$a = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$9);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$a);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -826,12 +825,12 @@ const CircleCheck = createLucideIcon("circle-check", __iconNode$9);
  */
 
 
-const __iconNode$8 = [
+const __iconNode$9 = [
   ["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$8);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$9);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -841,12 +840,12 @@ const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$8
  */
 
 
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["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$7);
+const Columns3 = createLucideIcon("columns-3", __iconNode$8);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -856,12 +855,12 @@ const Columns3 = createLucideIcon("columns-3", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$7 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
 ];
-const Info = createLucideIcon("info", __iconNode$6);
+const Info = createLucideIcon("info", __iconNode$7);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -871,12 +870,12 @@ const Info = createLucideIcon("info", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
+const __iconNode$6 = [
   ["path", { d: "M2 5h20", key: "1fs1ex" }],
   ["path", { d: "M6 12h12", key: "8npq4p" }],
   ["path", { d: "M9 19h6", key: "456am0" }]
 ];
-const ListFilter = createLucideIcon("list-filter", __iconNode$5);
+const ListFilter = createLucideIcon("list-filter", __iconNode$6);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -886,11 +885,11 @@ const ListFilter = createLucideIcon("list-filter", __iconNode$5);
  */
 
 
-const __iconNode$4 = [
+const __iconNode$5 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$4);
+const Plus = createLucideIcon("plus", __iconNode$5);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -900,11 +899,11 @@ const Plus = createLucideIcon("plus", __iconNode$4);
  */
 
 
-const __iconNode$3 = [
+const __iconNode$4 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$3);
+const Search = createLucideIcon("search", __iconNode$4);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -914,14 +913,35 @@ const Search = createLucideIcon("search", __iconNode$3);
  */
 
 
-const __iconNode$2 = [
+const __iconNode$3 = [
   ["path", { d: "M10 11v6", key: "nco0om" }],
   ["path", { d: "M14 11v6", key: "outv1u" }],
   ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
 ];
-const Trash2 = createLucideIcon("trash-2", __iconNode$2);
+const Trash2 = createLucideIcon("trash-2", __iconNode$3);
+
+/**
+ * @license lucide-react v0.577.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$2 = [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$2);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -958,15 +978,11 @@ const X = createLucideIcon("x", __iconNode);
 
 // 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 !== 'messagePosition' && prop !== 'variant',
-})(({ variant = 'light', messagePosition = 'left' }) => {
-    // Variant-specific styles
-    const variantStyles = {
-        dark: {
-            backgroundColor: semanticColors.surfaces.snackbarBrand,
-            color: semanticColors.surfaces.white,
-        },
-        light: {
+    shouldForwardProp: prop => prop !== 'messagePosition' && prop !== 'variant' && prop !== 'bannerType',
+})(({ variant = 'info', bannerType = 'outlined', messagePosition = 'left' }) => {
+    // Outlined styles (light bg + colored border)
+    const outlinedStyles = {
+        info: {
             backgroundColor: semanticColors.status.info.light,
             color: colors.grey['800'],
         },
@@ -982,6 +998,50 @@ const StyledAlert$2 = styled(Alert, {
             backgroundColor: semanticColors.status.warning.light,
             color: colors.grey['800'],
         },
+        neutral: {
+            backgroundColor: semanticColors.status.neutral.light,
+            color: colors.grey['800'],
+        },
+    };
+    // Filled styles (solid bg)
+    const filledStyles = {
+        info: {
+            backgroundColor: semanticColors.status.info.dark,
+            color: semanticColors.surfaces.white,
+        },
+        success: {
+            backgroundColor: semanticColors.status.success.dark,
+            color: semanticColors.surfaces.white,
+        },
+        error: {
+            backgroundColor: semanticColors.status.error.dark,
+            color: semanticColors.surfaces.white,
+        },
+        warning: {
+            backgroundColor: semanticColors.status.warning.default,
+            color: semanticColors.typography.warning,
+        },
+        neutral: {
+            backgroundColor: semanticColors.surfaces.snackbarLightMode,
+            color: semanticColors.surfaces.white,
+        },
+    };
+    // Legacy variants (ignore bannerType)
+    const legacyStyles = {
+        dark: {
+            backgroundColor: semanticColors.surfaces.snackbarBrand,
+            color: semanticColors.surfaces.white,
+        },
+        light: {
+            backgroundColor: semanticColors.status.info.light,
+            color: colors.grey['800'],
+        },
+    };
+    const getVariantStyles = () => {
+        if (legacyStyles[variant])
+            return legacyStyles[variant];
+        const styleMap = bannerType === 'filled' ? filledStyles : outlinedStyles;
+        return styleMap[variant] ?? outlinedStyles.info;
     };
     return {
         width: '100%',
@@ -998,7 +1058,7 @@ const StyledAlert$2 = styled(Alert, {
         fontSize: typography.fontSize.default,
         fontWeight: typography.fontWeight.regular,
         lineHeight: 1.5,
-        ...variantStyles[variant],
+        ...getVariantStyles(),
         [`& .${alertClasses.icon}`]: {
             padding: 0,
             opacity: 1,
@@ -1021,15 +1081,16 @@ const StyledAlert$2 = styled(Alert, {
         },
     };
 });
-const LinkText = styled('span')(({ variant = 'light' }) => {
+const LinkText = styled('span')(({ variant = 'info', bannerType = 'outlined' }) => {
+    const isLegacy = variant === 'dark' || variant === 'light';
+    const isFilled = !isLegacy && bannerType === 'filled';
     const getLinkColor = () => {
-        if (variant === 'dark') {
-            return semanticColors.typography.link.default; // #f9fafb (light gray/white)
+        if (variant === 'dark' || isFilled) {
+            return semanticColors.typography.link.default;
         }
-        if (variant === 'light') {
-            return semanticColors.typography.link.primary; // #2f42ff (blue)
+        if (variant === 'light' || variant === 'info') {
+            return semanticColors.typography.link.primary;
         }
-        // For success, error, warning - use dark body color #1f2937
         return colors.grey['800'];
     };
     return {
@@ -1054,29 +1115,34 @@ const StyledIconButton$1 = styled(IconButton)(({ closeIconColor }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4170-2158
  *
  * Figma Props Mapping:
- * - color (Dark|Light|Success|Error|Warning) → variant (dark|light|success|error|warning)
- * - messagePosition (Left|Center) → messagePosition ("left"|"center")
- * - closeIcon (boolean) → showClose (boolean)
- * - link (boolean) → linkText (string)
- * - {Message} → message (string)
- */
-const NeoBanner = ({ variant = 'light', message, messagePosition = 'left', linkText, showClose = true, icon, onClose, onLinkClick, ...props }) => {
+ * - Intention (Info|Success|Error|Warning|Neutral) → variant (info|success|error|warning|neutral)
+ * - Type (Outlined|Filled) → type ('outlined'|'filled')
+ * - Message Position (Left|Center) → messagePosition ('left'|'center')
+ * - Dismissible (boolean) → showClose (boolean)
+ * - Show Link (boolean) → linkText presence (string when shown)
+ */
+const NeoBanner = ({ variant = 'info', type = 'outlined', message, messagePosition = 'left', linkText, showClose = true, icon, onClose, onLinkClick, ...props }) => {
+    const isLegacy = variant === 'dark' || variant === 'light';
+    const isFilled = !isLegacy && type === 'filled';
     const getCloseIconColor = () => {
-        if (variant === 'dark') {
+        if (isFilled && variant === 'warning') {
+            return semanticColors.typography.warning;
+        }
+        if (variant === 'dark' || isFilled) {
             return semanticColors.surfaces.white;
         }
         if (variant === 'success') {
-            return semanticColors.status.success.medium;
+            return semanticColors.status.success.default;
         }
         if (variant === 'error') {
-            return semanticColors.status.error.medium;
+            return semanticColors.status.error.default;
         }
         if (variant === 'warning') {
-            return semanticColors.status.warning.medium;
+            return semanticColors.status.warning.default;
         }
         return colors.grey['800'];
     };
-    return (jsx(StyledAlert$2, { ...props, variant: variant, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton$1, { size: "small", onClick: onClose, closeIconColor: getCloseIconColor(), children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { variant: variant, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { variant: variant, onClick: onLinkClick, children: linkText }))] })) }));
+    return (jsx(StyledAlert$2, { ...props, variant: variant, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton$1, { size: "small", onClick: onClose, closeIconColor: getCloseIconColor(), children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { variant: variant, bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { variant: variant, bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 NeoBanner.displayName = 'NeoBanner';
 
@@ -1104,7 +1170,7 @@ const StyledBreadcrumbLink = styled(Link, {
         color: current ? semanticColors.buttons.tertiary.hover : semanticColors.icons.hover,
     },
     '&:focus-visible': {
-        outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+        outline: `2px solid ${semanticColors.border.focus}`,
         outlineOffset: 2,
     },
 }));
@@ -1194,7 +1260,7 @@ const StyledButtonBase$1 = styled(ButtonBase, {
         },
         // Focus visible for keyboard navigation
         [`&.${buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -1234,7 +1300,7 @@ const StyledButtonBase$1 = styled(ButtonBase, {
                 : {
                     [`&.${buttonBaseClasses.disabled}`]: {
                         backgroundColor: semanticColors.buttons.secondary.disabledBackground,
-                        borderColor: semanticColors.buttons.secondary.disabledBorder,
+                        borderColor: semanticColors.border.secondary,
                         color: semanticColors.typography.button.disabled,
                     },
                 }),
@@ -1362,40 +1428,102 @@ function NeoButton({ variant = 'primary', size = 'medium', loading = false, chil
 }
 NeoButton.displayName = 'NeoButton';
 
+const StyledButtonTab = styled(MuiToggleButton)(({ theme }) => ({
+    fontFamily: typography.fontFamily.body,
+    fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    lineHeight: 1,
+    color: semanticColors.typography.tab.inactive,
+    backgroundColor: 'transparent',
+    border: 'none',
+    padding: theme.spacing(1, 1.5),
+    cursor: 'pointer',
+    textTransform: 'none',
+    transition: theme.transitions.create(['color'], {
+        duration: theme.transitions.duration.short,
+    }),
+    '&:hover': {
+        color: semanticColors.typography.tab.active,
+    },
+    '&.Mui-focusVisible': {
+        outline: `2px solid ${semanticColors.border.focus}`,
+        outlineOffset: -2,
+        borderRadius: borderRadius.xXS,
+    },
+    '&.Mui-disabled': {
+        color: semanticColors.typography.button.disabled,
+        cursor: 'default',
+        pointerEvents: 'none',
+    },
+}));
+/**
+ * Syncs aria-selected with MUI's Mui-selected class via MutationObserver.
+ * MUI ToggleButton computes selection internally from context and applies
+ * the Mui-selected class — we mirror that to aria-selected for tab semantics.
+ */
+function useTabAriaSync() {
+    const observerRef = useRef(null);
+    return useCallback((node) => {
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        if (!node)
+            return;
+        const sync = () => {
+            node.setAttribute('role', 'tab');
+            node.setAttribute('aria-selected', String(node.classList.contains('Mui-selected')));
+        };
+        sync();
+        observerRef.current = new MutationObserver(sync);
+        observerRef.current.observe(node, { attributes: true, attributeFilter: ['class'] });
+    }, []);
+}
+/**
+ * NeoButtonTab - A tab-style toggle button for use within NeoButtonGroup
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=4106-11048
+ */
+const NeoButtonTab = ({ children, ...props }) => {
+    const tabRef = useTabAriaSync();
+    return (jsx(StyledButtonTab, { ref: tabRef, ...props, children: children }));
+};
+NeoButtonTab.displayName = 'NeoButtonTab';
+
 /**
- * Styled ButtonGroup that implements Neo design system styling
+ * Styled toggle button group that implements the Figma "Button tab group" design.
  *
- * The ButtonGroup uses MUI's built-in functionality for:
- * - Button grouping and spacing
- * - Orientation handling
- * - Disabled state management
+ * Built on MUI ToggleButtonGroup which provides:
+ * - Selection state management (value/onChange/exclusive)
+ * - Size and disabled propagation via context
+ * - Positional classes (firstButton/middleButton/lastButton)
  *
- * Custom styling focuses on:
- * - Border radius (pill shape with borderRadius.full)
+ * Custom styling:
+ * - Pill-shaped border (borderRadius.full)
  * - Size variants (small=32px, medium=40px)
  * - Border colors using semantic tokens
- * - Active/inactive button states (handled by individual buttons)
+ * - Selected state colors from Neo design tokens
  */
-const StyledButtonGroup = styled(MuiButtonGroup)(({ theme, size = 'medium' }) => {
+const StyledButtonTabGroup = styled(MuiToggleButtonGroup)(({ theme, size = 'medium' }) => {
     const sizeStyles = {
         small: {
-            height: 32,
+            height: spacing.spacing_4,
         },
         medium: {
             height: spacing.spacing_5,
         },
     };
     return {
-        // Apply pill-shaped border radius
         borderRadius: borderRadius.full,
         border: `1px solid ${semanticColors.border.primary}`,
-        // Override MUI's default button group styles
-        [`& .${buttonGroupClasses.grouped}`]: {
+        overflow: 'hidden',
+        // Style all grouped children
+        [`& .${toggleButtonGroupClasses.grouped}`]: {
+            flex: 1,
             minWidth: 'auto',
             height: sizeStyles[size].height,
             padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
             fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-            fontWeight: typography.fontWeight.semiBold,
+            fontWeight: typography.fontWeight.regular,
             lineHeight: 1,
             textTransform: 'none',
             border: 'none',
@@ -1406,40 +1534,35 @@ const StyledButtonGroup = styled(MuiButtonGroup)(({ theme, size = 'medium' }) =>
             transition: theme.transitions.create(['background-color', 'color', 'border-color'], {
                 duration: theme.transitions.duration.short,
             }),
-            // Active state (when button is selected/pressed)
-            '&:active, &.active': {
+            // Selected state — double selector for specificity over MUI ToggleButton defaults
+            [`&.${toggleButtonClasses.selected}.${toggleButtonClasses.selected}`]: {
                 backgroundColor: semanticColors.surfaces.white,
                 color: semanticColors.buttons.tertiary.default,
                 fontWeight: typography.fontWeight.semiBold,
             },
             // Hover state
-            '&:hover': {
+            [`&:hover, &.${toggleButtonClasses.selected}:hover`]: {
                 backgroundColor: semanticColors.buttons.secondary.hoverBackground,
-                borderRight: `1px solid ${semanticColors.border.primary}`,
             },
             // Focus visible for keyboard navigation
-            [`&.${buttonBaseClasses.focusVisible}`]: {
-                outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            '&.Mui-focusVisible': {
+                outline: `2px solid ${semanticColors.border.focus}`,
                 outlineOffset: -2,
                 zIndex: 1,
             },
             // First button: rounded left edge
-            [`&.${buttonGroupClasses.firstButton}`]: {
+            [`&.${toggleButtonGroupClasses.firstButton}`]: {
                 borderTopLeftRadius: borderRadius.full,
                 borderBottomLeftRadius: borderRadius.full,
             },
             // Last button: rounded right edge, no right border
-            [`&.${buttonGroupClasses.lastButton}`]: {
+            [`&.${toggleButtonGroupClasses.lastButton}`]: {
                 borderTopRightRadius: borderRadius.full,
                 borderBottomRightRadius: borderRadius.full,
                 borderRight: 'none',
             },
-            // Middle buttons: no border radius
-            [`&.${buttonGroupClasses.middleButton}`]: {
-                borderRadius: 0,
-            },
             // Disabled state
-            [`&.${buttonBaseClasses.disabled}`]: {
+            [`&.${toggleButtonClasses.disabled}`]: {
                 backgroundColor: semanticColors.buttons.secondary.disabledBackground,
                 color: semanticColors.typography.button.disabled,
                 cursor: 'not-allowed',
@@ -1449,29 +1572,27 @@ const StyledButtonGroup = styled(MuiButtonGroup)(({ theme, size = 'medium' }) =>
     };
 });
 /**
- * NeoButtonGroup - Button group component based on MUI ButtonGroup
+ * NeoButtonTabGroup - Button tab group container
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4106-11129
  *
  * Figma Props Mapping:
  * - Size (Sm|Md) → size prop (small|medium)
- * - Active button state → Controlled externally via button props or classes
+ * - Active button state → Controlled via value/onChange props
  *
  * Usage:
  * ```tsx
- * <NeoButtonGroup size="medium">
- *   <NeoButton>Button 1</NeoButton>
- *   <NeoButton>Button 2</NeoButton>
- *   <NeoButton>Button 3</NeoButton>
- * </NeoButtonGroup>
+ * <NeoButtonTabGroup value={selected} onChange={(_, val) => setSelected(val)} size="medium">
+ *   <NeoButtonTab value="tab1">Tab 1</NeoButtonTab>
+ *   <NeoButtonTab value="tab2">Tab 2</NeoButtonTab>
+ *   <NeoButtonTab value="tab3">Tab 3</NeoButtonTab>
+ * </NeoButtonTabGroup>
  * ```
- *
- * Note: To show active state, add 'active' class to the selected button
  */
-const NeoButtonGroup = ({ size = 'medium', variant = 'outlined', ...props }) => {
-    return jsx(StyledButtonGroup, { size: size, variant: variant, ...props });
+const NeoButtonTabGroup = ({ size = 'medium', exclusive = true, ...props }) => {
+    return jsx(StyledButtonTabGroup, { role: "tablist", size: size, exclusive: exclusive, ...props });
 };
-NeoButtonGroup.displayName = 'NeoButtonGroup';
+NeoButtonTabGroup.displayName = 'NeoButtonTabGroup';
 
 // Border radius per size (from Figma)
 const borderRadiusConfig = {
@@ -1545,7 +1666,7 @@ const StyledCheckbox = styled(Checkbox, {
         height: config.size,
         padding: 0,
         marginTop: size === 'xs' ? 3 : 2,
-        color: semanticColors.border.input,
+        color: semanticColors.border.primary,
         flexShrink: 0,
         // Root element
         [`&.${checkboxClasses.root}`]: {
@@ -1568,20 +1689,20 @@ const StyledCheckbox = styled(Checkbox, {
         },
         // Disabled state
         [`&.${checkboxClasses.disabled}`]: {
-            color: semanticColors.border.input,
+            color: semanticColors.border.primary,
             cursor: 'not-allowed',
             // When checked and disabled
             [`&.${checkboxClasses.checked}`]: {
-                color: semanticColors.border.input,
+                color: semanticColors.border.primary,
             },
             // When indeterminate and disabled
             [`&.${checkboxClasses.indeterminate}`]: {
-                color: semanticColors.border.input,
+                color: semanticColors.border.primary,
             },
         },
         // Focus visible for keyboard navigation
         '&.Mui-focusVisible': {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
             borderRadius: config.borderRadius,
         },
@@ -1711,7 +1832,7 @@ const StyledButtonBase = styled(ButtonBase, {
         cursor: 'text',
         // Focus visible for keyboard navigation
         [`&.${buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -1752,9 +1873,9 @@ const IconWrapper$2 = styled('span')(({ theme, isMultiline }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4187-30353
  *
  * Figma Props Mapping:
- * - Color (Light|Dark) → variant (outlined|filled)
- * - size (Single line|multiline|inline) → size prop + auto-detected multiline
- * - Copy button → endIcon (ReactNode)
+ * - Theme (Dark|Light) → variant (outlined|filled)
+ * - Content (Single|Multi|Inline) → size (small|large|inline)
+ * - Show icon (boolean) → endIcon (ReactNode, unmappable)
  * - Text content → children prop
  */
 const NeoCodeSnippet = ({ variant = 'outlined', size = 'small', endIcon, children, ...props }) => {
@@ -1782,7 +1903,7 @@ const StyledSearchField = styled(TextField)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(typography.fontSize.default),
         borderRadius: borderRadius.input,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.input}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         paddingTop: spacing.spacing_1,
         paddingBottom: spacing.spacing_1,
         paddingLeft: spacing.spacing_1_1_2,
@@ -2039,11 +2160,11 @@ const ChevronDownIcon = (props) => (jsx(ChevronDown, { ...props, size: spacing.s
 const StyledSelect = styled(MuiSelect)({
     minHeight: spacing.spacing_5,
     backgroundColor: semanticColors.input.background,
-    border: `1px solid ${semanticColors.border.input}`,
+    border: `1px solid ${semanticColors.border.primary}`,
     borderRadius: `${borderRadius.input}px`,
     '&:hover': {
         backgroundColor: semanticColors.input.hoverBackground,
-        borderColor: semanticColors.border.input,
+        borderColor: semanticColors.border.primary,
     },
     '&.Mui-focused': {
         backgroundColor: semanticColors.input.background,
@@ -2159,7 +2280,7 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
         position: 'relative',
         minHeight: spacing.spacing_5,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.input}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         borderRadius: `${borderRadius.input}px`,
         fontSize: typography.fontSize.default,
         fontWeight: typography.fontWeight.regular,
@@ -2167,11 +2288,11 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}:hover`]: {
         backgroundColor: semanticColors.input.hoverBackground,
-        borderColor: semanticColors.border.input,
+        borderColor: semanticColors.border.primary,
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}.${inputBaseClasses.focused}`]: {
         backgroundColor: semanticColors.input.background,
-        borderColor: semanticColors.border.input,
+        borderColor: semanticColors.border.primary,
     },
     [`& .${gridClasses.filterForm} .${inputBaseClasses.root}::before`]: {
         display: 'none',
@@ -2595,11 +2716,11 @@ const outlinedColorStyles = {
     },
 };
 const filledColorStyles = {
-    default: semanticColors.status.neutral.medium,
-    error: semanticColors.status.error.medium,
-    warning: semanticColors.status.warning.medium,
-    success: semanticColors.status.success.medium,
-    info: semanticColors.status.info.medium,
+    default: semanticColors.status.neutral.default,
+    error: semanticColors.status.error.default,
+    warning: semanticColors.status.warning.default,
+    success: semanticColors.status.success.default,
+    info: semanticColors.status.info.default,
     violet: colors.violet[500],
     beta: colors.digitalBlue[300],
 };
@@ -2629,9 +2750,9 @@ const StyledChip$1 = styled(Chip)(({ theme, size, variant, color }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-34533
  *
  * Figma Props Mapping:
- * - m (sm|md|lg) → size (small|medium|large)
- * - type (light|dark) → variant (outlined|filled)
- * - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
+ * - Size (Small|Medium|Large) → size (small|medium|large)
+ * - Type (Outline|Filled) → variant (outlined|filled)
+ * - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
  * - Label text → label prop
  */
 const NeoTag = ({ size = 'small', variant = 'outlined', ...props }) => {
@@ -3207,7 +3328,7 @@ const StyledIconButton = styled(IconButton, {
         },
         // Focus visible for keyboard navigation
         '&:focus-visible': {
-            outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -3547,7 +3668,7 @@ const sizeMap = {
 };
 const StyledBadge = styled(Badge)(({ ownerState }) => {
     const size = sizeMap[ownerState.size];
-    const color = semanticColors.status[ownerState.color].medium;
+    const color = semanticColors.status[ownerState.color].default;
     return {
         [`& .${badgeClasses.badge}`]: {
             width: size,
@@ -3575,7 +3696,7 @@ const StyledBadge = styled(Badge)(({ ownerState }) => {
  */
 const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...props }) => {
     const dotSize = sizeMap[size];
-    const mediumColor = semanticColors.status[color].medium;
+    const mediumColor = semanticColors.status[color].default;
     const lightColor = semanticColors.status[color].light;
     // For outline variant, use SVG for precise control
     const renderDot = () => {
@@ -3941,6 +4062,56 @@ const NeoFooter = ({ variant = 'pagination', showShadow = false, loading = false
 };
 NeoFooter.displayName = 'NeoFooter';
 
+/**
+ * Shared color palette for avatar components (GeneralAvatar, NavigationAvatar).
+ * Maps color index (1-7) to background color token pairs.
+ */
+const avatarColorPalette = {
+    1: { bg: colors.digitalBlue[100] },
+    2: { bg: colors.digitalGreen[100] },
+    3: { bg: colors.gold[100] },
+    4: { bg: colors.red[100] },
+    5: { bg: colors.violet[100] },
+    6: { bg: colors.tealGreen[100] },
+    7: { bg: colors.orange[100] },
+};
+
+const sizeConfig$1 = {
+    small: { width: spacing.spacing_4, height: spacing.spacing_4, fontSize: typography.fontSize.xs },
+    medium: { width: spacing.spacing_5, height: spacing.spacing_5, fontSize: typography.fontSize.sm },
+};
+const StyledAvatar = styled(Avatar, {
+    shouldForwardProp: prop => prop !== 'avatarSize' && prop !== 'colorIndex',
+})(({ theme, avatarSize, colorIndex }) => {
+    const size = sizeConfig$1[avatarSize];
+    const palette = avatarColorPalette[colorIndex];
+    return {
+        boxSizing: 'border-box',
+        width: size.width,
+        height: size.height,
+        fontSize: theme.typography.pxToRem(size.fontSize),
+        fontFamily: typography.fontFamily.body,
+        fontWeight: typography.fontWeight.regular,
+        lineHeight: 1,
+        color: semanticColors.typography.body,
+        backgroundColor: palette ? palette.bg : undefined,
+        border: `1px solid ${semanticColors.border.primary}`,
+        '&:focus-visible': {
+            ...focusRingStyles,
+            borderColor: semanticColors.border.focus,
+        },
+    };
+});
+/**
+ * NeoGeneralAvatar - Avatar with image or colored initials display
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
+ */
+const NeoGeneralAvatar = ({ size = 'medium', colorIndex = 0, children, ...props }) => {
+    return (jsx(StyledAvatar, { avatarSize: size, colorIndex: colorIndex, ...props, children: children }));
+};
+NeoGeneralAvatar.displayName = 'NeoGeneralAvatar';
+
 const customProps$1 = ['iconSize'];
 const StyledIconWrapper = styled('div', {
     shouldForwardProp: prop => !customProps$1.includes(prop),
@@ -4122,9 +4293,9 @@ const StyledInputBase = styled(InputBase, {
         },
         medium: {
             height: spacing.spacing_5_1_2,
-            padding: `${spacing.spacing_2}px ${spacing.spacing_3}px ${spacing.spacing_2}px ${startAdornment ? 0 : spacing.spacing_2}px`,
+            padding: `${spacing.spacing_1_1_4}px ${spacing.spacing_2}px ${spacing.spacing_1_1_4}px ${startAdornment ? 0 : spacing.spacing_2}px`,
             fontSize: theme.typography.pxToRem(typography.fontSize.default),
-            borderRadius: borderRadius.input,
+            borderRadius: spacing.spacing_8,
         },
     };
     const sizeStyles = sizeConfig[size];
@@ -4133,7 +4304,7 @@ const StyledInputBase = styled(InputBase, {
         fontSize: sizeStyles.fontSize,
         borderRadius: sizeStyles.borderRadius,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${destructive ? semanticColors.status.error.medium : semanticColors.border.input}`,
+        border: `1px solid ${destructive ? semanticColors.status.error.default : semanticColors.border.primary}`,
         transition: theme.transitions.create(['border-color', 'background-color'], {
             duration: theme.transitions.duration.short,
         }),
@@ -4147,19 +4318,21 @@ const StyledInputBase = styled(InputBase, {
         // Hover state
         '&:hover': {
             backgroundColor: semanticColors.input.hoverBackground,
-            borderColor: destructive ? semanticColors.status.error.medium : semanticColors.border.input,
+            borderColor: destructive
+                ? semanticColors.status.error.default
+                : semanticColors.border.primary,
         },
         // Focused state
         [`&.${inputBaseClasses.focused}`]: {
             backgroundColor: semanticColors.input.background,
             borderColor: destructive
-                ? semanticColors.status.error.medium
+                ? semanticColors.status.error.default
                 : semanticColors.buttons.primary.default,
         },
         // Disabled state
         [`&.${inputBaseClasses.disabled}`]: {
             backgroundColor: semanticColors.input.disabledBackground,
-            borderColor: semanticColors.border.input,
+            borderColor: semanticColors.border.primary,
             color: semanticColors.icons.disabled,
             [`& .${inputBaseClasses.input}`]: {
                 WebkitTextFillColor: semanticColors.icons.disabled,
@@ -4167,11 +4340,11 @@ const StyledInputBase = styled(InputBase, {
         },
         // Error state
         [`&.${inputBaseClasses.error}`]: {
-            borderColor: semanticColors.status.error.medium,
+            borderColor: semanticColors.status.error.default,
         },
         // Adornment styling
         [`& .${inputAdornmentClasses.root}`]: {
-            color: destructive ? semanticColors.status.error.medium : semanticColors.icons.placeholder,
+            color: destructive ? semanticColors.status.error.default : semanticColors.icons.placeholder,
         },
     };
 });
@@ -4185,7 +4358,7 @@ const StyledFormHelperText = styled(FormHelperText, {
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         color: semanticColors.typography.input.helper,
         [`&.${formHelperTextClasses.error}`]: {
-            color: semanticColors.status.error.medium,
+            color: semanticColors.status.error.default,
         },
         [`&.${formHelperTextClasses.disabled}`]: {
             color: semanticColors.icons.disabled,
@@ -4485,7 +4658,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
     transition: theme.transitions.create(['border', 'background-color']),
     // Active (selected) state
     [`&.${listItemButtonClasses.selected}`]: {
-        border: `2px solid ${semanticColors.border.tabActive}`,
+        border: `2px solid ${semanticColors.buttons.primary.default}`,
         backgroundColor: theme.palette.common.white,
         '&:hover': {
             backgroundColor: theme.palette.common.white,
@@ -4519,9 +4692,9 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
     },
     // Focus state
     [`&.${listItemButtonClasses.focusVisible}`]: {
-        outline: `2px solid ${semanticColors.border.tabActive}`,
+        outline: `2px solid ${semanticColors.buttons.primary.default}`,
         outlineOffset: 2,
-        border: `2px solid ${semanticColors.border.tabActive}`,
+        border: `2px solid ${semanticColors.buttons.primary.default}`,
         backgroundColor: theme.palette.common.white,
         [`& .${listItemIconClasses.root}`]: {
             color: semanticColors.icons.default,
@@ -4580,7 +4753,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
  * - showIcon → Conditional rendering of ListItemIcon child
  *
  * Design Tokens Used:
- * - semanticColors.border.tabActive (#2f42ff) - Active border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active border
  * - semanticColors.border.primary (#d1d5db) - Default/disabled border
  * - semanticColors.icons.default (#1f2937) - Active icon color
  * - semanticColors.icons.disabled (#d1d5db) - Deselected/disabled icon color
@@ -4613,17 +4786,17 @@ const StyledCard = styled(MuiCard, {
     flexDirection: 'column',
     gap: theme.spacing(2), // 16px
     backgroundColor: semanticColors.surfaces.card,
-    border: `1px solid ${selected ? semanticColors.border.tabActive : semanticColors.border.card}`,
+    border: `1px solid ${selected ? semanticColors.buttons.primary.default : semanticColors.border.primary}`,
     borderRadius: borderRadius.xS,
     boxShadow: selected ? activeShadow$1 : 'none',
     transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
-        borderColor: semanticColors.border.tabActive,
+        borderColor: semanticColors.buttons.primary.default,
         boxShadow: activeShadow$1,
     },
     '&:focus-visible': {
-        borderColor: semanticColors.border.tabActive,
+        borderColor: semanticColors.buttons.primary.default,
         ...focusRingStyles,
     },
     ...(disabled && {
@@ -4727,8 +4900,8 @@ const Description$1 = styled('p')(({ theme }) => ({
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background
  * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
- * - semanticColors.border.card (#d1d5db) - Default border
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
+ * - semanticColors.border.primary (#d1d5db) - Default border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border
  * - shadows.focusWhite1 - Inner white focus ring (2px spread)
  * - shadows.focusBlue2 - Outer blue focus ring (4px spread)
  * - colors.grey[800] (#1F2937) - Text color
@@ -4751,10 +4924,12 @@ const StyledLargeCard = styled(MuiCard, {
     const isActive = cardState === 'active';
     const isDisabled = cardState === 'disabled';
     const isFocused = cardState === 'focused';
-    const activeBorderColor = isLight ? semanticColors.border.tabActive : colors.digitalGreen[300];
+    const activeBorderColor = isLight
+        ? semanticColors.buttons.primary.default
+        : colors.digitalGreen[300];
     const defaultBorderColor = isLight
-        ? semanticColors.border.card
-        : `${semanticColors.border.card}80`;
+        ? semanticColors.border.primary
+        : `${semanticColors.border.primary}80`;
     return {
         width: 340,
         height: 162,
@@ -4770,7 +4945,7 @@ const StyledLargeCard = styled(MuiCard, {
         overflow: 'hidden',
         ...(isFocused && focusRingStyles),
         '&:focus-visible': {
-            borderColor: isLight ? semanticColors.border.tabActive : colors.digitalGreen[300],
+            borderColor: isLight ? semanticColors.buttons.primary.default : colors.digitalGreen[300],
             ...focusRingStyles,
         },
         ...(isDisabled && {
@@ -4850,8 +5025,8 @@ const ButtonsRow = styled('div')({
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#ffffff) - Light theme background
  * - colors.grey[800] (#1f2937) - Dark theme background
- * - semanticColors.border.card (#d1d5db) - Default border (50% opacity on dark)
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border (light theme)
+ * - semanticColors.border.primary (#d1d5db) - Default border (50% opacity on dark)
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border (light theme)
  * - colors.digitalGreen[300] (#88fe9b) - Active/focused border (dark theme)
  * - borderRadius.xS (4px) - Corner radius
  * - shadows.focusWhite1 + shadows.focusBlue2 - Focus ring
@@ -4923,7 +5098,7 @@ NeoMenu.displayName = 'NeoMenu';
 const StyledDialog = styled(Dialog)({
     [`& .${dialogClasses.paper}`]: {
         borderRadius: borderRadius.card,
-        border: `1px solid ${semanticColors.border.card}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         boxShadow: 'none',
     },
     [`& .${dialogClasses.container}`]: {
@@ -5106,6 +5281,34 @@ const NeoModalFooter = ({ leadingContent, children }) => {
 };
 NeoModalFooter.displayName = 'NeoModalFooter';
 
+const NavigationAvatarContainer = styled('div')({
+    display: 'flex',
+    boxSizing: 'border-box',
+    width: spacing.spacing_5_1_2,
+    height: spacing.spacing_5_1_2,
+    padding: spacing.spacing_3_4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '50%',
+    border: `1px solid ${semanticColors.border.primary}`,
+    backgroundColor: semanticColors.buttons.secondary.defaultBackground,
+    '&:focus-within': {
+        borderColor: semanticColors.border.focus,
+    },
+});
+/**
+ * NeoNavigationAvatar - Compact avatar for navigation contexts
+ *
+ * Wraps NeoGeneralAvatar (size="small") in a 44px container with 6px padding,
+ * providing a larger interactive area for navigation UI.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
+ */
+const NeoNavigationAvatar = ({ colorIndex = 0, children, ...props }) => {
+    return (jsx(NavigationAvatarContainer, { children: jsx(NeoGeneralAvatar, { size: "small", colorIndex: colorIndex, ...props, children: children }) }));
+};
+NeoNavigationAvatar.displayName = 'NeoNavigationAvatar';
+
 const customProps = ['selected'];
 const StyledRoot = styled(ButtonBase, {
     shouldForwardProp: prop => !customProps.includes(prop),
@@ -5445,7 +5648,7 @@ const StyledLinearProgress$1 = styled(LinearProgress, {
     // Cancelled variant uses warning color
     '&[data-variant="cancelled"]': {
         [`& .${linearProgressClasses.bar}`]: {
-            backgroundColor: semanticColors.status.warning.medium,
+            backgroundColor: semanticColors.status.warning.default,
         },
     },
 }));
@@ -5510,7 +5713,7 @@ const StyledTextField = styled(TextField)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(typography.fontSize.default),
         borderRadius: borderRadius.input,
         backgroundColor: semanticColors.input.background,
-        border: `1px solid ${semanticColors.border.input}`,
+        border: `1px solid ${semanticColors.border.primary}`,
         paddingTop: spacing.spacing_1,
         paddingBottom: spacing.spacing_1,
         paddingLeft: spacing.spacing_1_1_2,
@@ -5605,7 +5808,7 @@ NeoQuickFilter.displayName = 'NeoQuickFilter';
 const UncheckedIcon = ({ size }) => {
     const dimensions = size === 'small' ? 16 : 20;
     const radius = size === 'small' ? 8 : 10;
-    return (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Unchecked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: semanticColors.border.input, strokeWidth: "1", fill: "transparent" })] }));
+    return (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Unchecked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: semanticColors.border.primary, strokeWidth: "1", fill: "transparent" })] }));
 };
 const CheckedIcon = ({ size }) => {
     const dimensions = size === 'small' ? 16 : 20;
@@ -5852,7 +6055,7 @@ NeoSkeleton.displayName = 'NeoSkeleton';
 
 /**
  * Styled Alert component with custom severity and variant styling
- * Uses Custom Variants Pattern to add 'neutral' and 'info' severities
+ * Uses Custom Variants Pattern to add 'neutral', 'info', and 'warning' severities
  */
 const StyledAlert$1 = styled(Alert, {
     shouldForwardProp: prop => prop !== 'severity' && prop !== 'variant',
@@ -5861,41 +6064,49 @@ const StyledAlert$1 = styled(Alert, {
     const colorMap = {
         success: {
             light: semanticColors.status.success.light,
-            medium: semanticColors.status.success.medium,
+            medium: semanticColors.status.success.default,
         },
         error: {
             light: semanticColors.status.error.light,
-            medium: semanticColors.status.error.medium,
+            medium: semanticColors.status.error.default,
         },
         neutral: {
             light: semanticColors.status.neutral.light,
-            medium: semanticColors.status.neutral.medium,
+            medium: semanticColors.status.neutral.default,
         },
         info: {
             light: semanticColors.status.info.light,
-            medium: semanticColors.status.info.medium,
+            medium: semanticColors.status.info.default,
+        },
+        warning: {
+            light: semanticColors.status.warning.light,
+            medium: semanticColors.status.warning.default,
         },
     };
     const severityColors = colorMap[severity];
-    // Variant-specific styles based on Phase 1.1 analysis
+    const isWarningFilled = severity === 'warning' && variant === 'filled';
+    // Variant-specific styles
     const variantStyles = (() => {
         if (variant === 'filled') {
-            // Dark mode: solid background with white text
+            // Warning filled uses dark text for contrast on yellow bg
+            const textColor = isWarningFilled
+                ? semanticColors.typography.warning
+                : semanticColors.typography.tooltip;
             return {
                 backgroundColor: severityColors.medium,
                 border: 'none',
-                color: semanticColors.typography.tooltip,
+                color: textColor,
                 padding: theme.spacing(0.75, 3),
                 boxShadow: `0px 1px 3px ${semanticColors.surfaces.shadowNeutral}1a`, // 1a = 10% opacity
                 [`& .${alertClasses.icon}`]: {
-                    color: semanticColors.typography.tooltip,
+                    color: textColor,
                 },
                 [`& .${alertClasses.message}`]: {
-                    color: semanticColors.typography.tooltip,
+                    color: textColor,
                 },
             };
         }
-        // Light mode: light background with border
+        // Outlined: light background with border
         return {
             backgroundColor: severityColors.light,
             border: `1px solid ${severityColors.medium}`,
@@ -5924,7 +6135,9 @@ const StyledAlert$1 = styled(Alert, {
             fontSize: theme.typography.pxToRem(typography.fontSize.sm),
             fontWeight: typography.fontWeight.regular,
             color: variant === 'filled'
-                ? semanticColors.typography.tooltip
+                ? isWarningFilled
+                    ? semanticColors.typography.warning
+                    : semanticColors.typography.tooltip
                 : semanticColors.typography.bodySecondary,
             lineHeight: 1.4,
             marginTop: theme.spacing(0.25),
@@ -5934,20 +6147,21 @@ const StyledAlert$1 = styled(Alert, {
 /**
  * NeoStatusBanner - Status banner component for displaying system status messages
  *
- * Displays status information with different severity levels (success, error, info, neutral) and
- * visual modes (outlined for light backgrounds, filled for emphasis).
+ * Displays status information with different severity levels (success, error, info, neutral, warning)
+ * and visual modes (outlined for light backgrounds, filled for emphasis).
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4921-3427
  *
  * Figma Props Mapping:
- * - Status (Success|Error|Info|Offline) → severity ('success'|'error'|'info'|'neutral')
- * - Mode (Light|Dark) → variant ('outlined'|'filled')
+ * - Intent (Success|Error|Info|Offline|Warning) → severity ('success'|'error'|'info'|'neutral'|'warning')
+ * - Type (Outlined|Filled) → variant ('outlined'|'filled')
  *
  * Design Tokens Used:
- * - status.success.light, status.success.medium
- * - status.error.light, status.error.medium
- * - status.neutral.light, status.neutral.medium
- * - status.info.light, status.info.medium
+ * - status.success.light, status.success.default
+ * - status.error.light, status.error.default
+ * - status.neutral.light, status.neutral.default
+ * - status.info.light, status.info.default
+ * - status.warning.light, status.warning.default
  * - typography.tooltip, typography.bodySecondary
  * - grey[800]
  * - fontSize.default, fontSize.sm
@@ -5962,6 +6176,7 @@ const NeoStatusBanner = ({ severity = 'success', variant = 'outlined', icon, chi
         error: jsx(CircleAlert, { size: 24 }),
         neutral: jsx(WifiOff, { size: 24 }),
         info: jsx(Info, { size: 24 }),
+        warning: jsx(TriangleAlert, { size: 24 }),
     };
     const defaultIcon = iconMap[severity];
     // Type assertion needed: severity and variant are custom props filtered by shouldForwardProp
@@ -5984,7 +6199,7 @@ NeoStatusBanner.displayName = 'NeoStatusBanner';
 const NeoTabs = styled(MuiTabs)(() => ({
     minHeight: spacing.spacing_5,
     [`& .${tabsClasses.indicator}`]: {
-        backgroundColor: semanticColors.border.tabActive,
+        backgroundColor: semanticColors.buttons.primary.default,
         height: 2,
     },
     [`& .${tabsClasses.flexContainer}`]: {
@@ -6006,7 +6221,7 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
         fontWeight: typography.fontWeight.semiBold,
     },
     [`&.${buttonBaseClasses.focusVisible}`]: {
-        outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+        outline: `2px solid ${semanticColors.border.focus}`,
         outlineOffset: -2,
     },
     [`&.${tabClasses.disabled}`]: {
@@ -6026,11 +6241,9 @@ const TabLabelContainer = styled('span')(({ theme }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=3368-26152
  *
  * Figma Props Mapping:
- * - Current=True/False → Controlled by parent NeoTabs value
- * - State=Default → default styling
- * - State=Hover → CSS :hover
- * - State=Focus → CSS :focus-visible
- * - Tag count → count prop (renders NeoTag)
+ * - Selected (True|False) → Controlled by parent NeoTabs value
+ * - State (Default|Hover|Focus|Disabled) → CSS states + disabled prop
+ * - Show tag (boolean) → count prop (renders NeoTag)
  * - Text label → label prop
  */
 const NeoTab = ({ label, count, ...props }) => {
@@ -6041,8 +6254,8 @@ NeoTab.displayName = 'NeoTab';
 
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert = styled(Alert, {
-    shouldForwardProp: prop => prop !== 'variant' && prop !== 'showProgress',
-})(({ theme, variant = 'default' }) => {
+    shouldForwardProp: prop => prop !== 'variant' && prop !== 'toastType' && prop !== 'showProgress',
+})(({ theme, variant = 'default', toastType = 'outlined' }) => {
     // Base styles
     const baseStyles = {
         padding: spacing.spacing_2,
@@ -6066,37 +6279,73 @@ const StyledAlert = styled(Alert, {
             marginRight: 0,
         },
     };
-    // Variant-specific styles
-    const variantStyles = {
+    // Outlined intent styles (light bg + colored border)
+    const outlinedStyles = {
         default: {
             backgroundColor: semanticColors.surfaces.snackbarDarkMode,
             color: colors.grey['800'],
             border: `1px solid ${semanticColors.border.primary}`,
         },
-        dark: {
-            backgroundColor: semanticColors.surfaces.snackbarLightMode,
-            color: semanticColors.surfaces.white,
-            border: `1px solid ${semanticColors.surfaces.snackbarLightMode}`,
-        },
-        brand: {
-            backgroundColor: semanticColors.surfaces.snackbarBrand,
-            color: semanticColors.surfaces.white,
-            border: `1px solid ${semanticColors.surfaces.snackbarBrand}`,
-        },
         error: {
             backgroundColor: semanticColors.status.error.light,
             color: semanticColors.status.error.dark,
-            border: `1px solid ${semanticColors.status.error.medium}`,
+            border: `1px solid ${semanticColors.status.error.default}`,
         },
         success: {
             backgroundColor: semanticColors.status.success.light,
             color: semanticColors.status.success.dark,
-            border: `1px solid ${semanticColors.status.success.medium}`,
+            border: `1px solid ${semanticColors.status.success.default}`,
         },
         info: {
             backgroundColor: semanticColors.status.info.light,
             color: semanticColors.status.info.dark,
-            border: `1px solid ${semanticColors.status.info.medium}`,
+            border: `1px solid ${semanticColors.status.info.default}`,
+        },
+        warning: {
+            backgroundColor: semanticColors.status.warning.light,
+            color: semanticColors.status.warning.dark,
+            border: `1px solid ${semanticColors.status.warning.default}`,
+        },
+    };
+    // Filled intent styles (solid bg)
+    const filledStyles = {
+        default: {
+            backgroundColor: semanticColors.surfaces.snackbarLightMode,
+            color: semanticColors.surfaces.white,
+            border: `1px solid ${semanticColors.surfaces.snackbarLightMode}`,
+        },
+        error: {
+            backgroundColor: semanticColors.status.error.dark,
+            color: semanticColors.surfaces.white,
+            border: `1px solid ${semanticColors.status.error.dark}`,
+        },
+        success: {
+            backgroundColor: semanticColors.status.success.dark,
+            color: semanticColors.surfaces.white,
+            border: `1px solid ${semanticColors.status.success.dark}`,
+        },
+        info: {
+            backgroundColor: semanticColors.status.info.dark,
+            color: semanticColors.surfaces.white,
+            border: `1px solid ${semanticColors.status.info.dark}`,
+        },
+        warning: {
+            backgroundColor: semanticColors.status.warning.default,
+            color: semanticColors.typography.warning,
+            border: `1px solid ${semanticColors.status.warning.default}`,
+        },
+    };
+    // Legacy variants (ignore toastType)
+    const legacyStyles = {
+        dark: {
+            backgroundColor: semanticColors.surfaces.snackbarLightMode,
+            color: semanticColors.surfaces.white,
+            border: `1px solid ${semanticColors.surfaces.snackbarLightMode}`,
+        },
+        brand: {
+            backgroundColor: semanticColors.surfaces.snackbarBrand,
+            color: semanticColors.surfaces.white,
+            border: `1px solid ${semanticColors.surfaces.snackbarBrand}`,
         },
         download: {
             backgroundColor: semanticColors.surfaces.snackbarDarkMode,
@@ -6104,45 +6353,83 @@ const StyledAlert = styled(Alert, {
             border: `1px solid ${semanticColors.border.primary}`,
         },
     };
+    const getVariantStyles = () => {
+        if (legacyStyles[variant])
+            return legacyStyles[variant];
+        const styleMap = toastType === 'filled' ? filledStyles : outlinedStyles;
+        return styleMap[variant] ?? outlinedStyles.default;
+    };
     return {
         ...baseStyles,
-        ...variantStyles[variant],
+        ...getVariantStyles(),
     };
 });
-const ToastTitle = styled('p')(({ theme, variant = 'default' }) => {
-    const colorMap = {
+const ToastTitle = styled('p')(({ theme, variant = 'default', toastType = 'outlined' }) => {
+    const outlinedColors = {
         default: colors.grey['700'],
-        dark: semanticColors.surfaces.white,
-        brand: semanticColors.surfaces.white,
         error: semanticColors.status.error.dark,
         success: semanticColors.status.success.dark,
         info: semanticColors.status.info.dark,
+        warning: semanticColors.status.warning.dark,
+    };
+    const filledColors = {
+        default: semanticColors.surfaces.white,
+        error: semanticColors.surfaces.white,
+        success: semanticColors.surfaces.white,
+        info: semanticColors.surfaces.white,
+        warning: semanticColors.typography.warning,
+    };
+    const legacyColors = {
+        dark: semanticColors.surfaces.white,
+        brand: semanticColors.surfaces.white,
         download: colors.grey['700'],
     };
+    const getColor = () => {
+        if (legacyColors[variant])
+            return legacyColors[variant];
+        const colorMap = toastType === 'filled' ? filledColors : outlinedColors;
+        return colorMap[variant] ?? outlinedColors.default;
+    };
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         fontWeight: typography.fontWeight.semiBold,
         lineHeight: 1.4,
-        color: colorMap[variant],
+        color: getColor(),
     };
 });
-const ToastMessage = styled('p')(({ theme, variant = 'default' }) => {
-    const colorMap = {
+const ToastMessage = styled('p')(({ theme, variant = 'default', toastType = 'outlined' }) => {
+    const outlinedColors = {
         default: semanticColors.typography.bodySecondary,
-        dark: colors.grey['200'],
-        brand: colors.grey['200'],
         error: semanticColors.status.error.dark,
         success: semanticColors.status.success.dark,
         info: semanticColors.status.info.dark,
+        warning: semanticColors.status.warning.dark,
+    };
+    const filledColors = {
+        default: colors.grey['200'],
+        error: semanticColors.surfaces.white,
+        success: semanticColors.surfaces.white,
+        info: semanticColors.surfaces.white,
+        warning: semanticColors.typography.warning,
+    };
+    const legacyColors = {
+        dark: colors.grey['200'],
+        brand: colors.grey['200'],
         download: colors.grey['800'],
     };
+    const getColor = () => {
+        if (legacyColors[variant])
+            return legacyColors[variant];
+        const colorMap = toastType === 'filled' ? filledColors : outlinedColors;
+        return colorMap[variant] ?? outlinedColors.default;
+    };
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         fontWeight: typography.fontWeight.regular,
         lineHeight: 1.4,
-        color: colorMap[variant],
+        color: getColor(),
     };
 });
 const ToastActions = styled(Stack)({
@@ -6151,29 +6438,39 @@ const ToastActions = styled(Stack)({
     justifyContent: 'flex-start',
 });
 const ToastButton = styled(Button, {
-    shouldForwardProp: prop => prop !== 'toastVariant' && prop !== 'primary',
-})(({ toastVariant = 'default', primary }) => {
+    shouldForwardProp: prop => prop !== 'toastVariant' && prop !== 'toastType' && prop !== 'primary',
+})(({ toastVariant = 'default', toastType = 'outlined', primary }) => {
+    const isLegacy = toastVariant === 'dark' || toastVariant === 'brand' || toastVariant === 'download';
+    const isFilled = !isLegacy && toastType === 'filled';
     const getColor = () => {
         if (primary) {
             if (toastVariant === 'dark' || toastVariant === 'brand') {
                 return colors.digitalBlue['200'];
             }
+            if (isFilled) {
+                return toastVariant === 'warning'
+                    ? semanticColors.typography.link.primary
+                    : semanticColors.surfaces.white;
+            }
             return semanticColors.typography.link.primary;
         }
         // Non-primary button colors
         if (toastVariant === 'dark' || toastVariant === 'brand') {
             return semanticColors.surfaces.white;
         }
-        if (toastVariant === 'error') {
-            return semanticColors.status.error.dark;
+        if (isFilled) {
+            return toastVariant === 'warning'
+                ? semanticColors.typography.warning
+                : semanticColors.surfaces.white;
         }
-        if (toastVariant === 'success') {
+        if (toastVariant === 'error')
+            return semanticColors.status.error.dark;
+        if (toastVariant === 'success')
             return semanticColors.status.success.dark;
-        }
-        if (toastVariant === 'info') {
+        if (toastVariant === 'info')
             return semanticColors.status.info.dark;
-        }
-        // default and download variants use icon placeholder color
+        if (toastVariant === 'warning')
+            return semanticColors.status.warning.dark;
         return semanticColors.icons.placeholder;
     };
     return {
@@ -6237,27 +6534,27 @@ const DownloadIconButton = styled(IconButton)({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-37223
  *
  * Figma Props Mapping:
- * - type (Light mode|Dark mode|Brand color|Error|Success|Info|Download) → variant (default|dark|brand|error|success|info|download)
- * - header → title (string)
- * - supportingText → message (string)
- * - xCloseButton → showClose (boolean)
- * - actions → actions (ReactNode)
- * - Progress bar → progress (number 0-100)
- */
-const NeoToast = ({ variant = 'default', title, message, showClose = true, actions, progress, fileName, onClose, ...props }) => {
+ * - Intent (Neutral|Error|Success|Info|Warning) → variant (default|error|success|info|warning)
+ * - Type (Outlined|Filled) → type ('outlined'|'filled')
+ * - Show header → title (string)
+ * - Show supporting text → message (string)
+ * - Show close icon → showClose (boolean)
+ * - Show actions → actions (ReactNode)
+ */
+const NeoToast = ({ variant = 'default', type = 'outlined', title, message, showClose = true, actions, progress, fileName, onClose, ...props }) => {
     const isDownloadVariant = variant === 'download';
-    return (jsx(StyledAlert, { ...props, variant: variant, showProgress: isDownloadVariant, action: showClose && !isDownloadVariant ? (jsx(IconButton, { size: "small", onClick: onClose, sx: { color: semanticColors.icons.placeholder }, children: jsx(X, { size: 16 }) })) : undefined, children: isDownloadVariant ? (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", sx: {
+    return (jsx(StyledAlert, { ...props, variant: variant, toastType: type, showProgress: isDownloadVariant, action: showClose && !isDownloadVariant ? (jsx(IconButton, { size: "small", onClick: onClose, sx: { color: semanticColors.icons.placeholder }, children: jsx(X, { size: 16 }) })) : undefined, children: isDownloadVariant ? (jsxs(Fragment, { children: [jsxs(Stack, { direction: "row", sx: {
                         alignItems: 'flex-start',
                         justifyContent: 'space-between',
                         width: '100%',
                         gap: `${spacing.spacing_4}px`,
-                    }, children: [title && jsx(ToastTitle, { variant: variant, children: title }), showClose && (jsxs(DownloadActions, { direction: "row", children: [jsx(DownloadIconButton, { size: "small", children: jsx(Stack, { sx: { width: 16, height: 16 } }) }), jsx(DownloadIconButton, { size: "small", onClick: onClose, children: jsx(X, { size: 16 }) })] }))] }), jsxs(ProgressSection, { children: [jsxs(Stack, { direction: "row", sx: { alignItems: 'flex-end', justifyContent: 'space-between', width: '100%' }, children: [fileName && jsx(FileName, { children: fileName }), progress !== undefined && jsxs(ProgressLabel, { children: [progress, "%"] })] }), jsx(StyledLinearProgress, { variant: "determinate", value: progress ?? 0 })] })] })) : (jsxs(Fragment, { children: [jsxs(Stack, { sx: { gap: `${spacing.spacing_1}px`, width: '100%' }, children: [title && jsx(ToastTitle, { variant: variant, children: title }), message && jsx(ToastMessage, { variant: variant, children: message })] }), actions && jsx(ToastActions, { direction: "row", children: actions })] })) }));
+                    }, children: [title && (jsx(ToastTitle, { variant: variant, toastType: type, children: title })), showClose && (jsxs(DownloadActions, { direction: "row", children: [jsx(DownloadIconButton, { size: "small", children: jsx(Stack, { sx: { width: 16, height: 16 } }) }), jsx(DownloadIconButton, { size: "small", onClick: onClose, children: jsx(X, { size: 16 }) })] }))] }), jsxs(ProgressSection, { children: [jsxs(Stack, { direction: "row", sx: { alignItems: 'flex-end', justifyContent: 'space-between', width: '100%' }, children: [fileName && jsx(FileName, { children: fileName }), progress !== undefined && jsxs(ProgressLabel, { children: [progress, "%"] })] }), jsx(StyledLinearProgress, { variant: "determinate", value: progress ?? 0 })] })] })) : (jsxs(Fragment, { children: [jsxs(Stack, { sx: { gap: `${spacing.spacing_1}px`, width: '100%' }, children: [title && (jsx(ToastTitle, { variant: variant, toastType: type, children: title })), message && (jsx(ToastMessage, { variant: variant, toastType: type, children: message }))] }), actions && jsx(ToastActions, { direction: "row", children: actions })] })) }));
 };
 /**
  * Helper component for creating toast action buttons with proper styling
  */
-const NeoToastButton = ({ primary, variant = 'default', children, ...props }) => {
-    return (jsx(ToastButton, { variant: "text", toastVariant: variant, primary: primary, ...props, children: children }));
+const NeoToastButton = ({ primary, variant = 'default', type = 'outlined', children, ...props }) => {
+    return (jsx(ToastButton, { variant: "text", toastVariant: variant, toastType: type, primary: primary, ...props, children: children }));
 };
 NeoToast.displayName = 'NeoToast';
 NeoToastButton.displayName = 'NeoToastButton';
@@ -6324,7 +6621,7 @@ const StyledSwitch = styled(Switch, {
             // Focus visible for keyboard navigation
             '&.Mui-focusVisible': {
                 [`& + .${switchClasses.track}`]: {
-                    outline: `2px solid ${semanticColors.buttons.primary.focus}`,
+                    outline: `2px solid ${semanticColors.border.focus}`,
                     outlineOffset: 2,
                 },
             },
@@ -6544,10 +6841,10 @@ const StyledTooltip = styled(Tooltip, {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4091-26557&t=Bo58EpFmg6ILJtmv-11
  *
  * Figma Props Mapping:
- * - Type (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
- * - Arrow → arrow (boolean) + placement (top/bottom/left/right/etc)
- * - Supporting text (True|False) → description (string|undefined)
- * - text → title (string, literal content)
+ * - Theme (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
+ * - Placement (None|Bottom left|...|Top center) → arrow (boolean) + placement
+ * - Show description (boolean) → description (string|undefined)
+ * - Text → title (string, literal content)
  *
  * Design Tokens Used:
  * - Light: surfaces.tooltip (#4b5563), typography.tooltip (#ffffff)
@@ -6665,7 +6962,7 @@ const StyledTreeView = styled(RichTreeViewPro)({
         backgroundColor: semanticColors.surfaces.listHover,
     },
     [`& .${treeItemClasses.content}.Mui-focused`]: {
-        boxShadow: `inset 0 0 0 2px ${semanticColors.buttons.primary.focus}`,
+        boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
         backgroundColor: 'transparent',
     },
     [`& .${treeItemClasses.content}.Mui-selected`]: {
@@ -6676,7 +6973,7 @@ const StyledTreeView = styled(RichTreeViewPro)({
     },
     [`& .${treeItemClasses.content}.Mui-selected.Mui-focused`]: {
         backgroundColor: semanticColors.surfaces.listHover,
-        boxShadow: `inset 0 0 0 2px ${semanticColors.buttons.primary.focus}`,
+        boxShadow: `inset 0 0 0 2px ${semanticColors.border.focus}`,
     },
     [`& .${treeItemClasses.label}`]: {
         fontSize: typography.fontSize.xs,
@@ -6701,7 +6998,7 @@ const StyledTreeView = styled(RichTreeViewPro)({
 
 // Figma-exact border radius for toggle buttons — no matching design token
 const TOGGLE_BUTTON_BORDER_RADIUS = 14;
-const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
+const StyledToggleButtonGroup = styled(MuiToggleButtonGroup)(({ theme }) => ({
     backgroundColor: colors.grey[50],
     padding: theme.spacing(0.625, 0.875),
     borderRadius: borderRadius.full,
@@ -6719,7 +7016,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
         },
     },
 }));
-const StyledToggleButton = styled(ToggleButton)(({ theme }) => ({
+const StyledToggleButton = styled(MuiToggleButton)(({ theme }) => ({
     padding: theme.spacing(0.625),
     minWidth: 'auto',
     color: semanticColors.icons.default,
@@ -6768,5 +7065,5 @@ NeoTypologyControl.displayName = 'NeoTypologyControl';
 
 const version = '0.0.0-development';
 
-export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
+export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
 //# sourceMappingURL=index.esm.js.map