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

package/dist/index.js

@@ -14,7 +14,8 @@ var Breadcrumbs = require('@mui/material/Breadcrumbs');
 var Link = require('@mui/material/Link');
 var ButtonBase = require('@mui/material/ButtonBase');
 var CircularProgress = require('@mui/material/CircularProgress');
-var MuiButtonGroup = require('@mui/material/ButtonGroup');
+var MuiToggleButton = require('@mui/material/ToggleButton');
+var MuiToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
 var Checkbox = require('@mui/material/Checkbox');
 var xDataGridPro = require('@mui/x-data-grid-pro');
 var Button = require('@mui/material/Button');
@@ -62,22 +63,20 @@ var Switch = require('@mui/material/Switch');
 var hooks = require('@mui/x-tree-view/hooks');
 var TreeItem = require('@mui/x-tree-view/TreeItem');
 var RichTreeViewPro = require('@mui/x-tree-view-pro/RichTreeViewPro');
-var ToggleButton = require('@mui/material/ToggleButton');
-var ToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
 
 /**
- * Outline-based focus ring styles derived from Neo shadow tokens.
+ * Outline-based focus ring styles derived from Neo border tokens.
  * Uses CSS outline (not box-shadow) so focus rings are never clipped by overflow:hidden.
  *
- * Produces a double-ring effect: a white inner gap (via outline-offset) and a blue outer ring.
+ * Produces a double-ring effect: a white inner gap (via outline-offset) and a colored outer ring.
  */
 const focusRingStyles = {
-    outline: `${neoDesign.shadows.focusBlue2.spread - neoDesign.shadows.focusWhite1.spread}px solid ${neoDesign.shadows.focusBlue2.shadow}`,
-    outlineOffset: `${neoDesign.shadows.focusWhite1.spread}px`,
+    outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
+    outlineOffset: '2px',
 };
 
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Avatar variant type without global augmentation
-const StyledAvatar = styles.styled(Avatar, {
+const StyledAvatar$1 = styles.styled(Avatar, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'variant',
 })(({ theme, size = 'medium', variant = 'circular' }) => ({
     boxSizing: 'border-box',
@@ -179,7 +178,7 @@ const AvatarContainer = styles.styled(Box)(({ size = 'medium' }) => ({
  */
 const NeoAvatar = ({ size = 'medium', variant = 'circular', ...props }) => {
     // shouldForwardProp filters out size and variant from being passed to the DOM
-    const avatar = jsxRuntime.jsx(StyledAvatar, { size: size, variant: variant, ...props });
+    const avatar = jsxRuntime.jsx(StyledAvatar$1, { size: size, variant: variant, ...props });
     // Medium size with circular variant (image) gets wrapped in white container
     if (size === 'medium' && variant === 'circular') {
         return jsxRuntime.jsx(AvatarContainer, { size: size, children: avatar });
@@ -221,7 +220,7 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     [`&.${Chip.chipClasses.colorDefault}`]: {
         backgroundColor: neoDesign.semanticColors.status.neutral.light,
         color: neoDesign.semanticColors.status.neutral.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.neutral.medium}80`,
+        border: `1px solid ${neoDesign.semanticColors.status.neutral.default}80`,
         [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
             color: neoDesign.semanticColors.status.neutral.dark,
         },
@@ -230,7 +229,7 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     [`&.${Chip.chipClasses.colorError}`]: {
         backgroundColor: neoDesign.semanticColors.status.error.light,
         color: neoDesign.semanticColors.status.error.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.error.medium}80`,
+        border: `1px solid ${neoDesign.semanticColors.status.error.default}80`,
         [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
             color: neoDesign.semanticColors.status.error.dark,
         },
@@ -239,7 +238,7 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     [`&.${Chip.chipClasses.colorWarning}`]: {
         backgroundColor: neoDesign.semanticColors.status.warning.light,
         color: neoDesign.semanticColors.status.warning.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.warning.medium}80`,
+        border: `1px solid ${neoDesign.semanticColors.status.warning.default}80`,
         [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
             color: neoDesign.semanticColors.status.warning.dark,
         },
@@ -248,7 +247,7 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     [`&.${Chip.chipClasses.colorSuccess}`]: {
         backgroundColor: neoDesign.semanticColors.status.success.light,
         color: neoDesign.semanticColors.status.success.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.success.medium}80`,
+        border: `1px solid ${neoDesign.semanticColors.status.success.default}80`,
         [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
             color: neoDesign.semanticColors.status.success.dark,
         },
@@ -257,7 +256,7 @@ const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     [`&.${Chip.chipClasses.colorInfo}`]: {
         backgroundColor: neoDesign.semanticColors.status.info.light,
         color: neoDesign.semanticColors.status.info.dark,
-        border: `1px solid ${neoDesign.semanticColors.status.info.medium}80`,
+        border: `1px solid ${neoDesign.semanticColors.status.info.default}80`,
         [`& .${Chip.chipClasses.icon}, & .${Chip.chipClasses.deleteIcon}`]: {
             color: neoDesign.semanticColors.status.info.dark,
         },
@@ -691,11 +690,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
@@ -705,11 +704,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
@@ -719,7 +718,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" }],
@@ -731,7 +730,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
@@ -741,8 +740,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
@@ -752,8 +751,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
@@ -763,8 +762,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
@@ -774,8 +773,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
@@ -785,11 +784,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
@@ -799,12 +798,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
@@ -814,11 +813,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
@@ -828,12 +827,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
@@ -843,12 +842,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
@@ -858,12 +857,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
@@ -873,12 +872,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
@@ -888,11 +887,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
@@ -902,11 +901,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
@@ -916,14 +915,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
@@ -960,15 +980,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 = styles.styled(Alert, {
-    shouldForwardProp: prop => prop !== 'messagePosition' && prop !== 'variant',
-})(({ variant = 'light', messagePosition = 'left' }) => {
-    // Variant-specific styles
-    const variantStyles = {
-        dark: {
-            backgroundColor: neoDesign.semanticColors.surfaces.snackbarBrand,
-            color: neoDesign.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: neoDesign.semanticColors.status.info.light,
             color: neoDesign.colors.grey['800'],
         },
@@ -984,6 +1000,50 @@ const StyledAlert$2 = styles.styled(Alert, {
             backgroundColor: neoDesign.semanticColors.status.warning.light,
             color: neoDesign.colors.grey['800'],
         },
+        neutral: {
+            backgroundColor: neoDesign.semanticColors.status.neutral.light,
+            color: neoDesign.colors.grey['800'],
+        },
+    };
+    // Filled styles (solid bg)
+    const filledStyles = {
+        info: {
+            backgroundColor: neoDesign.semanticColors.status.info.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+        },
+        success: {
+            backgroundColor: neoDesign.semanticColors.status.success.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+        },
+        error: {
+            backgroundColor: neoDesign.semanticColors.status.error.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+        },
+        warning: {
+            backgroundColor: neoDesign.semanticColors.status.warning.default,
+            color: neoDesign.semanticColors.typography.warning,
+        },
+        neutral: {
+            backgroundColor: neoDesign.semanticColors.surfaces.snackbarLightMode,
+            color: neoDesign.semanticColors.surfaces.white,
+        },
+    };
+    // Legacy variants (ignore bannerType)
+    const legacyStyles = {
+        dark: {
+            backgroundColor: neoDesign.semanticColors.surfaces.snackbarBrand,
+            color: neoDesign.semanticColors.surfaces.white,
+        },
+        light: {
+            backgroundColor: neoDesign.semanticColors.status.info.light,
+            color: neoDesign.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%',
@@ -1000,7 +1060,7 @@ const StyledAlert$2 = styles.styled(Alert, {
         fontSize: neoDesign.typography.fontSize.default,
         fontWeight: neoDesign.typography.fontWeight.regular,
         lineHeight: 1.5,
-        ...variantStyles[variant],
+        ...getVariantStyles(),
         [`& .${Alert.alertClasses.icon}`]: {
             padding: 0,
             opacity: 1,
@@ -1023,15 +1083,16 @@ const StyledAlert$2 = styles.styled(Alert, {
         },
     };
 });
-const LinkText = styles.styled('span')(({ variant = 'light' }) => {
+const LinkText = styles.styled('span')(({ variant = 'info', bannerType = 'outlined' }) => {
+    const isLegacy = variant === 'dark' || variant === 'light';
+    const isFilled = !isLegacy && bannerType === 'filled';
     const getLinkColor = () => {
-        if (variant === 'dark') {
-            return neoDesign.semanticColors.typography.link.default; // #f9fafb (light gray/white)
+        if (variant === 'dark' || isFilled) {
+            return neoDesign.semanticColors.typography.link.default;
         }
-        if (variant === 'light') {
-            return neoDesign.semanticColors.typography.link.primary; // #2f42ff (blue)
+        if (variant === 'light' || variant === 'info') {
+            return neoDesign.semanticColors.typography.link.primary;
         }
-        // For success, error, warning - use dark body color #1f2937
         return neoDesign.colors.grey['800'];
     };
     return {
@@ -1056,29 +1117,34 @@ const StyledIconButton$1 = styles.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 neoDesign.semanticColors.typography.warning;
+        }
+        if (variant === 'dark' || isFilled) {
             return neoDesign.semanticColors.surfaces.white;
         }
         if (variant === 'success') {
-            return neoDesign.semanticColors.status.success.medium;
+            return neoDesign.semanticColors.status.success.default;
         }
         if (variant === 'error') {
-            return neoDesign.semanticColors.status.error.medium;
+            return neoDesign.semanticColors.status.error.default;
         }
         if (variant === 'warning') {
-            return neoDesign.semanticColors.status.warning.medium;
+            return neoDesign.semanticColors.status.warning.default;
         }
         return neoDesign.colors.grey['800'];
     };
-    return (jsxRuntime.jsx(StyledAlert$2, { ...props, variant: variant, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsxRuntime.jsx(StyledIconButton$1, { size: "small", onClick: onClose, closeIconColor: getCloseIconColor(), children: jsxRuntime.jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { variant: variant, onClick: onLinkClick, children: linkText }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { variant: variant, onClick: onLinkClick, children: linkText }))] })) }));
+    return (jsxRuntime.jsx(StyledAlert$2, { ...props, variant: variant, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsxRuntime.jsx(StyledIconButton$1, { size: "small", onClick: onClose, closeIconColor: getCloseIconColor(), children: jsxRuntime.jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { variant: variant, bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { variant: variant, bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 NeoBanner.displayName = 'NeoBanner';
 
@@ -1106,7 +1172,7 @@ const StyledBreadcrumbLink = styles.styled(Link, {
         color: current ? neoDesign.semanticColors.buttons.tertiary.hover : neoDesign.semanticColors.icons.hover,
     },
     '&:focus-visible': {
-        outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+        outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
         outlineOffset: 2,
     },
 }));
@@ -1196,7 +1262,7 @@ const StyledButtonBase$1 = styles.styled(ButtonBase, {
         },
         // Focus visible for keyboard navigation
         [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -1236,7 +1302,7 @@ const StyledButtonBase$1 = styles.styled(ButtonBase, {
                 : {
                     [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
                         backgroundColor: neoDesign.semanticColors.buttons.secondary.disabledBackground,
-                        borderColor: neoDesign.semanticColors.buttons.secondary.disabledBorder,
+                        borderColor: neoDesign.semanticColors.border.secondary,
                         color: neoDesign.semanticColors.typography.button.disabled,
                     },
                 }),
@@ -1364,40 +1430,102 @@ function NeoButton({ variant = 'primary', size = 'medium', loading = false, chil
 }
 NeoButton.displayName = 'NeoButton';
 
+const StyledButtonTab = styles.styled(MuiToggleButton)(({ theme }) => ({
+    fontFamily: neoDesign.typography.fontFamily.body,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
+    lineHeight: 1,
+    color: neoDesign.semanticColors.typography.tab.inactive,
+    backgroundColor: 'transparent',
+    border: 'none',
+    padding: theme.spacing(1, 1.5),
+    cursor: 'pointer',
+    textTransform: 'none',
+    transition: theme.transitions.create(['color'], {
+        duration: theme.transitions.duration.short,
+    }),
+    '&:hover': {
+        color: neoDesign.semanticColors.typography.tab.active,
+    },
+    '&.Mui-focusVisible': {
+        outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
+        outlineOffset: -2,
+        borderRadius: neoDesign.borderRadius.xXS,
+    },
+    '&.Mui-disabled': {
+        color: neoDesign.semanticColors.typography.button.disabled,
+        cursor: 'default',
+        pointerEvents: 'none',
+    },
+}));
+/**
+ * Syncs aria-selected with MUI's Mui-selected class via MutationObserver.
+ * MUI ToggleButton computes selection internally from context and applies
+ * the Mui-selected class — we mirror that to aria-selected for tab semantics.
+ */
+function useTabAriaSync() {
+    const observerRef = React.useRef(null);
+    return React.useCallback((node) => {
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+            observerRef.current = null;
+        }
+        if (!node)
+            return;
+        const sync = () => {
+            node.setAttribute('role', 'tab');
+            node.setAttribute('aria-selected', String(node.classList.contains('Mui-selected')));
+        };
+        sync();
+        observerRef.current = new MutationObserver(sync);
+        observerRef.current.observe(node, { attributes: true, attributeFilter: ['class'] });
+    }, []);
+}
+/**
+ * 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 (jsxRuntime.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 = styles.styled(MuiButtonGroup)(({ theme, size = 'medium' }) => {
+const StyledButtonTabGroup = styles.styled(MuiToggleButtonGroup)(({ theme, size = 'medium' }) => {
     const sizeStyles = {
         small: {
-            height: 32,
+            height: neoDesign.spacing.spacing_4,
         },
         medium: {
             height: neoDesign.spacing.spacing_5,
         },
     };
     return {
-        // Apply pill-shaped border radius
         borderRadius: neoDesign.borderRadius.full,
         border: `1px solid ${neoDesign.semanticColors.border.primary}`,
-        // Override MUI's default button group styles
-        [`& .${MuiButtonGroup.buttonGroupClasses.grouped}`]: {
+        overflow: 'hidden',
+        // Style all grouped children
+        [`& .${MuiToggleButtonGroup.toggleButtonGroupClasses.grouped}`]: {
+            flex: 1,
             minWidth: 'auto',
             height: sizeStyles[size].height,
             padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
             fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
-            fontWeight: neoDesign.typography.fontWeight.semiBold,
+            fontWeight: neoDesign.typography.fontWeight.regular,
             lineHeight: 1,
             textTransform: 'none',
             border: 'none',
@@ -1408,40 +1536,35 @@ const StyledButtonGroup = styles.styled(MuiButtonGroup)(({ theme, size = 'medium
             transition: theme.transitions.create(['background-color', 'color', 'border-color'], {
                 duration: theme.transitions.duration.short,
             }),
-            // Active state (when button is selected/pressed)
-            '&:active, &.active': {
+            // Selected state — double selector for specificity over MUI ToggleButton defaults
+            [`&.${MuiToggleButton.toggleButtonClasses.selected}.${MuiToggleButton.toggleButtonClasses.selected}`]: {
                 backgroundColor: neoDesign.semanticColors.surfaces.white,
                 color: neoDesign.semanticColors.buttons.tertiary.default,
                 fontWeight: neoDesign.typography.fontWeight.semiBold,
             },
             // Hover state
-            '&:hover': {
+            [`&:hover, &.${MuiToggleButton.toggleButtonClasses.selected}:hover`]: {
                 backgroundColor: neoDesign.semanticColors.buttons.secondary.hoverBackground,
-                borderRight: `1px solid ${neoDesign.semanticColors.border.primary}`,
             },
             // Focus visible for keyboard navigation
-            [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
-                outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+            '&.Mui-focusVisible': {
+                outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
                 outlineOffset: -2,
                 zIndex: 1,
             },
             // First button: rounded left edge
-            [`&.${MuiButtonGroup.buttonGroupClasses.firstButton}`]: {
+            [`&.${MuiToggleButtonGroup.toggleButtonGroupClasses.firstButton}`]: {
                 borderTopLeftRadius: neoDesign.borderRadius.full,
                 borderBottomLeftRadius: neoDesign.borderRadius.full,
             },
             // Last button: rounded right edge, no right border
-            [`&.${MuiButtonGroup.buttonGroupClasses.lastButton}`]: {
+            [`&.${MuiToggleButtonGroup.toggleButtonGroupClasses.lastButton}`]: {
                 borderTopRightRadius: neoDesign.borderRadius.full,
                 borderBottomRightRadius: neoDesign.borderRadius.full,
                 borderRight: 'none',
             },
-            // Middle buttons: no border radius
-            [`&.${MuiButtonGroup.buttonGroupClasses.middleButton}`]: {
-                borderRadius: 0,
-            },
             // Disabled state
-            [`&.${ButtonBase.buttonBaseClasses.disabled}`]: {
+            [`&.${MuiToggleButton.toggleButtonClasses.disabled}`]: {
                 backgroundColor: neoDesign.semanticColors.buttons.secondary.disabledBackground,
                 color: neoDesign.semanticColors.typography.button.disabled,
                 cursor: 'not-allowed',
@@ -1451,29 +1574,27 @@ const StyledButtonGroup = styles.styled(MuiButtonGroup)(({ theme, size = 'medium
     };
 });
 /**
- * NeoButtonGroup - Button group component based on MUI ButtonGroup
+ * NeoButtonTabGroup - Button tab group container
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4106-11129
  *
  * Figma Props Mapping:
  * - Size (Sm|Md) → size prop (small|medium)
- * - Active button state → Controlled externally via button props or classes
+ * - Active button state → Controlled via value/onChange props
  *
  * Usage:
  * ```tsx
- * <NeoButtonGroup size="medium">
- *   <NeoButton>Button 1</NeoButton>
- *   <NeoButton>Button 2</NeoButton>
- *   <NeoButton>Button 3</NeoButton>
- * </NeoButtonGroup>
+ * <NeoButtonTabGroup value={selected} onChange={(_, val) => setSelected(val)} size="medium">
+ *   <NeoButtonTab value="tab1">Tab 1</NeoButtonTab>
+ *   <NeoButtonTab value="tab2">Tab 2</NeoButtonTab>
+ *   <NeoButtonTab value="tab3">Tab 3</NeoButtonTab>
+ * </NeoButtonTabGroup>
  * ```
- *
- * Note: To show active state, add 'active' class to the selected button
  */
-const NeoButtonGroup = ({ size = 'medium', variant = 'outlined', ...props }) => {
-    return jsxRuntime.jsx(StyledButtonGroup, { size: size, variant: variant, ...props });
+const NeoButtonTabGroup = ({ size = 'medium', exclusive = true, ...props }) => {
+    return jsxRuntime.jsx(StyledButtonTabGroup, { role: "tablist", size: size, exclusive: exclusive, ...props });
 };
-NeoButtonGroup.displayName = 'NeoButtonGroup';
+NeoButtonTabGroup.displayName = 'NeoButtonTabGroup';
 
 // Border radius per size (from Figma)
 const borderRadiusConfig = {
@@ -1547,7 +1668,7 @@ const StyledCheckbox = styles.styled(Checkbox, {
         height: config.size,
         padding: 0,
         marginTop: size === 'xs' ? 3 : 2,
-        color: neoDesign.semanticColors.border.input,
+        color: neoDesign.semanticColors.border.primary,
         flexShrink: 0,
         // Root element
         [`&.${Checkbox.checkboxClasses.root}`]: {
@@ -1570,20 +1691,20 @@ const StyledCheckbox = styles.styled(Checkbox, {
         },
         // Disabled state
         [`&.${Checkbox.checkboxClasses.disabled}`]: {
-            color: neoDesign.semanticColors.border.input,
+            color: neoDesign.semanticColors.border.primary,
             cursor: 'not-allowed',
             // When checked and disabled
             [`&.${Checkbox.checkboxClasses.checked}`]: {
-                color: neoDesign.semanticColors.border.input,
+                color: neoDesign.semanticColors.border.primary,
             },
             // When indeterminate and disabled
             [`&.${Checkbox.checkboxClasses.indeterminate}`]: {
-                color: neoDesign.semanticColors.border.input,
+                color: neoDesign.semanticColors.border.primary,
             },
         },
         // Focus visible for keyboard navigation
         '&.Mui-focusVisible': {
-            outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
             outlineOffset: 2,
             borderRadius: config.borderRadius,
         },
@@ -1713,7 +1834,7 @@ const StyledButtonBase = styles.styled(ButtonBase, {
         cursor: 'text',
         // Focus visible for keyboard navigation
         [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
-            outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -1754,9 +1875,9 @@ const IconWrapper$2 = styles.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 }) => {
@@ -1784,7 +1905,7 @@ const StyledSearchField = styles.styled(TextField)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.default),
         borderRadius: neoDesign.borderRadius.input,
         backgroundColor: neoDesign.semanticColors.input.background,
-        border: `1px solid ${neoDesign.semanticColors.border.input}`,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
         paddingTop: neoDesign.spacing.spacing_1,
         paddingBottom: neoDesign.spacing.spacing_1,
         paddingLeft: neoDesign.spacing.spacing_1_1_2,
@@ -2041,11 +2162,11 @@ const ChevronDownIcon = (props) => (jsxRuntime.jsx(ChevronDown, { ...props, size
 const StyledSelect = styles.styled(MuiSelect)({
     minHeight: neoDesign.spacing.spacing_5,
     backgroundColor: neoDesign.semanticColors.input.background,
-    border: `1px solid ${neoDesign.semanticColors.border.input}`,
+    border: `1px solid ${neoDesign.semanticColors.border.primary}`,
     borderRadius: `${neoDesign.borderRadius.input}px`,
     '&:hover': {
         backgroundColor: neoDesign.semanticColors.input.hoverBackground,
-        borderColor: neoDesign.semanticColors.border.input,
+        borderColor: neoDesign.semanticColors.border.primary,
     },
     '&.Mui-focused': {
         backgroundColor: neoDesign.semanticColors.input.background,
@@ -2161,7 +2282,7 @@ const StyledGridFilterPanel = styles.styled(xDataGrid.GridFilterPanel)({
         position: 'relative',
         minHeight: neoDesign.spacing.spacing_5,
         backgroundColor: neoDesign.semanticColors.input.background,
-        border: `1px solid ${neoDesign.semanticColors.border.input}`,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
         borderRadius: `${neoDesign.borderRadius.input}px`,
         fontSize: neoDesign.typography.fontSize.default,
         fontWeight: neoDesign.typography.fontWeight.regular,
@@ -2169,11 +2290,11 @@ const StyledGridFilterPanel = styles.styled(xDataGrid.GridFilterPanel)({
     },
     [`& .${xDataGrid.gridClasses.filterForm} .${InputBase.inputBaseClasses.root}:hover`]: {
         backgroundColor: neoDesign.semanticColors.input.hoverBackground,
-        borderColor: neoDesign.semanticColors.border.input,
+        borderColor: neoDesign.semanticColors.border.primary,
     },
     [`& .${xDataGrid.gridClasses.filterForm} .${InputBase.inputBaseClasses.root}.${InputBase.inputBaseClasses.focused}`]: {
         backgroundColor: neoDesign.semanticColors.input.background,
-        borderColor: neoDesign.semanticColors.border.input,
+        borderColor: neoDesign.semanticColors.border.primary,
     },
     [`& .${xDataGrid.gridClasses.filterForm} .${InputBase.inputBaseClasses.root}::before`]: {
         display: 'none',
@@ -2597,11 +2718,11 @@ const outlinedColorStyles = {
     },
 };
 const filledColorStyles = {
-    default: neoDesign.semanticColors.status.neutral.medium,
-    error: neoDesign.semanticColors.status.error.medium,
-    warning: neoDesign.semanticColors.status.warning.medium,
-    success: neoDesign.semanticColors.status.success.medium,
-    info: neoDesign.semanticColors.status.info.medium,
+    default: neoDesign.semanticColors.status.neutral.default,
+    error: neoDesign.semanticColors.status.error.default,
+    warning: neoDesign.semanticColors.status.warning.default,
+    success: neoDesign.semanticColors.status.success.default,
+    info: neoDesign.semanticColors.status.info.default,
     violet: neoDesign.colors.violet[500],
     beta: neoDesign.colors.digitalBlue[300],
 };
@@ -2631,9 +2752,9 @@ const StyledChip$1 = styles.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 }) => {
@@ -3209,7 +3330,7 @@ const StyledIconButton = styles.styled(IconButton, {
         },
         // Focus visible for keyboard navigation
         '&:focus-visible': {
-            outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+            outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
             outlineOffset: 2,
         },
     };
@@ -3549,7 +3670,7 @@ const sizeMap = {
 };
 const StyledBadge = styles.styled(Badge)(({ ownerState }) => {
     const size = sizeMap[ownerState.size];
-    const color = neoDesign.semanticColors.status[ownerState.color].medium;
+    const color = neoDesign.semanticColors.status[ownerState.color].default;
     return {
         [`& .${Badge.badgeClasses.badge}`]: {
             width: size,
@@ -3577,7 +3698,7 @@ const StyledBadge = styles.styled(Badge)(({ ownerState }) => {
  */
 const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...props }) => {
     const dotSize = sizeMap[size];
-    const mediumColor = neoDesign.semanticColors.status[color].medium;
+    const mediumColor = neoDesign.semanticColors.status[color].default;
     const lightColor = neoDesign.semanticColors.status[color].light;
     // For outline variant, use SVG for precise control
     const renderDot = () => {
@@ -3943,6 +4064,56 @@ const NeoFooter = ({ variant = 'pagination', showShadow = false, loading = false
 };
 NeoFooter.displayName = 'NeoFooter';
 
+/**
+ * Shared color palette for avatar components (GeneralAvatar, NavigationAvatar).
+ * Maps color index (1-7) to background color token pairs.
+ */
+const avatarColorPalette = {
+    1: { bg: neoDesign.colors.digitalBlue[100] },
+    2: { bg: neoDesign.colors.digitalGreen[100] },
+    3: { bg: neoDesign.colors.gold[100] },
+    4: { bg: neoDesign.colors.red[100] },
+    5: { bg: neoDesign.colors.violet[100] },
+    6: { bg: neoDesign.colors.tealGreen[100] },
+    7: { bg: neoDesign.colors.orange[100] },
+};
+
+const sizeConfig$1 = {
+    small: { width: neoDesign.spacing.spacing_4, height: neoDesign.spacing.spacing_4, fontSize: neoDesign.typography.fontSize.xs },
+    medium: { width: neoDesign.spacing.spacing_5, height: neoDesign.spacing.spacing_5, fontSize: neoDesign.typography.fontSize.sm },
+};
+const StyledAvatar = styles.styled(Avatar, {
+    shouldForwardProp: prop => prop !== 'avatarSize' && prop !== 'colorIndex',
+})(({ theme, avatarSize, colorIndex }) => {
+    const size = sizeConfig$1[avatarSize];
+    const palette = avatarColorPalette[colorIndex];
+    return {
+        boxSizing: 'border-box',
+        width: size.width,
+        height: size.height,
+        fontSize: theme.typography.pxToRem(size.fontSize),
+        fontFamily: neoDesign.typography.fontFamily.body,
+        fontWeight: neoDesign.typography.fontWeight.regular,
+        lineHeight: 1,
+        color: neoDesign.semanticColors.typography.body,
+        backgroundColor: palette ? palette.bg : undefined,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
+        '&:focus-visible': {
+            ...focusRingStyles,
+            borderColor: neoDesign.semanticColors.border.focus,
+        },
+    };
+});
+/**
+ * NeoGeneralAvatar - Avatar with image or colored initials display
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
+ */
+const NeoGeneralAvatar = ({ size = 'medium', colorIndex = 0, children, ...props }) => {
+    return (jsxRuntime.jsx(StyledAvatar, { avatarSize: size, colorIndex: colorIndex, ...props, children: children }));
+};
+NeoGeneralAvatar.displayName = 'NeoGeneralAvatar';
+
 const customProps$1 = ['iconSize'];
 const StyledIconWrapper = styles.styled('div', {
     shouldForwardProp: prop => !customProps$1.includes(prop),
@@ -4124,9 +4295,9 @@ const StyledInputBase = styles.styled(InputBase, {
         },
         medium: {
             height: neoDesign.spacing.spacing_5_1_2,
-            padding: `${neoDesign.spacing.spacing_2}px ${neoDesign.spacing.spacing_3}px ${neoDesign.spacing.spacing_2}px ${startAdornment ? 0 : neoDesign.spacing.spacing_2}px`,
+            padding: `${neoDesign.spacing.spacing_1_1_4}px ${neoDesign.spacing.spacing_2}px ${neoDesign.spacing.spacing_1_1_4}px ${startAdornment ? 0 : neoDesign.spacing.spacing_2}px`,
             fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.default),
-            borderRadius: neoDesign.borderRadius.input,
+            borderRadius: neoDesign.spacing.spacing_8,
         },
     };
     const sizeStyles = sizeConfig[size];
@@ -4135,7 +4306,7 @@ const StyledInputBase = styles.styled(InputBase, {
         fontSize: sizeStyles.fontSize,
         borderRadius: sizeStyles.borderRadius,
         backgroundColor: neoDesign.semanticColors.input.background,
-        border: `1px solid ${destructive ? neoDesign.semanticColors.status.error.medium : neoDesign.semanticColors.border.input}`,
+        border: `1px solid ${destructive ? neoDesign.semanticColors.status.error.default : neoDesign.semanticColors.border.primary}`,
         transition: theme.transitions.create(['border-color', 'background-color'], {
             duration: theme.transitions.duration.short,
         }),
@@ -4149,19 +4320,21 @@ const StyledInputBase = styles.styled(InputBase, {
         // Hover state
         '&:hover': {
             backgroundColor: neoDesign.semanticColors.input.hoverBackground,
-            borderColor: destructive ? neoDesign.semanticColors.status.error.medium : neoDesign.semanticColors.border.input,
+            borderColor: destructive
+                ? neoDesign.semanticColors.status.error.default
+                : neoDesign.semanticColors.border.primary,
         },
         // Focused state
         [`&.${InputBase.inputBaseClasses.focused}`]: {
             backgroundColor: neoDesign.semanticColors.input.background,
             borderColor: destructive
-                ? neoDesign.semanticColors.status.error.medium
+                ? neoDesign.semanticColors.status.error.default
                 : neoDesign.semanticColors.buttons.primary.default,
         },
         // Disabled state
         [`&.${InputBase.inputBaseClasses.disabled}`]: {
             backgroundColor: neoDesign.semanticColors.input.disabledBackground,
-            borderColor: neoDesign.semanticColors.border.input,
+            borderColor: neoDesign.semanticColors.border.primary,
             color: neoDesign.semanticColors.icons.disabled,
             [`& .${InputBase.inputBaseClasses.input}`]: {
                 WebkitTextFillColor: neoDesign.semanticColors.icons.disabled,
@@ -4169,11 +4342,11 @@ const StyledInputBase = styles.styled(InputBase, {
         },
         // Error state
         [`&.${InputBase.inputBaseClasses.error}`]: {
-            borderColor: neoDesign.semanticColors.status.error.medium,
+            borderColor: neoDesign.semanticColors.status.error.default,
         },
         // Adornment styling
         [`& .${InputAdornment.inputAdornmentClasses.root}`]: {
-            color: destructive ? neoDesign.semanticColors.status.error.medium : neoDesign.semanticColors.icons.placeholder,
+            color: destructive ? neoDesign.semanticColors.status.error.default : neoDesign.semanticColors.icons.placeholder,
         },
     };
 });
@@ -4187,7 +4360,7 @@ const StyledFormHelperText = styles.styled(FormHelperText, {
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
         color: neoDesign.semanticColors.typography.input.helper,
         [`&.${FormHelperText.formHelperTextClasses.error}`]: {
-            color: neoDesign.semanticColors.status.error.medium,
+            color: neoDesign.semanticColors.status.error.default,
         },
         [`&.${FormHelperText.formHelperTextClasses.disabled}`]: {
             color: neoDesign.semanticColors.icons.disabled,
@@ -4487,7 +4660,7 @@ const StyledListItemButton = styles.styled(ListItemButton)(({ theme }) => ({
     transition: theme.transitions.create(['border', 'background-color']),
     // Active (selected) state
     [`&.${ListItemButton.listItemButtonClasses.selected}`]: {
-        border: `2px solid ${neoDesign.semanticColors.border.tabActive}`,
+        border: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
         backgroundColor: theme.palette.common.white,
         '&:hover': {
             backgroundColor: theme.palette.common.white,
@@ -4521,9 +4694,9 @@ const StyledListItemButton = styles.styled(ListItemButton)(({ theme }) => ({
     },
     // Focus state
     [`&.${ListItemButton.listItemButtonClasses.focusVisible}`]: {
-        outline: `2px solid ${neoDesign.semanticColors.border.tabActive}`,
+        outline: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
         outlineOffset: 2,
-        border: `2px solid ${neoDesign.semanticColors.border.tabActive}`,
+        border: `2px solid ${neoDesign.semanticColors.buttons.primary.default}`,
         backgroundColor: theme.palette.common.white,
         [`& .${ListItemIcon.listItemIconClasses.root}`]: {
             color: neoDesign.semanticColors.icons.default,
@@ -4582,7 +4755,7 @@ const StyledListItemButton = styles.styled(ListItemButton)(({ theme }) => ({
  * - showIcon → Conditional rendering of ListItemIcon child
  *
  * Design Tokens Used:
- * - semanticColors.border.tabActive (#2f42ff) - Active border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active border
  * - semanticColors.border.primary (#d1d5db) - Default/disabled border
  * - semanticColors.icons.default (#1f2937) - Active icon color
  * - semanticColors.icons.disabled (#d1d5db) - Deselected/disabled icon color
@@ -4615,17 +4788,17 @@ const StyledCard = styles.styled(MuiCard, {
     flexDirection: 'column',
     gap: theme.spacing(2), // 16px
     backgroundColor: neoDesign.semanticColors.surfaces.card,
-    border: `1px solid ${selected ? neoDesign.semanticColors.border.tabActive : neoDesign.semanticColors.border.card}`,
+    border: `1px solid ${selected ? neoDesign.semanticColors.buttons.primary.default : neoDesign.semanticColors.border.primary}`,
     borderRadius: neoDesign.borderRadius.xS,
     boxShadow: selected ? activeShadow$1 : 'none',
     transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
-        borderColor: neoDesign.semanticColors.border.tabActive,
+        borderColor: neoDesign.semanticColors.buttons.primary.default,
         boxShadow: activeShadow$1,
     },
     '&:focus-visible': {
-        borderColor: neoDesign.semanticColors.border.tabActive,
+        borderColor: neoDesign.semanticColors.buttons.primary.default,
         ...focusRingStyles,
     },
     ...(disabled && {
@@ -4729,8 +4902,8 @@ const Description$1 = styles.styled('p')(({ theme }) => ({
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#FFFFFF) - Default card background
  * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
- * - semanticColors.border.card (#d1d5db) - Default border
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border
+ * - semanticColors.border.primary (#d1d5db) - Default border
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border
  * - shadows.focusWhite1 - Inner white focus ring (2px spread)
  * - shadows.focusBlue2 - Outer blue focus ring (4px spread)
  * - colors.grey[800] (#1F2937) - Text color
@@ -4753,10 +4926,12 @@ const StyledLargeCard = styles.styled(MuiCard, {
     const isActive = cardState === 'active';
     const isDisabled = cardState === 'disabled';
     const isFocused = cardState === 'focused';
-    const activeBorderColor = isLight ? neoDesign.semanticColors.border.tabActive : neoDesign.colors.digitalGreen[300];
+    const activeBorderColor = isLight
+        ? neoDesign.semanticColors.buttons.primary.default
+        : neoDesign.colors.digitalGreen[300];
     const defaultBorderColor = isLight
-        ? neoDesign.semanticColors.border.card
-        : `${neoDesign.semanticColors.border.card}80`;
+        ? neoDesign.semanticColors.border.primary
+        : `${neoDesign.semanticColors.border.primary}80`;
     return {
         width: 340,
         height: 162,
@@ -4772,7 +4947,7 @@ const StyledLargeCard = styles.styled(MuiCard, {
         overflow: 'hidden',
         ...(isFocused && focusRingStyles),
         '&:focus-visible': {
-            borderColor: isLight ? neoDesign.semanticColors.border.tabActive : neoDesign.colors.digitalGreen[300],
+            borderColor: isLight ? neoDesign.semanticColors.buttons.primary.default : neoDesign.colors.digitalGreen[300],
             ...focusRingStyles,
         },
         ...(isDisabled && {
@@ -4852,8 +5027,8 @@ const ButtonsRow = styles.styled('div')({
  * Design Tokens Used:
  * - semanticColors.surfaces.card (#ffffff) - Light theme background
  * - colors.grey[800] (#1f2937) - Dark theme background
- * - semanticColors.border.card (#d1d5db) - Default border (50% opacity on dark)
- * - semanticColors.border.tabActive (#2f42ff) - Active/focused border (light theme)
+ * - semanticColors.border.primary (#d1d5db) - Default border (50% opacity on dark)
+ * - semanticColors.buttons.primary.default (#2f42ff) - Active/focused border (light theme)
  * - colors.digitalGreen[300] (#88fe9b) - Active/focused border (dark theme)
  * - borderRadius.xS (4px) - Corner radius
  * - shadows.focusWhite1 + shadows.focusBlue2 - Focus ring
@@ -4925,7 +5100,7 @@ NeoMenu.displayName = 'NeoMenu';
 const StyledDialog = styles.styled(Dialog)({
     [`& .${Dialog.dialogClasses.paper}`]: {
         borderRadius: neoDesign.borderRadius.card,
-        border: `1px solid ${neoDesign.semanticColors.border.card}`,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
         boxShadow: 'none',
     },
     [`& .${Dialog.dialogClasses.container}`]: {
@@ -5108,6 +5283,34 @@ const NeoModalFooter = ({ leadingContent, children }) => {
 };
 NeoModalFooter.displayName = 'NeoModalFooter';
 
+const NavigationAvatarContainer = styles.styled('div')({
+    display: 'flex',
+    boxSizing: 'border-box',
+    width: neoDesign.spacing.spacing_5_1_2,
+    height: neoDesign.spacing.spacing_5_1_2,
+    padding: neoDesign.spacing.spacing_3_4,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '50%',
+    border: `1px solid ${neoDesign.semanticColors.border.primary}`,
+    backgroundColor: neoDesign.semanticColors.buttons.secondary.defaultBackground,
+    '&:focus-within': {
+        borderColor: neoDesign.semanticColors.border.focus,
+    },
+});
+/**
+ * NeoNavigationAvatar - Compact avatar for navigation contexts
+ *
+ * Wraps NeoGeneralAvatar (size="small") in a 44px container with 6px padding,
+ * providing a larger interactive area for navigation UI.
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
+ */
+const NeoNavigationAvatar = ({ colorIndex = 0, children, ...props }) => {
+    return (jsxRuntime.jsx(NavigationAvatarContainer, { children: jsxRuntime.jsx(NeoGeneralAvatar, { size: "small", colorIndex: colorIndex, ...props, children: children }) }));
+};
+NeoNavigationAvatar.displayName = 'NeoNavigationAvatar';
+
 const customProps = ['selected'];
 const StyledRoot = styles.styled(ButtonBase, {
     shouldForwardProp: prop => !customProps.includes(prop),
@@ -5447,7 +5650,7 @@ const StyledLinearProgress$1 = styles.styled(LinearProgress, {
     // Cancelled variant uses warning color
     '&[data-variant="cancelled"]': {
         [`& .${LinearProgress.linearProgressClasses.bar}`]: {
-            backgroundColor: neoDesign.semanticColors.status.warning.medium,
+            backgroundColor: neoDesign.semanticColors.status.warning.default,
         },
     },
 }));
@@ -5512,7 +5715,7 @@ const StyledTextField = styles.styled(TextField)(({ theme }) => ({
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.default),
         borderRadius: neoDesign.borderRadius.input,
         backgroundColor: neoDesign.semanticColors.input.background,
-        border: `1px solid ${neoDesign.semanticColors.border.input}`,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
         paddingTop: neoDesign.spacing.spacing_1,
         paddingBottom: neoDesign.spacing.spacing_1,
         paddingLeft: neoDesign.spacing.spacing_1_1_2,
@@ -5607,7 +5810,7 @@ NeoQuickFilter.displayName = 'NeoQuickFilter';
 const UncheckedIcon = ({ size }) => {
     const dimensions = size === 'small' ? 16 : 20;
     const radius = size === 'small' ? 8 : 10;
-    return (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Unchecked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: neoDesign.semanticColors.border.input, strokeWidth: "1", fill: "transparent" })] }));
+    return (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Unchecked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: neoDesign.semanticColors.border.primary, strokeWidth: "1", fill: "transparent" })] }));
 };
 const CheckedIcon = ({ size }) => {
     const dimensions = size === 'small' ? 16 : 20;
@@ -5854,7 +6057,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 = styles.styled(Alert, {
     shouldForwardProp: prop => prop !== 'severity' && prop !== 'variant',
@@ -5863,41 +6066,49 @@ const StyledAlert$1 = styles.styled(Alert, {
     const colorMap = {
         success: {
             light: neoDesign.semanticColors.status.success.light,
-            medium: neoDesign.semanticColors.status.success.medium,
+            medium: neoDesign.semanticColors.status.success.default,
         },
         error: {
             light: neoDesign.semanticColors.status.error.light,
-            medium: neoDesign.semanticColors.status.error.medium,
+            medium: neoDesign.semanticColors.status.error.default,
         },
         neutral: {
             light: neoDesign.semanticColors.status.neutral.light,
-            medium: neoDesign.semanticColors.status.neutral.medium,
+            medium: neoDesign.semanticColors.status.neutral.default,
         },
         info: {
             light: neoDesign.semanticColors.status.info.light,
-            medium: neoDesign.semanticColors.status.info.medium,
+            medium: neoDesign.semanticColors.status.info.default,
+        },
+        warning: {
+            light: neoDesign.semanticColors.status.warning.light,
+            medium: neoDesign.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
+                ? neoDesign.semanticColors.typography.warning
+                : neoDesign.semanticColors.typography.tooltip;
             return {
                 backgroundColor: severityColors.medium,
                 border: 'none',
-                color: neoDesign.semanticColors.typography.tooltip,
+                color: textColor,
                 padding: theme.spacing(0.75, 3),
                 boxShadow: `0px 1px 3px ${neoDesign.semanticColors.surfaces.shadowNeutral}1a`, // 1a = 10% opacity
                 [`& .${Alert.alertClasses.icon}`]: {
-                    color: neoDesign.semanticColors.typography.tooltip,
+                    color: textColor,
                 },
                 [`& .${Alert.alertClasses.message}`]: {
-                    color: neoDesign.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}`,
@@ -5926,7 +6137,9 @@ const StyledAlert$1 = styles.styled(Alert, {
             fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
             fontWeight: neoDesign.typography.fontWeight.regular,
             color: variant === 'filled'
-                ? neoDesign.semanticColors.typography.tooltip
+                ? isWarningFilled
+                    ? neoDesign.semanticColors.typography.warning
+                    : neoDesign.semanticColors.typography.tooltip
                 : neoDesign.semanticColors.typography.bodySecondary,
             lineHeight: 1.4,
             marginTop: theme.spacing(0.25),
@@ -5936,20 +6149,21 @@ const StyledAlert$1 = styles.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
@@ -5964,6 +6178,7 @@ const NeoStatusBanner = ({ severity = 'success', variant = 'outlined', icon, chi
         error: jsxRuntime.jsx(CircleAlert, { size: 24 }),
         neutral: jsxRuntime.jsx(WifiOff, { size: 24 }),
         info: jsxRuntime.jsx(Info, { size: 24 }),
+        warning: jsxRuntime.jsx(TriangleAlert, { size: 24 }),
     };
     const defaultIcon = iconMap[severity];
     // Type assertion needed: severity and variant are custom props filtered by shouldForwardProp
@@ -5986,7 +6201,7 @@ NeoStatusBanner.displayName = 'NeoStatusBanner';
 const NeoTabs = styles.styled(MuiTabs)(() => ({
     minHeight: neoDesign.spacing.spacing_5,
     [`& .${MuiTabs.tabsClasses.indicator}`]: {
-        backgroundColor: neoDesign.semanticColors.border.tabActive,
+        backgroundColor: neoDesign.semanticColors.buttons.primary.default,
         height: 2,
     },
     [`& .${MuiTabs.tabsClasses.flexContainer}`]: {
@@ -6008,7 +6223,7 @@ const StyledTab = styles.styled(MuiTab)(({ theme }) => ({
         fontWeight: neoDesign.typography.fontWeight.semiBold,
     },
     [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
-        outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+        outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
         outlineOffset: -2,
     },
     [`&.${MuiTab.tabClasses.disabled}`]: {
@@ -6028,11 +6243,9 @@ const TabLabelContainer = styles.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 }) => {
@@ -6043,8 +6256,8 @@ NeoTab.displayName = 'NeoTab';
 
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert = styles.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: neoDesign.spacing.spacing_2,
@@ -6068,37 +6281,73 @@ const StyledAlert = styles.styled(Alert, {
             marginRight: 0,
         },
     };
-    // Variant-specific styles
-    const variantStyles = {
+    // Outlined intent styles (light bg + colored border)
+    const outlinedStyles = {
         default: {
             backgroundColor: neoDesign.semanticColors.surfaces.snackbarDarkMode,
             color: neoDesign.colors.grey['800'],
             border: `1px solid ${neoDesign.semanticColors.border.primary}`,
         },
-        dark: {
-            backgroundColor: neoDesign.semanticColors.surfaces.snackbarLightMode,
-            color: neoDesign.semanticColors.surfaces.white,
-            border: `1px solid ${neoDesign.semanticColors.surfaces.snackbarLightMode}`,
-        },
-        brand: {
-            backgroundColor: neoDesign.semanticColors.surfaces.snackbarBrand,
-            color: neoDesign.semanticColors.surfaces.white,
-            border: `1px solid ${neoDesign.semanticColors.surfaces.snackbarBrand}`,
-        },
         error: {
             backgroundColor: neoDesign.semanticColors.status.error.light,
             color: neoDesign.semanticColors.status.error.dark,
-            border: `1px solid ${neoDesign.semanticColors.status.error.medium}`,
+            border: `1px solid ${neoDesign.semanticColors.status.error.default}`,
         },
         success: {
             backgroundColor: neoDesign.semanticColors.status.success.light,
             color: neoDesign.semanticColors.status.success.dark,
-            border: `1px solid ${neoDesign.semanticColors.status.success.medium}`,
+            border: `1px solid ${neoDesign.semanticColors.status.success.default}`,
         },
         info: {
             backgroundColor: neoDesign.semanticColors.status.info.light,
             color: neoDesign.semanticColors.status.info.dark,
-            border: `1px solid ${neoDesign.semanticColors.status.info.medium}`,
+            border: `1px solid ${neoDesign.semanticColors.status.info.default}`,
+        },
+        warning: {
+            backgroundColor: neoDesign.semanticColors.status.warning.light,
+            color: neoDesign.semanticColors.status.warning.dark,
+            border: `1px solid ${neoDesign.semanticColors.status.warning.default}`,
+        },
+    };
+    // Filled intent styles (solid bg)
+    const filledStyles = {
+        default: {
+            backgroundColor: neoDesign.semanticColors.surfaces.snackbarLightMode,
+            color: neoDesign.semanticColors.surfaces.white,
+            border: `1px solid ${neoDesign.semanticColors.surfaces.snackbarLightMode}`,
+        },
+        error: {
+            backgroundColor: neoDesign.semanticColors.status.error.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+            border: `1px solid ${neoDesign.semanticColors.status.error.dark}`,
+        },
+        success: {
+            backgroundColor: neoDesign.semanticColors.status.success.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+            border: `1px solid ${neoDesign.semanticColors.status.success.dark}`,
+        },
+        info: {
+            backgroundColor: neoDesign.semanticColors.status.info.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+            border: `1px solid ${neoDesign.semanticColors.status.info.dark}`,
+        },
+        warning: {
+            backgroundColor: neoDesign.semanticColors.status.warning.default,
+            color: neoDesign.semanticColors.typography.warning,
+            border: `1px solid ${neoDesign.semanticColors.status.warning.default}`,
+        },
+    };
+    // Legacy variants (ignore toastType)
+    const legacyStyles = {
+        dark: {
+            backgroundColor: neoDesign.semanticColors.surfaces.snackbarLightMode,
+            color: neoDesign.semanticColors.surfaces.white,
+            border: `1px solid ${neoDesign.semanticColors.surfaces.snackbarLightMode}`,
+        },
+        brand: {
+            backgroundColor: neoDesign.semanticColors.surfaces.snackbarBrand,
+            color: neoDesign.semanticColors.surfaces.white,
+            border: `1px solid ${neoDesign.semanticColors.surfaces.snackbarBrand}`,
         },
         download: {
             backgroundColor: neoDesign.semanticColors.surfaces.snackbarDarkMode,
@@ -6106,45 +6355,83 @@ const StyledAlert = styles.styled(Alert, {
             border: `1px solid ${neoDesign.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 = styles.styled('p')(({ theme, variant = 'default' }) => {
-    const colorMap = {
+const ToastTitle = styles.styled('p')(({ theme, variant = 'default', toastType = 'outlined' }) => {
+    const outlinedColors = {
         default: neoDesign.colors.grey['700'],
-        dark: neoDesign.semanticColors.surfaces.white,
-        brand: neoDesign.semanticColors.surfaces.white,
         error: neoDesign.semanticColors.status.error.dark,
         success: neoDesign.semanticColors.status.success.dark,
         info: neoDesign.semanticColors.status.info.dark,
+        warning: neoDesign.semanticColors.status.warning.dark,
+    };
+    const filledColors = {
+        default: neoDesign.semanticColors.surfaces.white,
+        error: neoDesign.semanticColors.surfaces.white,
+        success: neoDesign.semanticColors.surfaces.white,
+        info: neoDesign.semanticColors.surfaces.white,
+        warning: neoDesign.semanticColors.typography.warning,
+    };
+    const legacyColors = {
+        dark: neoDesign.semanticColors.surfaces.white,
+        brand: neoDesign.semanticColors.surfaces.white,
         download: neoDesign.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(neoDesign.typography.fontSize.sm),
         fontWeight: neoDesign.typography.fontWeight.semiBold,
         lineHeight: 1.4,
-        color: colorMap[variant],
+        color: getColor(),
     };
 });
-const ToastMessage = styles.styled('p')(({ theme, variant = 'default' }) => {
-    const colorMap = {
+const ToastMessage = styles.styled('p')(({ theme, variant = 'default', toastType = 'outlined' }) => {
+    const outlinedColors = {
         default: neoDesign.semanticColors.typography.bodySecondary,
-        dark: neoDesign.colors.grey['200'],
-        brand: neoDesign.colors.grey['200'],
         error: neoDesign.semanticColors.status.error.dark,
         success: neoDesign.semanticColors.status.success.dark,
         info: neoDesign.semanticColors.status.info.dark,
+        warning: neoDesign.semanticColors.status.warning.dark,
+    };
+    const filledColors = {
+        default: neoDesign.colors.grey['200'],
+        error: neoDesign.semanticColors.surfaces.white,
+        success: neoDesign.semanticColors.surfaces.white,
+        info: neoDesign.semanticColors.surfaces.white,
+        warning: neoDesign.semanticColors.typography.warning,
+    };
+    const legacyColors = {
+        dark: neoDesign.colors.grey['200'],
+        brand: neoDesign.colors.grey['200'],
         download: neoDesign.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(neoDesign.typography.fontSize.sm),
         fontWeight: neoDesign.typography.fontWeight.regular,
         lineHeight: 1.4,
-        color: colorMap[variant],
+        color: getColor(),
     };
 });
 const ToastActions = styles.styled(Stack)({
@@ -6153,29 +6440,39 @@ const ToastActions = styles.styled(Stack)({
     justifyContent: 'flex-start',
 });
 const ToastButton = styles.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 neoDesign.colors.digitalBlue['200'];
             }
+            if (isFilled) {
+                return toastVariant === 'warning'
+                    ? neoDesign.semanticColors.typography.link.primary
+                    : neoDesign.semanticColors.surfaces.white;
+            }
             return neoDesign.semanticColors.typography.link.primary;
         }
         // Non-primary button colors
         if (toastVariant === 'dark' || toastVariant === 'brand') {
             return neoDesign.semanticColors.surfaces.white;
         }
-        if (toastVariant === 'error') {
-            return neoDesign.semanticColors.status.error.dark;
+        if (isFilled) {
+            return toastVariant === 'warning'
+                ? neoDesign.semanticColors.typography.warning
+                : neoDesign.semanticColors.surfaces.white;
         }
-        if (toastVariant === 'success') {
+        if (toastVariant === 'error')
+            return neoDesign.semanticColors.status.error.dark;
+        if (toastVariant === 'success')
             return neoDesign.semanticColors.status.success.dark;
-        }
-        if (toastVariant === 'info') {
+        if (toastVariant === 'info')
             return neoDesign.semanticColors.status.info.dark;
-        }
-        // default and download variants use icon placeholder color
+        if (toastVariant === 'warning')
+            return neoDesign.semanticColors.status.warning.dark;
         return neoDesign.semanticColors.icons.placeholder;
     };
     return {
@@ -6239,27 +6536,27 @@ const DownloadIconButton = styles.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 (jsxRuntime.jsx(StyledAlert, { ...props, variant: variant, showProgress: isDownloadVariant, action: showClose && !isDownloadVariant ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: neoDesign.semanticColors.icons.placeholder }, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: isDownloadVariant ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: {
+    return (jsxRuntime.jsx(StyledAlert, { ...props, variant: variant, toastType: type, showProgress: isDownloadVariant, action: showClose && !isDownloadVariant ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: neoDesign.semanticColors.icons.placeholder }, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: isDownloadVariant ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: {
                         alignItems: 'flex-start',
                         justifyContent: 'space-between',
                         width: '100%',
                         gap: `${neoDesign.spacing.spacing_4}px`,
-                    }, children: [title && jsxRuntime.jsx(ToastTitle, { variant: variant, children: title }), showClose && (jsxRuntime.jsxs(DownloadActions, { direction: "row", children: [jsxRuntime.jsx(DownloadIconButton, { size: "small", children: jsxRuntime.jsx(Stack, { sx: { width: 16, height: 16 } }) }), jsxRuntime.jsx(DownloadIconButton, { size: "small", onClick: onClose, children: jsxRuntime.jsx(X, { size: 16 }) })] }))] }), jsxRuntime.jsxs(ProgressSection, { children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: { alignItems: 'flex-end', justifyContent: 'space-between', width: '100%' }, children: [fileName && jsxRuntime.jsx(FileName, { children: fileName }), progress !== undefined && jsxRuntime.jsxs(ProgressLabel, { children: [progress, "%"] })] }), jsxRuntime.jsx(StyledLinearProgress, { variant: "determinate", value: progress ?? 0 })] })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${neoDesign.spacing.spacing_1}px`, width: '100%' }, children: [title && jsxRuntime.jsx(ToastTitle, { variant: variant, children: title }), message && jsxRuntime.jsx(ToastMessage, { variant: variant, children: message })] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] })) }));
+                    }, children: [title && (jsxRuntime.jsx(ToastTitle, { variant: variant, toastType: type, children: title })), showClose && (jsxRuntime.jsxs(DownloadActions, { direction: "row", children: [jsxRuntime.jsx(DownloadIconButton, { size: "small", children: jsxRuntime.jsx(Stack, { sx: { width: 16, height: 16 } }) }), jsxRuntime.jsx(DownloadIconButton, { size: "small", onClick: onClose, children: jsxRuntime.jsx(X, { size: 16 }) })] }))] }), jsxRuntime.jsxs(ProgressSection, { children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: { alignItems: 'flex-end', justifyContent: 'space-between', width: '100%' }, children: [fileName && jsxRuntime.jsx(FileName, { children: fileName }), progress !== undefined && jsxRuntime.jsxs(ProgressLabel, { children: [progress, "%"] })] }), jsxRuntime.jsx(StyledLinearProgress, { variant: "determinate", value: progress ?? 0 })] })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${neoDesign.spacing.spacing_1}px`, width: '100%' }, children: [title && (jsxRuntime.jsx(ToastTitle, { variant: variant, toastType: type, children: title })), message && (jsxRuntime.jsx(ToastMessage, { variant: variant, toastType: type, children: message }))] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] })) }));
 };
 /**
  * Helper component for creating toast action buttons with proper styling
  */
-const NeoToastButton = ({ primary, variant = 'default', children, ...props }) => {
-    return (jsxRuntime.jsx(ToastButton, { variant: "text", toastVariant: variant, primary: primary, ...props, children: children }));
+const NeoToastButton = ({ primary, variant = 'default', type = 'outlined', children, ...props }) => {
+    return (jsxRuntime.jsx(ToastButton, { variant: "text", toastVariant: variant, toastType: type, primary: primary, ...props, children: children }));
 };
 NeoToast.displayName = 'NeoToast';
 NeoToastButton.displayName = 'NeoToastButton';
@@ -6326,7 +6623,7 @@ const StyledSwitch = styles.styled(Switch, {
             // Focus visible for keyboard navigation
             '&.Mui-focusVisible': {
                 [`& + .${Switch.switchClasses.track}`]: {
-                    outline: `2px solid ${neoDesign.semanticColors.buttons.primary.focus}`,
+                    outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
                     outlineOffset: 2,
                 },
             },
@@ -6546,10 +6843,10 @@ const StyledTooltip = styles.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)
@@ -6667,7 +6964,7 @@ const StyledTreeView = styles.styled(RichTreeViewPro.RichTreeViewPro)({
         backgroundColor: neoDesign.semanticColors.surfaces.listHover,
     },
     [`& .${TreeItem.treeItemClasses.content}.Mui-focused`]: {
-        boxShadow: `inset 0 0 0 2px ${neoDesign.semanticColors.buttons.primary.focus}`,
+        boxShadow: `inset 0 0 0 2px ${neoDesign.semanticColors.border.focus}`,
         backgroundColor: 'transparent',
     },
     [`& .${TreeItem.treeItemClasses.content}.Mui-selected`]: {
@@ -6678,7 +6975,7 @@ const StyledTreeView = styles.styled(RichTreeViewPro.RichTreeViewPro)({
     },
     [`& .${TreeItem.treeItemClasses.content}.Mui-selected.Mui-focused`]: {
         backgroundColor: neoDesign.semanticColors.surfaces.listHover,
-        boxShadow: `inset 0 0 0 2px ${neoDesign.semanticColors.buttons.primary.focus}`,
+        boxShadow: `inset 0 0 0 2px ${neoDesign.semanticColors.border.focus}`,
     },
     [`& .${TreeItem.treeItemClasses.label}`]: {
         fontSize: neoDesign.typography.fontSize.xs,
@@ -6703,12 +7000,12 @@ const StyledTreeView = styles.styled(RichTreeViewPro.RichTreeViewPro)({
 
 // Figma-exact border radius for toggle buttons — no matching design token
 const TOGGLE_BUTTON_BORDER_RADIUS = 14;
-const StyledToggleButtonGroup = styles.styled(ToggleButtonGroup)(({ theme }) => ({
+const StyledToggleButtonGroup = styles.styled(MuiToggleButtonGroup)(({ theme }) => ({
     backgroundColor: neoDesign.colors.grey[50],
     padding: theme.spacing(0.625, 0.875),
     borderRadius: neoDesign.borderRadius.full,
     gap: 0,
-    [`& .${ToggleButtonGroup.toggleButtonGroupClasses.grouped}`]: {
+    [`& .${MuiToggleButtonGroup.toggleButtonGroupClasses.grouped}`]: {
         border: 'none',
         borderRadius: TOGGLE_BUTTON_BORDER_RADIUS,
         margin: 0,
@@ -6721,7 +7018,7 @@ const StyledToggleButtonGroup = styles.styled(ToggleButtonGroup)(({ theme }) =>
         },
     },
 }));
-const StyledToggleButton = styles.styled(ToggleButton)(({ theme }) => ({
+const StyledToggleButton = styles.styled(MuiToggleButton)(({ theme }) => ({
     padding: theme.spacing(0.625),
     minWidth: 'auto',
     color: neoDesign.semanticColors.icons.default,
@@ -6733,7 +7030,7 @@ const StyledToggleButton = styles.styled(ToggleButton)(({ theme }) => ({
     '&:hover': {
         backgroundColor: 'transparent',
     },
-    [`&.${ToggleButton.toggleButtonClasses.selected}`]: {
+    [`&.${MuiToggleButton.toggleButtonClasses.selected}`]: {
         backgroundColor: neoDesign.semanticColors.buttons.navigation.pressedBackground,
         color: neoDesign.semanticColors.icons.active,
         '&:hover': {
@@ -6779,7 +7076,8 @@ exports.NeoBanner = NeoBanner;
 exports.NeoBreadcrumbLink = NeoBreadcrumbLink;
 exports.NeoBreadcrumbs = NeoBreadcrumbs;
 exports.NeoButton = NeoButton;
-exports.NeoButtonGroup = NeoButtonGroup;
+exports.NeoButtonTab = NeoButtonTab;
+exports.NeoButtonTabGroup = NeoButtonTabGroup;
 exports.NeoCheckbox = NeoCheckbox;
 exports.NeoCodeSnippet = NeoCodeSnippet;
 exports.NeoDataGrid = NeoDataGrid;
@@ -6798,6 +7096,7 @@ exports.NeoDivider = NeoDivider;
 exports.NeoDot = NeoDot;
 exports.NeoFilterChip = NeoFilterChip;
 exports.NeoFooter = NeoFooter;
+exports.NeoGeneralAvatar = NeoGeneralAvatar;
 exports.NeoIconButton = NeoIconButton;
 exports.NeoIconWrapper = NeoIconWrapper;
 exports.NeoInfiniteScrollGrid = NeoInfiniteScrollGrid;
@@ -6814,6 +7113,7 @@ exports.NeoModalContent = NeoModalContent;
 exports.NeoModalFooter = NeoModalFooter;
 exports.NeoModalHeader = NeoModalHeader;
 exports.NeoMultiBadgesCell = NeoMultiBadgesCell;
+exports.NeoNavigationAvatar = NeoNavigationAvatar;
 exports.NeoNavigationItem = NeoNavigationItem;
 exports.NeoPageContent = NeoPageContent;
 exports.NeoPaginatedGrid = NeoPaginatedGrid;