@moderneinc/neo-styled-components 2.8.0 → 3.0.0-next.2d959a

package/dist/index.esm.js

@@ -6,14 +6,15 @@ import Avatar from '@mui/material/Avatar';
 import Chip, { chipClasses } from '@mui/material/Chip';
 import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
+import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
+import React, { forwardRef, createElement, useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
-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 MuiToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
 import MuiToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
+import MuiCard from '@mui/material/Card';
 import Checkbox, { checkboxClasses } from '@mui/material/Checkbox';
 import { useGridApiContext, useGridSelector, gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector, 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';
@@ -36,23 +37,22 @@ import { PickersShortcuts } from '@mui/x-date-pickers/PickersShortcuts';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { dateRangePickerDayClasses } from '@mui/x-date-pickers-pro/DateRangePickerDay';
 import Badge, { badgeClasses } from '@mui/material/Badge';
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
+import Paper, { paperClasses } from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
 import { listClasses } from '@mui/material/List';
 import Menu from '@mui/material/Menu';
-import { paperClasses } from '@mui/material/Paper';
 import FormControl from '@mui/material/FormControl';
 import FormHelperText, { formHelperTextClasses } from '@mui/material/FormHelperText';
 import ListItemButton, { listItemButtonClasses } from '@mui/material/ListItemButton';
 import ListItemIcon, { listItemIconClasses } from '@mui/material/ListItemIcon';
 import ListItemText, { listItemTextClasses } from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
-import MuiCard from '@mui/material/Card';
 import Dialog, { dialogClasses } from '@mui/material/Dialog';
 import DialogActions, { dialogActionsClasses } from '@mui/material/DialogActions';
 import DialogContent, { dialogContentClasses } from '@mui/material/DialogContent';
 import Fab from '@mui/material/Fab';
 import Fade from '@mui/material/Fade';
-import Stack from '@mui/material/Stack';
-import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
 import Radio, { radioClasses } from '@mui/material/Radio';
 import Skeleton from '@mui/material/Skeleton';
 import MuiTab, { tabClasses } from '@mui/material/Tab';
@@ -136,7 +136,7 @@ const AvatarContainer = styled(Box)(({ size = 'medium' }) => ({
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
-        boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
+        boxShadow: `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`,
     }),
     '&:focus-within': {
         ...focusRingStyles,
@@ -688,11 +688,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$i = [
+const __iconNode$k = [
   ["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$k);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -702,11 +702,32 @@ const ArrowDown = createLucideIcon("arrow-down", __iconNode$i);
  */
 
 
-const __iconNode$h = [
+const __iconNode$j = [
   ["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$j);
+
+/**
+ * @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$i = [
+  [
+    "path",
+    {
+      d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",
+      key: "3c2336"
+    }
+  ],
+  ["line", { x1: "12", x2: "12", y1: "16", y2: "12", key: "1y1yb1" }],
+  ["line", { x1: "12", x2: "12.01", y1: "8", y2: "8", key: "110wyk" }]
+];
+const BadgeInfo = createLucideIcon("badge-info", __iconNode$i);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -716,7 +737,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" }],
@@ -728,7 +749,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
@@ -738,8 +759,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
@@ -749,8 +770,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
@@ -760,8 +781,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
@@ -771,8 +792,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
@@ -782,11 +803,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
@@ -796,12 +817,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
@@ -811,11 +832,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
-  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
+const __iconNode$a = [
+  ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
+  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$9);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$a);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -825,12 +846,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
@@ -840,12 +861,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
@@ -855,12 +876,12 @@ const Columns3 = createLucideIcon("columns-3", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
-  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-  ["path", { d: "M12 16v-4", key: "1dtifu" }],
-  ["path", { d: "M12 8h.01", key: "e9boi3" }]
+const __iconNode$7 = [
+  ["path", { d: "M2 5h20", key: "1fs1ex" }],
+  ["path", { d: "M6 12h12", key: "8npq4p" }],
+  ["path", { d: "M9 19h6", key: "456am0" }]
 ];
-const Info = createLucideIcon("info", __iconNode$6);
+const ListFilter = createLucideIcon("list-filter", __iconNode$7);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -870,12 +891,8 @@ const Info = createLucideIcon("info", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
-  ["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 __iconNode$6 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$6);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -885,11 +902,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
@@ -899,11 +916,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
@@ -913,14 +930,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
@@ -955,33 +993,113 @@ const __iconNode = [
 ];
 const X = createLucideIcon("x", __iconNode);
 
+const neutralSmallShadow = `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`;
+const intentColors$1 = {
+    success: semanticColors.status.success,
+    error: semanticColors.status.error,
+    warning: semanticColors.status.warning,
+    offline: semanticColors.status.neutral,
+    info: semanticColors.status.info,
+};
 // 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: {
-            backgroundColor: semanticColors.status.info.light,
-            color: colors.grey['800'],
-        },
-        success: {
-            backgroundColor: semanticColors.status.success.light,
-            color: colors.grey['800'],
+    shouldForwardProp: prop => prop !== 'intent' && prop !== 'alertType',
+})(({ theme, intent = 'success', alertType = 'outlined' }) => {
+    const palette = intentColors$1[intent];
+    const isFilled = alertType === 'filled';
+    const iconColor = isFilled ? semanticColors.typography.tooltip : palette.default;
+    const messageColor = isFilled ? semanticColors.typography.tooltip : semanticColors.typography.body;
+    return {
+        height: spacing.spacing_8,
+        width: '100%',
+        borderRadius: borderRadius.xS,
+        alignItems: 'center',
+        fontFamily: typography.fontFamily.body,
+        fontSize: theme.typography.pxToRem(typography.fontSize.default),
+        fontWeight: typography.fontWeight.semiBold,
+        lineHeight: 1.5,
+        padding: theme.spacing(0, 2),
+        backgroundColor: isFilled ? palette.dark : palette.light,
+        border: isFilled ? 'none' : `1px solid ${palette.transparent}`,
+        color: isFilled ? semanticColors.typography.tooltip : semanticColors.typography.body,
+        boxShadow: isFilled ? neutralSmallShadow : undefined,
+        [`& .${alertClasses.icon}`]: {
+            color: iconColor,
+            padding: 0,
+            opacity: 1,
+            marginRight: spacing.spacing_1_1_2,
         },
-        error: {
-            backgroundColor: semanticColors.status.error.light,
-            color: colors.grey['800'],
+        [`& .${alertClasses.message}`]: {
+            color: messageColor,
+            padding: 0,
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            '& span:last-child': {
+                fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+                fontWeight: typography.fontWeight.medium,
+                color: isFilled
+                    ? semanticColors.typography.tooltip
+                    : semanticColors.typography.bodySecondary,
+                lineHeight: 1.4,
+            },
         },
-        warning: {
-            backgroundColor: semanticColors.status.warning.light,
-            color: colors.grey['800'],
+        [`& .${alertClasses.action}`]: {
+            padding: 0,
+            marginRight: 0,
+            ...(isFilled && {
+                color: semanticColors.typography.tooltip,
+                [`& .${buttonBaseClasses.root}`]: { color: 'inherit' },
+            }),
         },
     };
+});
+const iconMap = {
+    success: jsx(CircleCheckBig, { size: 24 }),
+    error: jsx(CircleAlert, { size: 24 }),
+    warning: jsx(TriangleAlert, { size: 24 }),
+    offline: jsx(WifiOff, { size: 24 }),
+    info: jsx(BadgeInfo, { size: 24 }),
+};
+/**
+ * NeoAlert - Alert component for displaying contextual status messages
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4921-3427
+ *
+ * Figma Props Mapping:
+ * - Intent (Success|Error|Warning|Offline|Info) → intent
+ * - Type (Outlined|Filled) → type
+ * - Show supporting text → description prop presence
+ * - Show Button → action prop presence
+ */
+const NeoAlert = ({ intent = 'success', type = 'outlined', title, description, icon, action, ...props }) => {
+    const defaultIcon = iconMap[intent];
+    return (jsxs(StyledAlert$2, { ...props, intent: intent, alertType: type, icon: icon ?? defaultIcon, action: action, children: [jsx("span", { children: title }), description && jsx("span", { children: description })] }));
+};
+NeoAlert.displayName = 'NeoAlert';
+
+const intentColors = {
+    info: semanticColors.status.info,
+    success: semanticColors.status.success,
+    error: semanticColors.status.error,
+    warning: semanticColors.status.warning,
+    neutral: semanticColors.status.neutral,
+};
+// biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
+const StyledAlert$1 = styled(Alert, {
+    shouldForwardProp: prop => prop !== 'messagePosition' && prop !== 'intent' && prop !== 'bannerType',
+})(({ intent = 'info', bannerType = 'outlined', messagePosition = 'left' }) => {
+    const palette = intentColors[intent];
+    const typeStyles = bannerType === 'filled'
+        ? {
+            backgroundColor: palette.dark,
+            color: semanticColors.surfaces.white,
+        }
+        : {
+            backgroundColor: palette.light,
+            color: colors.grey['800'],
+        };
     return {
         width: '100%',
         minHeight: 52,
@@ -993,11 +1111,11 @@ const StyledAlert$2 = styled(Alert, {
         alignItems: 'center',
         justifyContent: messagePosition === 'center' ? 'center' : 'flex-start',
         ...(messagePosition === 'center' && { position: 'relative' }),
-        boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
+        boxShadow: `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`,
         fontSize: typography.fontSize.default,
-        fontWeight: typography.fontWeight.regular,
+        fontWeight: typography.fontWeight.medium,
         lineHeight: 1.5,
-        ...variantStyles[variant],
+        ...typeStyles,
         [`& .${alertClasses.icon}`]: {
             padding: 0,
             opacity: 1,
@@ -1020,26 +1138,18 @@ const StyledAlert$2 = styled(Alert, {
         },
     };
 });
-const LinkText = styled('span')(({ variant = 'light' }) => {
-    const getLinkColor = () => {
-        if (variant === 'dark') {
-            return semanticColors.typography.link.default; // #f9fafb (light gray/white)
-        }
-        if (variant === 'light') {
-            return semanticColors.typography.link.primary; // #2f42ff (blue)
-        }
-        // For success, error, warning - use dark body color #1f2937
-        return colors.grey['800'];
-    };
-    return {
-        fontWeight: typography.fontWeight.semiBold,
-        color: getLinkColor(),
-        cursor: 'pointer',
-        '&:hover': {
-            textDecoration: 'underline',
-        },
-    };
-});
+const LinkText = styled('span')(({ bannerType = 'outlined' }) => ({
+    marginLeft: 'auto',
+    fontWeight: typography.fontWeight.semiBold,
+    color: bannerType === 'filled'
+        ? semanticColors.typography.link.white
+        : semanticColors.typography.link.primary,
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+        textDecoration: 'underline',
+    },
+}));
 const StyledIconButton$1 = styled(IconButton)(({ closeIconColor }) => ({
     padding: 0,
     color: closeIconColor,
@@ -1047,35 +1157,17 @@ const StyledIconButton$1 = styled(IconButton)(({ closeIconColor }) => ({
         backgroundColor: 'transparent',
     },
 }));
-/**
- * NeoBanner - Inline banner/alert component based on MUI Alert
- *
- * @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 }) => {
-    const getCloseIconColor = () => {
-        if (variant === 'dark') {
-            return semanticColors.surfaces.white;
-        }
-        if (variant === 'success') {
-            return semanticColors.status.success.default;
-        }
-        if (variant === 'error') {
-            return semanticColors.status.error.default;
-        }
-        if (variant === 'warning') {
-            return semanticColors.status.warning.default;
-        }
-        return colors.grey['800'];
+const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePosition = 'left', linkText, showClose = false, icon, onClose, onLinkClick, ...props }) => {
+    const [dismissed, setDismissed] = useState(false);
+    const handleClose = () => {
+        setDismissed(true);
+        onClose?.();
     };
-    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 }))] })) }));
+    if (dismissed) {
+        return null;
+    }
+    const closeIconColor = type === 'filled' ? semanticColors.surfaces.white : intentColors[intent].default;
+    return (jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton$1, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 NeoBanner.displayName = 'NeoBanner';
 
@@ -1527,56 +1619,247 @@ const NeoButtonTabGroup = ({ size = 'medium', exclusive = true, ...props }) => {
 };
 NeoButtonTabGroup.displayName = 'NeoButtonTabGroup';
 
-// Border radius per size (from Figma)
-const borderRadiusConfig = {
-    xs: 2,
-    small: 3,
-    medium: 4,
-};
-// Unchecked: Rounded square outline (20x20 viewBox)
-const UncheckedIcon$1 = ({ size = 'medium' }) => (jsx(SvgIcon, { viewBox: "0 0 20 20", children: jsx("rect", { x: "1", y: "1", width: "18", height: "18", rx: borderRadiusConfig[size], fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }));
-// Checked: Filled rounded square with white checkmark
-// Path scaled from Untitled UI 24x24 (M20 6L9 17L4 12) to 20x20
-const CheckedIcon$1 = ({ size = 'medium' }) => (jsxs(SvgIcon, { viewBox: "0 0 20 20", children: [jsx("rect", { width: "20", height: "20", rx: borderRadiusConfig[size], fill: "currentColor" }), jsx("path", { d: "M15 6L8.5 13L5 9.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] }));
-// Indeterminate: Filled rounded square with white minus
-// Path scaled from Untitled UI 24x24 (M5 12H19) to 20x20
-const IndeterminateIcon = ({ size = 'medium' }) => (jsxs(SvgIcon, { viewBox: "0 0 20 20", children: [jsx("rect", { width: "20", height: "20", rx: borderRadiusConfig[size], fill: "currentColor" }), jsx("path", { d: "M5 10H15", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" })] }));
-const CheckboxContainer = styled('label')(({ disabled }) => ({
-    display: 'inline-flex',
+// ─── Shared ──────────────────────────────────────────────────────────────────
+const activeShadow = `${shadows.card.x}px ${shadows.card.y}px ${shadows.card.blur}px ${shadows.card.spread}px ${shadows.card.shadow}`;
+// ─── Small card styled components ────────────────────────────────────────────
+const SmallStyledCard = styled(MuiCard, {
+    shouldForwardProp: prop => prop !== 'selected' && prop !== 'disabled',
+})(({ theme, selected, disabled }) => ({
+    width: 160,
+    height: 160,
+    padding: theme.spacing(1.5), // 12px
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2), // 16px
+    backgroundColor: semanticColors.surfaces.card,
+    border: `1px solid ${selected ? semanticColors.buttons.primary.default : semanticColors.border.primary}`,
+    borderRadius: borderRadius.xS,
+    boxShadow: selected ? activeShadow : 'none',
+    transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
+    cursor: 'pointer',
+    '&:hover': {
+        borderColor: semanticColors.buttons.primary.default,
+        boxShadow: activeShadow,
+    },
+    '&:focus-visible': {
+        borderColor: semanticColors.buttons.primary.default,
+        ...focusRingStyles,
+    },
+    ...(disabled && {
+        opacity: 0.5,
+        pointerEvents: 'none',
+        cursor: 'not-allowed',
+    }),
+}));
+const SmallCardHeader = styled('div')({
+    display: 'flex',
     alignItems: 'flex-start',
-    gap: spacing.spacing_1,
-    cursor: disabled ? 'not-allowed' : 'pointer',
-    userSelect: 'none',
+    justifyContent: 'space-between',
+    width: '100%',
+});
+const SmallLogoContainer = styled('div')({
+    width: spacing.spacing_6,
+    height: spacing.spacing_6,
+    flexShrink: 0,
+});
+const SmallRecipeCount = styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(typography.fontSize.xxs), // 10px
+    fontWeight: typography.fontWeight.semiBold, // 600
+    lineHeight: 1.2,
+    color: colors.grey[800],
+    whiteSpace: 'nowrap',
 }));
-const LabelContainer$4 = styled('div')(({ size = 'medium' }) => ({
+const SmallCardContent = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: size === 'medium' ? 2 : 0,
+    gap: theme.spacing(2), // 16px
+    width: '100%',
 }));
-const Label$4 = styled('span')(({ theme, size = 'medium' }) => ({
-    fontSize: theme.typography.pxToRem(size === 'xs'
-        ? typography.fontSize.xs
-        : size === 'small'
-            ? typography.fontSize.sm
-            : typography.fontSize.default),
-    fontWeight: typography.fontWeight.medium,
-    lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
-    color: semanticColors.typography.input.default,
+const SmallTitle = styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(typography.fontSize.h6), // 16px
+    fontWeight: typography.fontWeight.semiBold, // 600
+    lineHeight: 1.4,
+    color: colors.grey[800],
+    width: '100%',
 }));
-const HelperText$2 = styled('span')(({ theme, size = 'medium' }) => ({
-    fontSize: theme.typography.pxToRem(size === 'xs'
-        ? typography.fontSize.xs
-        : size === 'small'
-            ? typography.fontSize.sm
-            : typography.fontSize.default),
-    fontWeight: typography.fontWeight.regular,
-    lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
-    color: semanticColors.typography.bodySecondary,
+const SmallDescription = styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(typography.fontSize.xs), // 12px
+    fontWeight: typography.fontWeight.regular, // 400
+    lineHeight: 1.5,
+    color: colors.grey[800],
+    width: '100%',
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
 }));
-// Figma-exact border radius for xs checkbox — no matching design token
-const FIGMA_XS_BORDER_RADIUS = 1;
-const StyledCheckbox = styled(Checkbox, {
-    shouldForwardProp: prop => prop !== 'size',
+const LargeStyledCard = styled(MuiCard, {
+    shouldForwardProp: prop => prop !== 'disabled' && prop !== 'cardTheme',
+})(({ disabled = false, cardTheme = 'light' }) => {
+    const isLight = cardTheme === 'light';
+    const activeBorderColor = isLight
+        ? semanticColors.buttons.primary.default
+        : colors.digitalGreen[300];
+    const defaultBorderColor = isLight
+        ? semanticColors.border.primary
+        : `${semanticColors.border.primary}80`;
+    return {
+        width: 340,
+        height: 162,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        padding: spacing.spacing_2,
+        borderRadius: borderRadius.xS,
+        backgroundColor: isLight ? semanticColors.surfaces.card : colors.grey[800],
+        border: `1px solid ${defaultBorderColor}`,
+        boxShadow: 'none',
+        overflow: 'hidden',
+        cursor: 'pointer',
+        transition: 'border-color 0.2s, box-shadow 0.2s',
+        '&:hover': {
+            borderColor: activeBorderColor,
+            boxShadow: activeShadow,
+        },
+        '&:active': {
+            borderColor: activeBorderColor,
+            boxShadow: activeShadow,
+        },
+        '&:focus-visible': {
+            borderColor: activeBorderColor,
+            ...focusRingStyles,
+        },
+        ...(disabled && {
+            opacity: 0.5,
+            pointerEvents: 'none',
+            cursor: 'not-allowed',
+        }),
+    };
+});
+const LargeTopSection = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.spacing_2,
+    alignItems: 'flex-start',
+    width: '100%',
+    flexShrink: 0,
+});
+const LargeHeaderRow = styled('div')({
+    display: 'flex',
+    gap: spacing.spacing_1,
+    alignItems: 'center',
+    flexShrink: 0,
+});
+const LargeHeaderSlot = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+});
+const LargeHeaderTitle = styled('span', {
+    shouldForwardProp: prop => prop !== 'cardTheme',
+})(({ cardTheme = 'light' }) => ({
+    fontFamily: `${typography.fontFamily.heading}, sans-serif`,
+    fontWeight: typography.fontWeight.semiBold,
+    fontSize: typography.fontSize.h6,
+    lineHeight: 1.4,
+    color: cardTheme === 'light' ? colors.grey[800] : semanticColors.surfaces.white,
+    flexShrink: 0,
+}));
+const LargeDescription = styled('p', {
+    shouldForwardProp: prop => prop !== 'cardTheme',
+})(({ cardTheme = 'light' }) => ({
+    fontFamily: `${typography.fontFamily.body}, sans-serif`,
+    fontWeight: typography.fontWeight.regular,
+    fontSize: typography.fontSize.xs,
+    lineHeight: 1.5,
+    color: cardTheme === 'light' ? colors.grey[800] : semanticColors.surfaces.white,
+    margin: 0,
+    minWidth: '100%',
+    wordWrap: 'break-word',
+}));
+const LargeButtonsRow = styled('div')({
+    display: 'flex',
+    gap: spacing.spacing_3,
+    alignItems: 'flex-start',
+    flexShrink: 0,
+});
+// ─── Internal implementations ────────────────────────────────────────────────
+const SmallCardImpl = ({ logo, recipeCount, title, description, selected = false, disabled = false, onClick, ...props }) => {
+    return (jsxs(SmallStyledCard, { selected: selected, disabled: disabled, onClick: disabled ? undefined : onClick, tabIndex: disabled ? -1 : 0, role: "button", "aria-disabled": disabled, "aria-pressed": selected, ...props, children: [jsxs(SmallCardHeader, { children: [jsx(SmallLogoContainer, { children: logo }), jsx(SmallRecipeCount, { children: recipeCount })] }), jsxs(SmallCardContent, { children: [jsx(SmallTitle, { children: title }), jsx(SmallDescription, { children: description })] })] }));
+};
+const LargeCardImpl = ({ disabled = false, cardTheme = 'light', showIcon = true, showGel = true, showButtons = true, icon, gel, title, children, actions, onClick, ...props }) => {
+    return (jsxs(LargeStyledCard, { disabled: disabled, cardTheme: cardTheme, onClick: disabled ? undefined : onClick, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, ...props, children: [jsxs(LargeTopSection, { children: [jsxs(LargeHeaderRow, { children: [showIcon && icon && jsx(LargeHeaderSlot, { children: icon }), showGel && gel && jsx(LargeHeaderSlot, { children: gel }), title && jsx(LargeHeaderTitle, { cardTheme: cardTheme, children: title })] }), children && jsx(LargeDescription, { cardTheme: cardTheme, children: children })] }), showButtons && actions && jsx(LargeButtonsRow, { children: actions })] }));
+};
+// ─── Exported component ──────────────────────────────────────────────────────
+const NeoCard = (props) => {
+    if (props.size === 'small') {
+        const { size: _, ...rest } = props;
+        return jsx(SmallCardImpl, { ...rest });
+    }
+    const { size: _, ...rest } = props;
+    return jsx(LargeCardImpl, { ...rest });
+};
+NeoCard.displayName = 'NeoCard';
+
+// Border radius per size (from Figma)
+const borderRadiusConfig = {
+    xs: 2,
+    small: 3,
+    medium: 4,
+};
+// Unchecked: Rounded square outline (20x20 viewBox)
+const UncheckedIcon$1 = ({ size = 'medium' }) => (jsx(SvgIcon, { viewBox: "0 0 20 20", children: jsx("rect", { x: "1", y: "1", width: "18", height: "18", rx: borderRadiusConfig[size], fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }));
+// Checked: Filled rounded square with white checkmark
+// Path scaled from Untitled UI 24x24 (M20 6L9 17L4 12) to 20x20
+const CheckedIcon$1 = ({ size = 'medium' }) => (jsxs(SvgIcon, { viewBox: "0 0 20 20", children: [jsx("rect", { width: "20", height: "20", rx: borderRadiusConfig[size], fill: "currentColor" }), jsx("path", { d: "M15 6L8.5 13L5 9.5", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none" })] }));
+// Indeterminate: Filled rounded square with white minus
+// Path scaled from Untitled UI 24x24 (M5 12H19) to 20x20
+const IndeterminateIcon = ({ size = 'medium' }) => (jsxs(SvgIcon, { viewBox: "0 0 20 20", children: [jsx("rect", { width: "20", height: "20", rx: borderRadiusConfig[size], fill: "currentColor" }), jsx("path", { d: "M5 10H15", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" })] }));
+const CheckboxContainer = styled('label')(({ disabled }) => ({
+    display: 'inline-flex',
+    alignItems: 'flex-start',
+    gap: spacing.spacing_1,
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    userSelect: 'none',
+}));
+const LabelContainer$4 = styled('div')(({ size = 'medium' }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: size === 'medium' ? 2 : 0,
+}));
+const Label$4 = styled('span')(({ theme, size = 'medium' }) => ({
+    fontSize: theme.typography.pxToRem(size === 'xs'
+        ? typography.fontSize.xs
+        : size === 'small'
+            ? typography.fontSize.sm
+            : typography.fontSize.default),
+    fontWeight: typography.fontWeight.medium,
+    lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
+    color: semanticColors.typography.input.default,
+}));
+const HelperText$2 = styled('span')(({ theme, size = 'medium' }) => ({
+    fontSize: theme.typography.pxToRem(size === 'xs'
+        ? typography.fontSize.xs
+        : size === 'small'
+            ? typography.fontSize.sm
+            : typography.fontSize.default),
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
+    color: semanticColors.typography.bodySecondary,
+}));
+// Figma-exact border radius for xs checkbox — no matching design token
+const FIGMA_XS_BORDER_RADIUS = 1;
+const StyledCheckbox = styled(Checkbox, {
+    shouldForwardProp: prop => prop !== 'size',
 })(({ size = 'medium' }) => {
     // Size configurations
     const sizeConfig = {
@@ -1600,6 +1883,7 @@ const StyledCheckbox = styled(Checkbox, {
         padding: 0,
         marginTop: size === 'xs' ? 3 : 2,
         color: semanticColors.border.primary,
+        borderRadius: config.borderRadius,
         flexShrink: 0,
         // Root element
         [`&.${checkboxClasses.root}`]: {
@@ -1650,7 +1934,7 @@ const StyledCheckbox = styled(Checkbox, {
 /**
  * NeoCheckbox - Checkbox component based on MUI Checkbox
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-39311
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11487-81
  *
  * Figma Props Mapping:
  * - Checked (True|False) → checked prop
@@ -1806,9 +2090,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 (filled|outlined)
+ * - Content (Multi|Inline) → size prop + auto-detected multiline
+ * - Show icon → endIcon (ReactNode, unmappable: boolean vs ReactNode)
  * - Text content → children prop
  */
 const NeoCodeSnippet = ({ variant = 'outlined', size = 'small', endIcon, children, ...props }) => {
@@ -2676,9 +2960,9 @@ const StyledChip$1 = styled(Chip)(({ theme, size, variant, color }) => ({
  * - state (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 }) => {
+function NeoTag({ size = 'small', variant = 'outlined', ...props }) {
     return jsx(StyledChip$1, { size: size, variant: variant, ...props });
-};
+}
 NeoTag.displayName = 'NeoTag';
 
 /**
@@ -3638,6 +3922,84 @@ const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...prop
 };
 NeoDot.displayName = 'NeoDot';
 
+const StyledRoot$1 = styled(Paper)({
+    padding: spacing.spacing_2,
+    borderRadius: borderRadius.s,
+    backgroundColor: semanticColors.surfaces.snackbarDarkMode,
+    color: colors.grey['800'],
+    border: `1px solid ${semanticColors.border.primary}`,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.spacing_3,
+});
+const Title = styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    fontWeight: typography.fontWeight.semiBold,
+    lineHeight: 1.4,
+    color: colors.grey['700'],
+}));
+const FileName = styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    fontWeight: typography.fontWeight.medium,
+    lineHeight: 1.5,
+    color: colors.grey['800'],
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    minWidth: 0,
+}));
+const ProgressLabel$1 = styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    fontWeight: typography.fontWeight.medium,
+    lineHeight: 1.5,
+    color: colors.grey['800'],
+    flexShrink: 0,
+}));
+const StyledLinearProgress$1 = styled(LinearProgress)({
+    width: '100%',
+    height: spacing.spacing_1,
+    borderRadius: borderRadius.s,
+    backgroundColor: colors.grey['200'],
+    [`& .${linearProgressClasses.bar}`]: {
+        backgroundColor: semanticColors.buttons.primary.default,
+        borderRadius: `${borderRadius.xS}px 0 0 ${borderRadius.xS}px`,
+    },
+});
+const ActionButton = styled(IconButton)({
+    padding: 0,
+    width: spacing.spacing_2,
+    height: spacing.spacing_2,
+    color: colors.grey['500'],
+    '&:hover': {
+        backgroundColor: 'transparent',
+    },
+});
+/**
+ * NeoDownloadToast - Standalone download progress toast notification
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=3377-26954
+ */
+const NeoDownloadToast = ({ title, fileName, progress, showClose = true, showPause = true, onClose, onPause, actions, ...props }) => {
+    const renderActions = () => {
+        if (actions)
+            return actions;
+        const hasActions = showPause || showClose;
+        if (!hasActions)
+            return null;
+        return (jsxs(Stack, { direction: "row", gap: `${spacing.spacing_2}px`, sx: { alignItems: 'center' }, children: [showPause && (jsx(ActionButton, { size: "small", onClick: onPause, "aria-label": "Pause download", children: jsx(Minus, { size: spacing.spacing_2 }) })), showClose && (jsx(ActionButton, { size: "small", onClick: onClose, "aria-label": "Close", children: jsx(X, { size: spacing.spacing_2 }) }))] }));
+    };
+    return (jsxs(StyledRoot$1, { elevation: 0, role: "status", ...props, children: [jsxs(Stack, { direction: "row", sx: {
+                    alignItems: 'flex-start',
+                    justifyContent: 'space-between',
+                    width: '100%',
+                    gap: `${spacing.spacing_4}px`,
+                }, children: [title && jsx(Title, { children: title }), renderActions()] }), jsxs(Stack, { gap: `${spacing.spacing_1}px`, sx: { width: '100%' }, children: [jsxs(Stack, { direction: "row", gap: `${spacing.spacing_2}px`, sx: { alignItems: 'flex-end', justifyContent: 'space-between', width: '100%' }, children: [fileName && jsx(FileName, { children: fileName }), progress !== undefined && jsxs(ProgressLabel$1, { children: [progress, "%"] })] }), jsx(StyledLinearProgress$1, { variant: "determinate", value: progress ?? 0 })] })] }));
+};
+NeoDownloadToast.displayName = 'NeoDownloadToast';
+
 const StyledMenu = styled(Menu)(({ theme }) => ({
     [`& .${paperClasses.root}`]: {
         backgroundColor: semanticColors.surfaces.white,
@@ -3822,11 +4184,11 @@ const StyledFooter = styled(Box, {
     '&::before': {
         content: showShadow ? '""' : 'none',
         position: 'absolute',
-        top: `-${shadows.neutralRegular.blur}px`, // -4px
+        top: `-${shadows.neutral.regular.blur}px`, // -4px
         left: 0,
         right: 0,
-        height: `${shadows.neutralRegular.blur}px`, // 4px
-        background: `linear-gradient(to top, ${shadows.neutralRegular.shadow}, transparent)`, // rgba(31, 41, 55, 0.1)
+        height: `${shadows.neutral.regular.blur}px`, // 4px
+        background: `linear-gradient(to top, ${shadows.neutral.regular.shadow}, transparent)`, // rgba(31, 41, 55, 0.1)
         pointerEvents: 'none',
     },
     [theme.breakpoints.down('sm')]: {
@@ -4245,7 +4607,7 @@ const InfoIconWrapper = styled('span')({
 });
 const StyledInputBase = styled(InputBase, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'destructive',
-})(({ theme, size = 'medium', destructive, startAdornment }) => {
+})(({ theme, size = 'medium', destructive, startAdornment, multiline }) => {
     const sizeConfig = {
         small: {
             height: spacing.spacing_5,
@@ -4262,7 +4624,7 @@ const StyledInputBase = styled(InputBase, {
     };
     const sizeStyles = sizeConfig[size];
     return {
-        height: sizeStyles.height,
+        height: multiline ? 'auto' : sizeStyles.height,
         fontSize: sizeStyles.fontSize,
         borderRadius: sizeStyles.borderRadius,
         backgroundColor: semanticColors.input.background,
@@ -4732,271 +5094,36 @@ const NeoListItemButton = ({ children, selected = false, disabled = false, ...pr
 NeoListItemButton.displayName = 'NeoListItemButton';
 
 /**
- * Card box-shadow using Neo design tokens for hover and selected states
- */
-const activeShadow$1 = `${shadows.card.x}px ${shadows.card.y}px ${shadows.card.blur}px ${shadows.card.spread}px ${shadows.card.shadow}`;
-/**
- * Styled Card component with Neo design tokens
- */
-const StyledCard = styled(MuiCard, {
-    shouldForwardProp: prop => prop !== 'selected' && prop !== 'disabled',
-})(({ theme, selected, disabled }) => ({
-    width: 160,
-    height: 160,
-    padding: theme.spacing(1.5), // 12px
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2), // 16px
-    backgroundColor: semanticColors.surfaces.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.buttons.primary.default,
-        boxShadow: activeShadow$1,
-    },
-    '&:focus-visible': {
-        borderColor: semanticColors.buttons.primary.default,
-        ...focusRingStyles,
-    },
-    ...(disabled && {
-        opacity: 0.5,
-        pointerEvents: 'none',
-        cursor: 'not-allowed',
-    }),
-}));
-/**
- * Header section containing logo and recipe count
- */
-const CardHeader = styled('div')({
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    width: '100%',
-});
-/**
- * Logo container
- */
-const LogoContainer = styled('div')({
-    width: spacing.spacing_6,
-    height: spacing.spacing_6,
-    flexShrink: 0,
-});
-/**
- * Recipe count badge
- */
-const RecipeCount = styled('p')(({ theme }) => ({
-    margin: 0,
-    fontSize: theme.typography.pxToRem(typography.fontSize.xxs), // 10px
-    fontWeight: typography.fontWeight.semiBold, // 600
-    lineHeight: 1.2,
-    color: colors.grey[800],
-    whiteSpace: 'nowrap',
-}));
-/**
- * Content section containing title and description
- */
-const CardContent = styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2), // 16px
-    width: '100%',
-}));
-/**
- * Title text
- */
-const Title = styled('p')(({ theme }) => ({
-    margin: 0,
-    fontSize: theme.typography.pxToRem(typography.fontSize.h6), // 16px
-    fontWeight: typography.fontWeight.semiBold, // 600
-    lineHeight: 1.4,
-    color: colors.grey[800],
-    width: '100%',
-}));
-/**
- * Description text
- */
-const Description$1 = styled('p')(({ theme }) => ({
-    margin: 0,
-    fontSize: theme.typography.pxToRem(typography.fontSize.xs), // 12px
-    fontWeight: typography.fontWeight.regular, // 400
-    lineHeight: 1.5,
-    color: colors.grey[800],
-    width: '100%',
-    display: '-webkit-box',
-    WebkitLineClamp: 2,
-    WebkitBoxOrient: 'vertical',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-}));
-/**
- * NeoMarketplaceCard - Selectable card component for marketplace items
- *
- * A fixed-size card (160x160px) displaying a logo, recipe count, title, and description.
- * Supports selected (active), disabled, and focused states.
+ * @deprecated Use `NeoCard` with `size="small"` instead.
  *
  * @example
  * ```tsx
- * <NeoMarketplaceCard
- *   logo={<JavaLogo />}
- *   recipeCount="1,260 recipes"
- *   title="Java"
- *   description="Basic building blocks for transforming Java..."
- *   selected={false}
- *   disabled={false}
- *   onClick={() => console.log('clicked')}
- * />
- * ```
+ * // Before
+ * <NeoMarketplaceCard logo={...} title="Java" ... />
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4286-1635&t=Bo58EpFmg6ILJtmv-11
- *
- * Figma Props Mapping:
- * - State="Active" → selected={true}
- * - State="Disabled" → disabled={true}
- * - State="Focused" → CSS :focus-visible state (not a prop)
- * - State="Hover" → CSS :hover state (not a prop)
- * - State="Default" → Base state (no props)
- *
- * Design Tokens Used:
- * - semanticColors.surfaces.card (#FFFFFF) - Default card background
- * - semanticColors.status.info.light (#f2f3ff) - Active/focused card background
- * - 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
- * - typography.fontSize.xxs (10px) - Recipe count
- * - typography.fontSize.xs (12px) - Description
- * - typography.fontSize.h6 (16px) - Title
- * - typography.fontWeight.semiBold (600) - Title and recipe count
- * - typography.fontWeight.regular (400) - Description
- */
-const NeoMarketplaceCard = ({ logo, recipeCount, title, description, selected = false, disabled = false, onClick, ...props }) => {
-    return (jsxs(StyledCard, { selected: selected, disabled: disabled, onClick: disabled ? undefined : onClick, tabIndex: disabled ? -1 : 0, role: "button", "aria-disabled": disabled, "aria-pressed": selected, ...props, children: [jsxs(CardHeader, { children: [jsx(LogoContainer, { children: logo }), jsx(RecipeCount, { children: recipeCount })] }), jsxs(CardContent, { children: [jsx(Title, { children: title }), jsx(Description$1, { children: description })] })] }));
+ * // After
+ * <NeoCard size="small" logo={...} title="Java" ... />
+ * ```
+ */
+const NeoMarketplaceCard = (props) => {
+    return jsx(NeoCard, { size: "small", ...props });
 };
 NeoMarketplaceCard.displayName = 'NeoMarketplaceCard';
 
-const activeShadow = `${shadows.card.x}px ${shadows.card.y}px ${shadows.card.blur}px ${shadows.card.spread}px ${shadows.card.shadow}`;
-const StyledLargeCard = styled(MuiCard, {
-    shouldForwardProp: prop => prop !== 'cardState' && prop !== 'cardTheme',
-})(({ cardState = 'default', cardTheme = 'light' }) => {
-    const isLight = cardTheme === 'light';
-    const isActive = cardState === 'active';
-    const isDisabled = cardState === 'disabled';
-    const isFocused = cardState === 'focused';
-    const activeBorderColor = isLight
-        ? semanticColors.buttons.primary.default
-        : colors.digitalGreen[300];
-    const defaultBorderColor = isLight
-        ? semanticColors.border.primary
-        : `${semanticColors.border.primary}80`;
-    return {
-        width: 340,
-        height: 162,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-        padding: spacing.spacing_2,
-        borderRadius: borderRadius.xS,
-        backgroundColor: isLight ? semanticColors.surfaces.card : colors.grey[800],
-        border: `1px solid ${isActive || isFocused ? activeBorderColor : defaultBorderColor}`,
-        boxShadow: isActive ? activeShadow : 'none',
-        overflow: 'hidden',
-        ...(isFocused && focusRingStyles),
-        '&:focus-visible': {
-            borderColor: isLight ? semanticColors.buttons.primary.default : colors.digitalGreen[300],
-            ...focusRingStyles,
-        },
-        ...(isDisabled && {
-            opacity: 0.5,
-            pointerEvents: 'none',
-            cursor: 'not-allowed',
-        }),
-    };
-});
-const TopSection = styled('div')({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: spacing.spacing_2,
-    alignItems: 'flex-start',
-    width: '100%',
-    flexShrink: 0,
-});
-const HeaderRow = styled('div')({
-    display: 'flex',
-    gap: spacing.spacing_1,
-    alignItems: 'center',
-    flexShrink: 0,
-});
-const HeaderSlot = styled('div')({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 20,
-    height: 20,
-    flexShrink: 0,
-});
-const HeaderTitle = styled('span', {
-    shouldForwardProp: prop => prop !== 'cardTheme',
-})(({ cardTheme = 'light' }) => ({
-    fontFamily: `${typography.fontFamily.heading}, sans-serif`,
-    fontWeight: typography.fontWeight.semiBold,
-    fontSize: typography.fontSize.h6,
-    lineHeight: 1.4,
-    color: cardTheme === 'light' ? colors.grey[800] : semanticColors.surfaces.white,
-    flexShrink: 0,
-}));
-const Description = styled('p', {
-    shouldForwardProp: prop => prop !== 'cardTheme',
-})(({ cardTheme = 'light' }) => ({
-    fontFamily: `${typography.fontFamily.body}, sans-serif`,
-    fontWeight: typography.fontWeight.regular,
-    fontSize: typography.fontSize.xs,
-    lineHeight: 1.5,
-    color: cardTheme === 'light' ? colors.grey[800] : semanticColors.surfaces.white,
-    margin: 0,
-    minWidth: '100%',
-    wordWrap: 'break-word',
-}));
-const ButtonsRow = styled('div')({
-    display: 'flex',
-    gap: spacing.spacing_3,
-    alignItems: 'flex-start',
-    flexShrink: 0,
-});
 /**
- * NeoMarketplaceLargeCard - A large marketplace card with state and theme variants
- *
- * A 340x162px card with optional icon, gel brand icon, title, description, and action buttons.
- * Icon, gel, and title display inline in a header row.
- * Supports 4 states (default, active, disabled, focused) and 2 themes (light, dark).
+ * @deprecated Use `NeoCard` with `size="large"` instead.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=5925-11
- *
- * Figma Props Mapping:
- * - State → state (Default/Active/Disabled/Focused)
- * - Theme → cardTheme (Dark/Light)
- * - Show Icon → showIcon
- * - Show Gel → showGel
- * - Show Buttons → showButtons
+ * @example
+ * ```tsx
+ * // Before
+ * <NeoMarketplaceLargeCard cardTheme="light" ... />
  *
- * Design Tokens Used:
- * - semanticColors.surfaces.card (#ffffff) - Light theme background
- * - colors.grey[800] (#1f2937) - Dark theme background
- * - 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
- * - shadows.card - Active state shadow
- */
-const NeoMarketplaceLargeCard = ({ state = 'default', cardTheme = 'light', showIcon = true, showGel = true, showButtons = true, icon, gel, title, children, actions, onClick, ...props }) => {
-    const isDisabled = state === 'disabled';
-    return (jsxs(StyledLargeCard, { cardState: state, cardTheme: cardTheme, onClick: isDisabled ? undefined : onClick, tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, ...props, children: [jsxs(TopSection, { children: [jsxs(HeaderRow, { children: [showIcon && icon && jsx(HeaderSlot, { children: icon }), showGel && gel && jsx(HeaderSlot, { children: gel }), title && jsx(HeaderTitle, { cardTheme: cardTheme, children: title })] }), children && jsx(Description, { cardTheme: cardTheme, children: children })] }), showButtons && actions && jsx(ButtonsRow, { children: actions })] }));
+ * // After
+ * <NeoCard size="large" cardTheme="light" ... />
+ * ```
+ */
+const NeoMarketplaceLargeCard = (props) => {
+    return jsx(NeoCard, { size: "large", ...props });
 };
 NeoMarketplaceLargeCard.displayName = 'NeoMarketplaceLargeCard';
 
@@ -5223,15 +5350,14 @@ const StyledRoot = styled(ButtonBase, {
 })(({ selected }) => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: spacing.spacing_1_4, // 2px
+    gap: spacing.spacing_1_2, // 4px
     alignItems: 'center',
     justifyContent: 'center',
     paddingTop: spacing.spacing_1, // 8px
     paddingBottom: spacing.spacing_1, // 8px
     paddingLeft: spacing.spacing_1_2, // 4px
     paddingRight: spacing.spacing_1_2, // 4px
-    borderRadius: borderRadius.xS, // 4px
-    width: 95,
+    borderRadius: borderRadius.s, // 8px
     cursor: 'pointer',
     textDecoration: 'none',
     '&:hover .neo-nav-icon-padding': {
@@ -5277,7 +5403,7 @@ const IconPadding = styled('span')({
     display: 'flex',
     alignItems: 'center',
     padding: spacing.spacing_1, // 8px
-    borderRadius: spacing.spacing_1, // 8px
+    borderRadius: borderRadius.s, // 8px
     border: '1px solid transparent',
     transition: 'background-color 150ms, border-color 150ms',
 });
@@ -5311,9 +5437,9 @@ const TagPill = styled('span')(({ theme }) => ({
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
  */
-const NeoNavigationItem = ({ icon, label, selected = false, tag, children, ...props }) => {
+function NeoNavigationItem({ icon, label, selected = false, tag, children, ...props }) {
     return (jsxs(StyledRoot, { selected: selected, disableRipple: true, ...props, children: [jsx(IconPadding, { className: "neo-nav-icon-padding", children: icon }), label && jsx(Label$2, { className: "neo-nav-label", children: label }), tag && jsx(TagPill, { children: tag }), children] }));
-};
+}
 NeoNavigationItem.displayName = 'NeoNavigationItem';
 
 /**
@@ -5537,7 +5663,7 @@ function NeoPaginatedGrid({ slots, pageSizeOptions, slotProps: userSlotProps, ..
 }
 NeoPaginatedGrid.displayName = 'NeoPaginatedGrid';
 
-const StyledLinearProgress$1 = styled(LinearProgress, {
+const StyledLinearProgress = styled(LinearProgress, {
     shouldForwardProp: prop => prop !== 'labelPosition',
 })(() => ({
     height: 8,
@@ -5582,7 +5708,7 @@ const ProgressWrapper = styled('div')(({ labelPosition }) => ({
         flexDirection: 'row',
     }),
 }));
-const ProgressLabel$1 = styled(Typography)(({ theme }) => ({
+const ProgressLabel = styled(Typography)(({ theme }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
     fontWeight: typography.fontWeight.medium,
     color: colors.grey[800],
@@ -5611,7 +5737,7 @@ const ProgressBarContainer = styled('div')(({ labelPosition }) => ({
 const NeoProgressbar = ({ value = 0, labelPosition = 'none', variant = 'default', labelText, ...props }) => {
     const showLabel = labelPosition !== 'none';
     const displayLabel = labelText || (variant === 'cancelled' ? 'Canceled' : `${Math.round(value)}%`);
-    return (jsxs(ProgressWrapper, { labelPosition: labelPosition, children: [jsx(ProgressBarContainer, { labelPosition: labelPosition, children: jsx(StyledLinearProgress$1, { variant: "determinate", value: variant === 'cancelled' ? 100 : value, "data-variant": variant, labelPosition: labelPosition, ...props }) }), showLabel && jsx(ProgressLabel$1, { children: displayLabel })] }));
+    return (jsxs(ProgressWrapper, { labelPosition: labelPosition, children: [jsx(ProgressBarContainer, { labelPosition: labelPosition, children: jsx(StyledLinearProgress, { variant: "determinate", value: variant === 'cancelled' ? 100 : value, "data-variant": variant, labelPosition: labelPosition, ...props }) }), showLabel && jsx(ProgressLabel, { children: displayLabel })] }));
 };
 NeoProgressbar.displayName = 'NeoProgressbar';
 
@@ -5713,17 +5839,19 @@ const NeoQuickFilter = ({ placeholder = 'Search...', onKeyDown, autoFocus = fals
 NeoQuickFilter.displayName = 'NeoQuickFilter';
 
 // Custom radio icons to match Figma design
-const UncheckedIcon = ({ size }) => {
+const UncheckedIcon = ({ size, disabled }) => {
     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.primary, 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: disabled ? semanticColors.buttons.primary.disabled : 'transparent' })] }));
 };
-const CheckedIcon = ({ size }) => {
+const CheckedIcon = ({ size, disabled }) => {
     const dimensions = size === 'small' ? 16 : 20;
     const radius = size === 'small' ? 8 : 10;
     const inset = size === 'small' ? 0.3125 : 0.3; // 31.25% or 30%
     const innerRadius = radius * (1 - 2 * inset);
-    return (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Checked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, fill: semanticColors.buttons.primary.default, stroke: semanticColors.buttons.primary.default, strokeWidth: "1" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: innerRadius, fill: semanticColors.surfaces.white })] }));
+    return (jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsx("title", { children: "Checked radio button" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, fill: disabled
+                    ? semanticColors.buttons.primary.disabled
+                    : semanticColors.buttons.primary.default, stroke: disabled ? semanticColors.border.primary : semanticColors.buttons.primary.default, strokeWidth: "1" }), jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: innerRadius, fill: disabled ? semanticColors.icons.disabled : semanticColors.surfaces.white })] }));
 };
 const RadioContainer = styled('label')(({ disabled }) => ({
     display: 'inline-flex',
@@ -5768,6 +5896,10 @@ const StyledRadio = styled(Radio, {
         height: dimensions,
         flexShrink: 0,
         borderRadius: radius,
+        color: semanticColors.border.primary,
+        [`&.${radioClasses.checked}`]: {
+            color: semanticColors.buttons.primary.default,
+        },
         '&:hover': {
             backgroundColor: 'transparent',
         },
@@ -5785,9 +5917,12 @@ const StyledRadio = styled(Radio, {
                 backgroundColor: 'transparent',
             },
         },
-        // Disabled state
+        // Disabled state — icons handle their own disabled colors
         [`&.${radioClasses.disabled}`]: {
-            opacity: 0.5,
+            color: semanticColors.border.primary,
+            [`&.${radioClasses.checked}`]: {
+                color: semanticColors.border.primary,
+            },
         },
     };
 });
@@ -5795,7 +5930,6 @@ const StyledRadio = styled(Radio, {
  * NeoRadio - Radio button component based on MUI Radio
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-40039
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-40150
  *
  * Figma Props Mapping:
  * - Checked (True|False) → checked prop
@@ -5835,9 +5969,9 @@ const StyledRadio = styled(Radio, {
  * </RadioGroup>
  */
 const NeoRadio = ({ size = 'medium', label, helperText, disabled, ...props }) => {
-    // Custom icons based on size
-    const uncheckedIcon = jsx(UncheckedIcon, { size: size });
-    const checkedIcon = jsx(CheckedIcon, { size: size });
+    // Custom icons based on size and disabled state
+    const uncheckedIcon = jsx(UncheckedIcon, { size: size, disabled: disabled });
+    const checkedIcon = jsx(CheckedIcon, { size: size, disabled: disabled });
     // If no label, return just the radio button
     if (!label && !helperText) {
         return (jsx(StyledRadio, { size: size, disabled: disabled, icon: uncheckedIcon, checkedIcon: checkedIcon, ...props }));
@@ -5961,127 +6095,6 @@ const NeoSkeleton = ({ colorTheme = 'light', position = 'start', ...props }) =>
 };
 NeoSkeleton.displayName = 'NeoSkeleton';
 
-/**
- * Styled Alert component with custom severity and variant styling
- * Uses Custom Variants Pattern to add 'neutral' and 'info' severities
- */
-const StyledAlert$1 = styled(Alert, {
-    shouldForwardProp: prop => prop !== 'severity' && prop !== 'variant',
-})(({ theme, severity = 'success', variant = 'outlined' }) => {
-    // Color mapping for different severities
-    const colorMap = {
-        success: {
-            light: semanticColors.status.success.light,
-            medium: semanticColors.status.success.default,
-        },
-        error: {
-            light: semanticColors.status.error.light,
-            medium: semanticColors.status.error.default,
-        },
-        neutral: {
-            light: semanticColors.status.neutral.light,
-            medium: semanticColors.status.neutral.default,
-        },
-        info: {
-            light: semanticColors.status.info.light,
-            medium: semanticColors.status.info.default,
-        },
-    };
-    const severityColors = colorMap[severity];
-    // Variant-specific styles based on Phase 1.1 analysis
-    const variantStyles = (() => {
-        if (variant === 'filled') {
-            // Dark mode: solid background with white text
-            return {
-                backgroundColor: severityColors.medium,
-                border: 'none',
-                color: semanticColors.typography.tooltip,
-                padding: theme.spacing(0.75, 3),
-                boxShadow: `0px 1px 3px ${semanticColors.surfaces.shadowNeutral}1a`, // 1a = 10% opacity
-                [`& .${alertClasses.icon}`]: {
-                    color: semanticColors.typography.tooltip,
-                },
-                [`& .${alertClasses.message}`]: {
-                    color: semanticColors.typography.tooltip,
-                },
-            };
-        }
-        // Light mode: light background with border
-        return {
-            backgroundColor: severityColors.light,
-            border: `1px solid ${severityColors.medium}`,
-            color: colors.grey[800],
-            padding: theme.spacing(0.125, 2),
-            [`& .${alertClasses.icon}`]: {
-                color: severityColors.medium,
-            },
-            [`& .${alertClasses.message}`]: {
-                color: colors.grey[800],
-            },
-        };
-    })();
-    return {
-        height: spacing.spacing_8,
-        width: '100%',
-        borderRadius: borderRadius.xS,
-        alignItems: 'center',
-        fontFamily: typography.fontFamily.body,
-        fontSize: theme.typography.pxToRem(typography.fontSize.default),
-        fontWeight: typography.fontWeight.medium,
-        lineHeight: 1.5,
-        ...variantStyles,
-        // Supporting text styling
-        [`& .${alertClasses.message} > *:not(:first-child)`]: {
-            fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-            fontWeight: typography.fontWeight.regular,
-            color: variant === 'filled'
-                ? semanticColors.typography.tooltip
-                : semanticColors.typography.bodySecondary,
-            lineHeight: 1.4,
-            marginTop: theme.spacing(0.25),
-        },
-    };
-});
-/**
- * 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).
- *
- * @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')
- *
- * Design Tokens Used:
- * - status.success.light, status.success.default
- * - status.error.light, status.error.default
- * - status.neutral.light, status.neutral.default
- * - status.info.light, status.info.default
- * - typography.tooltip, typography.bodySecondary
- * - grey[800]
- * - fontSize.default, fontSize.sm
- * - fontWeight.medium, fontWeight.regular
- * - fontFamily.body
- * - surfaces.shadowNeutral
- */
-const NeoStatusBanner = ({ severity = 'success', variant = 'outlined', icon, children, ...props }) => {
-    // Icon mapping for different severities
-    const iconMap = {
-        success: jsx(CircleCheck, { size: 24 }),
-        error: jsx(CircleAlert, { size: 24 }),
-        neutral: jsx(WifiOff, { size: 24 }),
-        info: jsx(Info, { size: 24 }),
-    };
-    const defaultIcon = iconMap[severity];
-    // Type assertion needed: severity and variant are custom props filtered by shouldForwardProp
-    // biome-ignore lint/suspicious/noExplicitAny: Custom props pattern requires any cast
-    const StyledAlertAny = StyledAlert$1;
-    return (jsx(StyledAlertAny, { ...props, severity: severity, variant: variant, icon: icon ?? defaultIcon, children: children }));
-};
-NeoStatusBanner.displayName = 'NeoStatusBanner';
-
 /**
  * NeoTabs - Tabs container component based on MUI Tabs
  *
@@ -6116,7 +6129,20 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
         color: semanticColors.typography.tab.active,
         fontWeight: typography.fontWeight.semiBold,
     },
+    '&:hover': {
+        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+        [`&.${tabClasses.selected}::after`]: {
+            content: '""',
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: 2,
+            backgroundColor: semanticColors.buttons.primary.hover,
+        },
+    },
     [`&.${buttonBaseClasses.focusVisible}`]: {
+        color: semanticColors.typography.tab.active,
         outline: `2px solid ${semanticColors.border.focus}`,
         outlineOffset: -2,
     },
@@ -6124,6 +6150,21 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
         color: semanticColors.typography.button.disabled,
         cursor: 'not-allowed',
         pointerEvents: 'auto',
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
+        [`&.${tabClasses.selected}`]: {
+            color: semanticColors.typography.button.disabled,
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: 2,
+                backgroundColor: semanticColors.buttons.tertiary.disabled,
+            },
+        },
     },
 }));
 const TabLabelContainer = styled('span')(({ theme }) => ({
@@ -6138,10 +6179,7 @@ const TabLabelContainer = styled('span')(({ theme }) => ({
  *
  * 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)
+ * - Show tag → count prop (renders NeoTag)
  * - Text label → label prop
  */
 const NeoTab = ({ label, count, ...props }) => {
@@ -6152,7 +6190,7 @@ 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',
+    shouldForwardProp: prop => prop !== 'variant',
 })(({ theme, variant = 'default' }) => {
     // Base styles
     const baseStyles = {
@@ -6209,11 +6247,6 @@ const StyledAlert = styled(Alert, {
             color: semanticColors.status.info.dark,
             border: `1px solid ${semanticColors.status.info.default}`,
         },
-        download: {
-            backgroundColor: semanticColors.surfaces.snackbarDarkMode,
-            color: colors.grey['800'],
-            border: `1px solid ${semanticColors.border.primary}`,
-        },
     };
     return {
         ...baseStyles,
@@ -6228,7 +6261,6 @@ const ToastTitle = styled('p')(({ theme, variant = 'default' }) => {
         error: semanticColors.status.error.dark,
         success: semanticColors.status.success.dark,
         info: semanticColors.status.info.dark,
-        download: colors.grey['700'],
     };
     return {
         margin: 0,
@@ -6246,7 +6278,6 @@ const ToastMessage = styled('p')(({ theme, variant = 'default' }) => {
         error: semanticColors.status.error.dark,
         success: semanticColors.status.success.dark,
         info: semanticColors.status.info.dark,
-        download: colors.grey['800'],
     };
     return {
         margin: 0,
@@ -6284,7 +6315,7 @@ const ToastButton = styled(Button, {
         if (toastVariant === 'info') {
             return semanticColors.status.info.dark;
         }
-        // default and download variants use icon placeholder color
+        // default variant uses icon placeholder color
         return semanticColors.icons.placeholder;
     };
     return {
@@ -6301,68 +6332,20 @@ const ToastButton = styled(Button, {
         },
     };
 });
-const ProgressSection = styled(Stack)({
-    gap: spacing.spacing_1,
-    width: '100%',
-});
-const FileName = styled('p')(({ theme }) => ({
-    margin: 0,
-    fontSize: theme.typography.pxToRem(typography.fontSize.xs),
-    fontWeight: typography.fontWeight.medium,
-    lineHeight: 1.5,
-    color: colors.grey['800'],
-}));
-const ProgressLabel = styled('p')(({ theme }) => ({
-    margin: 0,
-    fontSize: theme.typography.pxToRem(typography.fontSize.xs),
-    fontWeight: typography.fontWeight.medium,
-    lineHeight: 1.5,
-    color: colors.grey['800'],
-}));
-const StyledLinearProgress = styled(LinearProgress)({
-    width: '100%',
-    height: spacing.spacing_2,
-    borderRadius: borderRadius.s,
-    backgroundColor: colors.grey['200'],
-    [`& .${linearProgressClasses.bar}`]: {
-        backgroundColor: semanticColors.buttons.primary.default,
-        borderRadius: `${borderRadius.xS}px 0 0 ${borderRadius.xS}px`,
-    },
-});
-const DownloadActions = styled(Stack)({
-    gap: `${spacing.spacing_4}px`,
-    alignItems: 'center',
-});
-const DownloadIconButton = styled(IconButton)({
-    padding: 0,
-    width: 16,
-    height: 16,
-    color: colors.grey['800'],
-    '&:hover': {
-        backgroundColor: 'transparent',
-    },
-});
 /**
  * NeoToast - Notification/Toast component based on MUI Alert
  *
  * @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)
+ * - type (Light mode|Dark mode|Brand color|Error|Success|Info) → variant (default|dark|brand|error|success|info)
  * - 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 }) => {
-    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: {
-                        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 })] })) }));
+ */
+const NeoToast = ({ variant = 'default', title, message, showClose = true, actions, onClose, ...props }) => {
+    return (jsxs(StyledAlert, { ...props, variant: variant, action: showClose ? (jsx(IconButton, { size: "small", onClick: onClose, sx: { color: semanticColors.icons.placeholder }, children: jsx(X, { size: 16 }) })) : undefined, 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 })] }));
 };
 /**
  * Helper component for creating toast action buttons with proper styling
@@ -6469,7 +6452,7 @@ const StyledSwitch = styled(Switch, {
         [`& .${switchClasses.thumb}`]: {
             width: config.thumbSize,
             height: config.thumbSize,
-            boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
+            boxShadow: `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`,
             transition: theme.transitions.create(['width'], {
                 duration: theme.transitions.duration.shortest,
             }),
@@ -6638,7 +6621,7 @@ const StyledTooltip = styled(Tooltip, {
                 justifyContent: 'center',
             }),
             // Apply shadow
-            boxShadow: `${shadows.neutralMedium.x}px ${shadows.neutralMedium.y}px ${shadows.neutralMedium.blur}px ${shadows.neutralMedium.spread}px ${shadows.neutralMedium.shadow}`,
+            boxShadow: `${shadows.neutral.medium.x}px ${shadows.neutral.medium.y}px ${shadows.neutral.medium.blur}px ${shadows.neutral.medium.spread}px ${shadows.neutral.medium.shadow}`,
         },
         // Style the arrow
         [`& .${tooltipClasses.arrow}`]: {
@@ -6879,5 +6862,5 @@ NeoTypologyControl.displayName = 'NeoTypologyControl';
 
 const version = '0.0.0-development';
 
-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, NeoDropdown as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDropdown, NeoDropdownMenu, NeoDropdownMenuItem, NeoDropdownMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoDropdownMenu as NeoMenu, NeoDropdownMenuItem as NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoDropdown as NeoSelect, NeoDropdownMenuItem 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, NeoAlert, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoDropdown as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDownloadToast, NeoDropdown, NeoDropdownMenu, NeoDropdownMenuItem, NeoDropdownMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoDropdownMenu as NeoMenu, NeoDropdownMenuItem as NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoDropdown as NeoSelect, NeoDropdownMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, 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