@moderneinc/neo-styled-components 2.8.0 → 3.0.0

package/dist/index.esm.js

@@ -7,13 +7,14 @@ import Chip, { chipClasses } from '@mui/material/Chip';
 import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
-import React, { forwardRef, createElement, useRef, useCallback, useState, useMemo, useEffect } from 'react';
+import React, { forwardRef, createElement, useState, useRef, useCallback, 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';
@@ -688,11 +688,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$i = [
+const __iconNode$j = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$i);
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$j);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -702,11 +702,11 @@ const ArrowDown = createLucideIcon("arrow-down", __iconNode$i);
  */
 
 
-const __iconNode$h = [
+const __iconNode$i = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$h);
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$i);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -716,7 +716,7 @@ const ArrowUp = createLucideIcon("arrow-up", __iconNode$h);
  */
 
 
-const __iconNode$g = [
+const __iconNode$h = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
@@ -728,7 +728,7 @@ const __iconNode$g = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$g);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$h);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -738,8 +738,8 @@ const CalendarDays = createLucideIcon("calendar-days", __iconNode$g);
  */
 
 
-const __iconNode$f = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
+const __iconNode$g = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$g);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -749,8 +749,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
  */
 
 
-const __iconNode$e = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$e);
+const __iconNode$f = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$f);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -760,8 +760,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$e);
  */
 
 
-const __iconNode$d = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
+const __iconNode$e = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$e);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -771,8 +771,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
  */
 
 
-const __iconNode$c = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$c);
+const __iconNode$d = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$d);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -782,11 +782,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$c = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$b);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$c);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -796,12 +796,12 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$b);
  */
 
 
-const __iconNode$a = [
+const __iconNode$b = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$a);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$b);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -811,11 +811,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$a = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$9);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$a);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -825,12 +825,12 @@ const CircleCheck = createLucideIcon("circle-check", __iconNode$9);
  */
 
 
-const __iconNode$8 = [
+const __iconNode$9 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$8);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$9);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -840,12 +840,12 @@ const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$8
  */
 
 
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
 ];
-const Columns3 = createLucideIcon("columns-3", __iconNode$7);
+const Columns3 = createLucideIcon("columns-3", __iconNode$8);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -855,12 +855,12 @@ const Columns3 = createLucideIcon("columns-3", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$7 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
 ];
-const Info = createLucideIcon("info", __iconNode$6);
+const Info = createLucideIcon("info", __iconNode$7);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -870,12 +870,23 @@ 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
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$5 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$5);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -955,33 +966,27 @@ const __iconNode = [
 ];
 const X = createLucideIcon("x", __iconNode);
 
+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$2 = styled(Alert, {
-    shouldForwardProp: prop => prop !== 'messagePosition' && prop !== 'variant',
-})(({ variant = 'light', messagePosition = 'left' }) => {
-    // Variant-specific styles
-    const variantStyles = {
-        dark: {
-            backgroundColor: semanticColors.surfaces.snackbarBrand,
+    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,
-        },
-        light: {
-            backgroundColor: semanticColors.status.info.light,
-            color: colors.grey['800'],
-        },
-        success: {
-            backgroundColor: semanticColors.status.success.light,
-            color: colors.grey['800'],
-        },
-        error: {
-            backgroundColor: semanticColors.status.error.light,
-            color: colors.grey['800'],
-        },
-        warning: {
-            backgroundColor: semanticColors.status.warning.light,
+        }
+        : {
+            backgroundColor: palette.light,
             color: colors.grey['800'],
-        },
-    };
+        };
     return {
         width: '100%',
         minHeight: 52,
@@ -995,9 +1000,9 @@ const StyledAlert$2 = styled(Alert, {
         ...(messagePosition === 'center' && { position: 'relative' }),
         boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.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 +1025,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 +1044,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$2, { ...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,6 +1506,197 @@ const NeoButtonTabGroup = ({ size = 'medium', exclusive = true, ...props }) => {
 };
 NeoButtonTabGroup.displayName = 'NeoButtonTabGroup';
 
+// ─── 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',
+    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 SmallCardContent = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2), // 16px
+    width: '100%',
+}));
+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 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',
+}));
+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,
@@ -1600,6 +1770,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 +1821,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 +1977,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 +2847,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 +3809,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,
@@ -4245,7 +4494,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 +4511,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 +4981,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 +5237,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 +5290,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',
 });
@@ -5537,7 +5550,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 +5595,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 +5624,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 +5726,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 +5783,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 +5804,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 +5817,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 +5856,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 }));
@@ -6152,7 +6173,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 +6230,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 +6244,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 +6261,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 +6298,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 +6315,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
@@ -6879,5 +6845,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, 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, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
 //# sourceMappingURL=index.esm.js.map