@moderneinc/neo-styled-components 2.8.0 → 3.0.0

package/dist/index.js

@@ -16,6 +16,7 @@ var ButtonBase = require('@mui/material/ButtonBase');
 var CircularProgress = require('@mui/material/CircularProgress');
 var MuiToggleButton = require('@mui/material/ToggleButton');
 var MuiToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
+var MuiCard = require('@mui/material/Card');
 var Checkbox = require('@mui/material/Checkbox');
 var xDataGridPro = require('@mui/x-data-grid-pro');
 var Button = require('@mui/material/Button');
@@ -38,23 +39,22 @@ var PickersShortcuts = require('@mui/x-date-pickers/PickersShortcuts');
 var DateRangePicker = require('@mui/x-date-pickers-pro/DateRangePicker');
 var DateRangePickerDay = require('@mui/x-date-pickers-pro/DateRangePickerDay');
 var Badge = require('@mui/material/Badge');
+var LinearProgress = require('@mui/material/LinearProgress');
+var Paper = require('@mui/material/Paper');
+var Stack = require('@mui/material/Stack');
 var List = require('@mui/material/List');
 var Menu = require('@mui/material/Menu');
-var Paper = require('@mui/material/Paper');
 var FormControl = require('@mui/material/FormControl');
 var FormHelperText = require('@mui/material/FormHelperText');
 var ListItemButton = require('@mui/material/ListItemButton');
 var ListItemIcon = require('@mui/material/ListItemIcon');
 var ListItemText = require('@mui/material/ListItemText');
 var Typography = require('@mui/material/Typography');
-var MuiCard = require('@mui/material/Card');
 var Dialog = require('@mui/material/Dialog');
 var DialogActions = require('@mui/material/DialogActions');
 var DialogContent = require('@mui/material/DialogContent');
 var Fab = require('@mui/material/Fab');
 var Fade = require('@mui/material/Fade');
-var Stack = require('@mui/material/Stack');
-var LinearProgress = require('@mui/material/LinearProgress');
 var Radio = require('@mui/material/Radio');
 var Skeleton = require('@mui/material/Skeleton');
 var MuiTab = require('@mui/material/Tab');
@@ -690,11 +690,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$i = [
+const __iconNode$j = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$i);
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$j);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -704,11 +704,11 @@ const ArrowDown = createLucideIcon("arrow-down", __iconNode$i);
  */
 
 
-const __iconNode$h = [
+const __iconNode$i = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$h);
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$i);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -718,7 +718,7 @@ const ArrowUp = createLucideIcon("arrow-up", __iconNode$h);
  */
 
 
-const __iconNode$g = [
+const __iconNode$h = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
@@ -730,7 +730,7 @@ const __iconNode$g = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$g);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$h);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -740,8 +740,8 @@ const CalendarDays = createLucideIcon("calendar-days", __iconNode$g);
  */
 
 
-const __iconNode$f = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
+const __iconNode$g = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$g);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -751,8 +751,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
  */
 
 
-const __iconNode$e = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$e);
+const __iconNode$f = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$f);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -762,8 +762,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$e);
  */
 
 
-const __iconNode$d = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
+const __iconNode$e = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$e);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -773,8 +773,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
  */
 
 
-const __iconNode$c = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$c);
+const __iconNode$d = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$d);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -784,11 +784,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$c = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$b);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$c);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -798,12 +798,12 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$b);
  */
 
 
-const __iconNode$a = [
+const __iconNode$b = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$a);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$b);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -813,11 +813,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$a = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$9);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$a);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -827,12 +827,12 @@ const CircleCheck = createLucideIcon("circle-check", __iconNode$9);
  */
 
 
-const __iconNode$8 = [
+const __iconNode$9 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$8);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$9);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -842,12 +842,12 @@ const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$8
  */
 
 
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
 ];
-const Columns3 = createLucideIcon("columns-3", __iconNode$7);
+const Columns3 = createLucideIcon("columns-3", __iconNode$8);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -857,12 +857,12 @@ const Columns3 = createLucideIcon("columns-3", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+const __iconNode$7 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M12 16v-4", key: "1dtifu" }],
   ["path", { d: "M12 8h.01", key: "e9boi3" }]
 ];
-const Info = createLucideIcon("info", __iconNode$6);
+const Info = createLucideIcon("info", __iconNode$7);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -872,12 +872,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
@@ -957,33 +968,27 @@ const __iconNode = [
 ];
 const X = createLucideIcon("x", __iconNode);
 
+const intentColors = {
+    info: neoDesign.semanticColors.status.info,
+    success: neoDesign.semanticColors.status.success,
+    error: neoDesign.semanticColors.status.error,
+    warning: neoDesign.semanticColors.status.warning,
+    neutral: neoDesign.semanticColors.status.neutral,
+};
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert$2 = styles.styled(Alert, {
-    shouldForwardProp: prop => prop !== 'messagePosition' && prop !== 'variant',
-})(({ variant = 'light', messagePosition = 'left' }) => {
-    // Variant-specific styles
-    const variantStyles = {
-        dark: {
-            backgroundColor: neoDesign.semanticColors.surfaces.snackbarBrand,
+    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: neoDesign.semanticColors.surfaces.white,
-        },
-        light: {
-            backgroundColor: neoDesign.semanticColors.status.info.light,
-            color: neoDesign.colors.grey['800'],
-        },
-        success: {
-            backgroundColor: neoDesign.semanticColors.status.success.light,
-            color: neoDesign.colors.grey['800'],
-        },
-        error: {
-            backgroundColor: neoDesign.semanticColors.status.error.light,
-            color: neoDesign.colors.grey['800'],
-        },
-        warning: {
-            backgroundColor: neoDesign.semanticColors.status.warning.light,
+        }
+        : {
+            backgroundColor: palette.light,
             color: neoDesign.colors.grey['800'],
-        },
-    };
+        };
     return {
         width: '100%',
         minHeight: 52,
@@ -997,9 +1002,9 @@ const StyledAlert$2 = styles.styled(Alert, {
         ...(messagePosition === 'center' && { position: 'relative' }),
         boxShadow: `${neoDesign.shadows.neutralSmall.x}px ${neoDesign.shadows.neutralSmall.y}px ${neoDesign.shadows.neutralSmall.blur}px ${neoDesign.shadows.neutralSmall.spread}px ${neoDesign.shadows.neutralSmall.shadow}`,
         fontSize: neoDesign.typography.fontSize.default,
-        fontWeight: neoDesign.typography.fontWeight.regular,
+        fontWeight: neoDesign.typography.fontWeight.medium,
         lineHeight: 1.5,
-        ...variantStyles[variant],
+        ...typeStyles,
         [`& .${Alert.alertClasses.icon}`]: {
             padding: 0,
             opacity: 1,
@@ -1022,26 +1027,18 @@ const StyledAlert$2 = styles.styled(Alert, {
         },
     };
 });
-const LinkText = styles.styled('span')(({ variant = 'light' }) => {
-    const getLinkColor = () => {
-        if (variant === 'dark') {
-            return neoDesign.semanticColors.typography.link.default; // #f9fafb (light gray/white)
-        }
-        if (variant === 'light') {
-            return neoDesign.semanticColors.typography.link.primary; // #2f42ff (blue)
-        }
-        // For success, error, warning - use dark body color #1f2937
-        return neoDesign.colors.grey['800'];
-    };
-    return {
-        fontWeight: neoDesign.typography.fontWeight.semiBold,
-        color: getLinkColor(),
-        cursor: 'pointer',
-        '&:hover': {
-            textDecoration: 'underline',
-        },
-    };
-});
+const LinkText = styles.styled('span')(({ bannerType = 'outlined' }) => ({
+    marginLeft: 'auto',
+    fontWeight: neoDesign.typography.fontWeight.semiBold,
+    color: bannerType === 'filled'
+        ? neoDesign.semanticColors.typography.link.white
+        : neoDesign.semanticColors.typography.link.primary,
+    cursor: 'pointer',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+        textDecoration: 'underline',
+    },
+}));
 const StyledIconButton$1 = styles.styled(IconButton)(({ closeIconColor }) => ({
     padding: 0,
     color: closeIconColor,
@@ -1049,35 +1046,17 @@ const StyledIconButton$1 = styles.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 neoDesign.semanticColors.surfaces.white;
-        }
-        if (variant === 'success') {
-            return neoDesign.semanticColors.status.success.default;
-        }
-        if (variant === 'error') {
-            return neoDesign.semanticColors.status.error.default;
-        }
-        if (variant === 'warning') {
-            return neoDesign.semanticColors.status.warning.default;
-        }
-        return neoDesign.colors.grey['800'];
+const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePosition = 'left', linkText, showClose = false, icon, onClose, onLinkClick, ...props }) => {
+    const [dismissed, setDismissed] = React.useState(false);
+    const handleClose = () => {
+        setDismissed(true);
+        onClose?.();
     };
-    return (jsxRuntime.jsx(StyledAlert$2, { ...props, variant: variant, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsxRuntime.jsx(StyledIconButton$1, { size: "small", onClick: onClose, closeIconColor: getCloseIconColor(), children: jsxRuntime.jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { variant: variant, onClick: onLinkClick, children: linkText }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { variant: variant, onClick: onLinkClick, children: linkText }))] })) }));
+    if (dismissed) {
+        return null;
+    }
+    const closeIconColor = type === 'filled' ? neoDesign.semanticColors.surfaces.white : intentColors[intent].default;
+    return (jsxRuntime.jsx(StyledAlert$2, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsxRuntime.jsx(StyledIconButton$1, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsxRuntime.jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 NeoBanner.displayName = 'NeoBanner';
 
@@ -1529,6 +1508,197 @@ const NeoButtonTabGroup = ({ size = 'medium', exclusive = true, ...props }) => {
 };
 NeoButtonTabGroup.displayName = 'NeoButtonTabGroup';
 
+// ─── Shared ──────────────────────────────────────────────────────────────────
+const activeShadow = `${neoDesign.shadows.card.x}px ${neoDesign.shadows.card.y}px ${neoDesign.shadows.card.blur}px ${neoDesign.shadows.card.spread}px ${neoDesign.shadows.card.shadow}`;
+// ─── Small card styled components ────────────────────────────────────────────
+const SmallStyledCard = styles.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: neoDesign.semanticColors.surfaces.card,
+    border: `1px solid ${selected ? neoDesign.semanticColors.buttons.primary.default : neoDesign.semanticColors.border.primary}`,
+    borderRadius: neoDesign.borderRadius.xS,
+    boxShadow: selected ? activeShadow : 'none',
+    transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
+    cursor: 'pointer',
+    '&:hover': {
+        borderColor: neoDesign.semanticColors.buttons.primary.default,
+        boxShadow: activeShadow,
+    },
+    '&:focus-visible': {
+        borderColor: neoDesign.semanticColors.buttons.primary.default,
+        ...focusRingStyles,
+    },
+    ...(disabled && {
+        opacity: 0.5,
+        pointerEvents: 'none',
+        cursor: 'not-allowed',
+    }),
+}));
+const SmallCardHeader = styles.styled('div')({
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    width: '100%',
+});
+const SmallLogoContainer = styles.styled('div')({
+    width: neoDesign.spacing.spacing_6,
+    height: neoDesign.spacing.spacing_6,
+    flexShrink: 0,
+});
+const SmallRecipeCount = styles.styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xxs), // 10px
+    fontWeight: neoDesign.typography.fontWeight.semiBold, // 600
+    lineHeight: 1.2,
+    color: neoDesign.colors.grey[800],
+    whiteSpace: 'nowrap',
+}));
+const SmallCardContent = styles.styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(2), // 16px
+    width: '100%',
+}));
+const SmallTitle = styles.styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.h6), // 16px
+    fontWeight: neoDesign.typography.fontWeight.semiBold, // 600
+    lineHeight: 1.4,
+    color: neoDesign.colors.grey[800],
+    width: '100%',
+}));
+const SmallDescription = styles.styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs), // 12px
+    fontWeight: neoDesign.typography.fontWeight.regular, // 400
+    lineHeight: 1.5,
+    color: neoDesign.colors.grey[800],
+    width: '100%',
+    display: '-webkit-box',
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: 'vertical',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+}));
+const LargeStyledCard = styles.styled(MuiCard, {
+    shouldForwardProp: prop => prop !== 'disabled' && prop !== 'cardTheme',
+})(({ disabled = false, cardTheme = 'light' }) => {
+    const isLight = cardTheme === 'light';
+    const activeBorderColor = isLight
+        ? neoDesign.semanticColors.buttons.primary.default
+        : neoDesign.colors.digitalGreen[300];
+    const defaultBorderColor = isLight
+        ? neoDesign.semanticColors.border.primary
+        : `${neoDesign.semanticColors.border.primary}80`;
+    return {
+        width: 340,
+        height: 162,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        padding: neoDesign.spacing.spacing_2,
+        borderRadius: neoDesign.borderRadius.xS,
+        backgroundColor: isLight ? neoDesign.semanticColors.surfaces.card : neoDesign.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 = styles.styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: neoDesign.spacing.spacing_2,
+    alignItems: 'flex-start',
+    width: '100%',
+    flexShrink: 0,
+});
+const LargeHeaderRow = styles.styled('div')({
+    display: 'flex',
+    gap: neoDesign.spacing.spacing_1,
+    alignItems: 'center',
+    flexShrink: 0,
+});
+const LargeHeaderSlot = styles.styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+});
+const LargeHeaderTitle = styles.styled('span', {
+    shouldForwardProp: prop => prop !== 'cardTheme',
+})(({ cardTheme = 'light' }) => ({
+    fontFamily: `${neoDesign.typography.fontFamily.heading}, sans-serif`,
+    fontWeight: neoDesign.typography.fontWeight.semiBold,
+    fontSize: neoDesign.typography.fontSize.h6,
+    lineHeight: 1.4,
+    color: cardTheme === 'light' ? neoDesign.colors.grey[800] : neoDesign.semanticColors.surfaces.white,
+    flexShrink: 0,
+}));
+const LargeDescription = styles.styled('p', {
+    shouldForwardProp: prop => prop !== 'cardTheme',
+})(({ cardTheme = 'light' }) => ({
+    fontFamily: `${neoDesign.typography.fontFamily.body}, sans-serif`,
+    fontWeight: neoDesign.typography.fontWeight.regular,
+    fontSize: neoDesign.typography.fontSize.xs,
+    lineHeight: 1.5,
+    color: cardTheme === 'light' ? neoDesign.colors.grey[800] : neoDesign.semanticColors.surfaces.white,
+    margin: 0,
+    minWidth: '100%',
+    wordWrap: 'break-word',
+}));
+const LargeButtonsRow = styles.styled('div')({
+    display: 'flex',
+    gap: neoDesign.spacing.spacing_3,
+    alignItems: 'flex-start',
+    flexShrink: 0,
+});
+// ─── Internal implementations ────────────────────────────────────────────────
+const SmallCardImpl = ({ logo, recipeCount, title, description, selected = false, disabled = false, onClick, ...props }) => {
+    return (jsxRuntime.jsxs(SmallStyledCard, { selected: selected, disabled: disabled, onClick: disabled ? undefined : onClick, tabIndex: disabled ? -1 : 0, role: "button", "aria-disabled": disabled, "aria-pressed": selected, ...props, children: [jsxRuntime.jsxs(SmallCardHeader, { children: [jsxRuntime.jsx(SmallLogoContainer, { children: logo }), jsxRuntime.jsx(SmallRecipeCount, { children: recipeCount })] }), jsxRuntime.jsxs(SmallCardContent, { children: [jsxRuntime.jsx(SmallTitle, { children: title }), jsxRuntime.jsx(SmallDescription, { children: description })] })] }));
+};
+const LargeCardImpl = ({ disabled = false, cardTheme = 'light', showIcon = true, showGel = true, showButtons = true, icon, gel, title, children, actions, onClick, ...props }) => {
+    return (jsxRuntime.jsxs(LargeStyledCard, { disabled: disabled, cardTheme: cardTheme, onClick: disabled ? undefined : onClick, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled || undefined, ...props, children: [jsxRuntime.jsxs(LargeTopSection, { children: [jsxRuntime.jsxs(LargeHeaderRow, { children: [showIcon && icon && jsxRuntime.jsx(LargeHeaderSlot, { children: icon }), showGel && gel && jsxRuntime.jsx(LargeHeaderSlot, { children: gel }), title && jsxRuntime.jsx(LargeHeaderTitle, { cardTheme: cardTheme, children: title })] }), children && jsxRuntime.jsx(LargeDescription, { cardTheme: cardTheme, children: children })] }), showButtons && actions && jsxRuntime.jsx(LargeButtonsRow, { children: actions })] }));
+};
+// ─── Exported component ──────────────────────────────────────────────────────
+const NeoCard = (props) => {
+    if (props.size === 'small') {
+        const { size: _, ...rest } = props;
+        return jsxRuntime.jsx(SmallCardImpl, { ...rest });
+    }
+    const { size: _, ...rest } = props;
+    return jsxRuntime.jsx(LargeCardImpl, { ...rest });
+};
+NeoCard.displayName = 'NeoCard';
+
 // Border radius per size (from Figma)
 const borderRadiusConfig = {
     xs: 2,
@@ -1602,6 +1772,7 @@ const StyledCheckbox = styles.styled(Checkbox, {
         padding: 0,
         marginTop: size === 'xs' ? 3 : 2,
         color: neoDesign.semanticColors.border.primary,
+        borderRadius: config.borderRadius,
         flexShrink: 0,
         // Root element
         [`&.${Checkbox.checkboxClasses.root}`]: {
@@ -1652,7 +1823,7 @@ const StyledCheckbox = styles.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
@@ -1808,9 +1979,9 @@ const IconWrapper$2 = styles.styled('span')(({ theme, isMultiline }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4187-30353
  *
  * Figma Props Mapping:
- * - Color (Light|Dark) → variant (outlined|filled)
- * - size (Single line|multiline|inline) → size prop + auto-detected multiline
- * - Copy button → endIcon (ReactNode)
+ * - Theme (Dark|Light) → variant (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 }) => {
@@ -2678,9 +2849,9 @@ const StyledChip$1 = styles.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 jsxRuntime.jsx(StyledChip$1, { size: size, variant: variant, ...props });
-};
+}
 NeoTag.displayName = 'NeoTag';
 
 /**
@@ -3640,23 +3811,101 @@ const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...prop
 };
 NeoDot.displayName = 'NeoDot';
 
-const StyledMenu = styles.styled(Menu)(({ theme }) => ({
-    [`& .${Paper.paperClasses.root}`]: {
-        backgroundColor: neoDesign.semanticColors.surfaces.white,
-        borderRadius: neoDesign.borderRadius.s,
-        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
-        boxShadow: `${neoDesign.shadows.dropdown.x}px ${neoDesign.shadows.dropdown.y}px ${neoDesign.shadows.dropdown.blur}px ${neoDesign.shadows.dropdown.spread}px ${neoDesign.shadows.dropdown.shadow}`,
-        minWidth: 200,
-        marginTop: theme.spacing(1),
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(1),
-    },
-    [`& .${List.listClasses.root}`]: {
-        padding: 0,
-    },
-}));
-/**
- * NeoDropdownMenu - Dropdown menu component based on MUI Menu
+const StyledRoot$1 = styles.styled(Paper)({
+    padding: neoDesign.spacing.spacing_2,
+    borderRadius: neoDesign.borderRadius.s,
+    backgroundColor: neoDesign.semanticColors.surfaces.snackbarDarkMode,
+    color: neoDesign.colors.grey['800'],
+    border: `1px solid ${neoDesign.semanticColors.border.primary}`,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: neoDesign.spacing.spacing_3,
+});
+const Title = styles.styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
+    fontWeight: neoDesign.typography.fontWeight.semiBold,
+    lineHeight: 1.4,
+    color: neoDesign.colors.grey['700'],
+}));
+const FileName = styles.styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    lineHeight: 1.5,
+    color: neoDesign.colors.grey['800'],
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    minWidth: 0,
+}));
+const ProgressLabel$1 = styles.styled('p')(({ theme }) => ({
+    margin: 0,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    lineHeight: 1.5,
+    color: neoDesign.colors.grey['800'],
+    flexShrink: 0,
+}));
+const StyledLinearProgress$1 = styles.styled(LinearProgress)({
+    width: '100%',
+    height: neoDesign.spacing.spacing_1,
+    borderRadius: neoDesign.borderRadius.s,
+    backgroundColor: neoDesign.colors.grey['200'],
+    [`& .${LinearProgress.linearProgressClasses.bar}`]: {
+        backgroundColor: neoDesign.semanticColors.buttons.primary.default,
+        borderRadius: `${neoDesign.borderRadius.xS}px 0 0 ${neoDesign.borderRadius.xS}px`,
+    },
+});
+const ActionButton = styles.styled(IconButton)({
+    padding: 0,
+    width: neoDesign.spacing.spacing_2,
+    height: neoDesign.spacing.spacing_2,
+    color: neoDesign.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 (jsxRuntime.jsxs(Stack, { direction: "row", gap: `${neoDesign.spacing.spacing_2}px`, sx: { alignItems: 'center' }, children: [showPause && (jsxRuntime.jsx(ActionButton, { size: "small", onClick: onPause, "aria-label": "Pause download", children: jsxRuntime.jsx(Minus, { size: neoDesign.spacing.spacing_2 }) })), showClose && (jsxRuntime.jsx(ActionButton, { size: "small", onClick: onClose, "aria-label": "Close", children: jsxRuntime.jsx(X, { size: neoDesign.spacing.spacing_2 }) }))] }));
+    };
+    return (jsxRuntime.jsxs(StyledRoot$1, { elevation: 0, role: "status", ...props, children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: {
+                    alignItems: 'flex-start',
+                    justifyContent: 'space-between',
+                    width: '100%',
+                    gap: `${neoDesign.spacing.spacing_4}px`,
+                }, children: [title && jsxRuntime.jsx(Title, { children: title }), renderActions()] }), jsxRuntime.jsxs(Stack, { gap: `${neoDesign.spacing.spacing_1}px`, sx: { width: '100%' }, children: [jsxRuntime.jsxs(Stack, { direction: "row", gap: `${neoDesign.spacing.spacing_2}px`, sx: { alignItems: 'flex-end', justifyContent: 'space-between', width: '100%' }, children: [fileName && jsxRuntime.jsx(FileName, { children: fileName }), progress !== undefined && jsxRuntime.jsxs(ProgressLabel$1, { children: [progress, "%"] })] }), jsxRuntime.jsx(StyledLinearProgress$1, { variant: "determinate", value: progress ?? 0 })] })] }));
+};
+NeoDownloadToast.displayName = 'NeoDownloadToast';
+
+const StyledMenu = styles.styled(Menu)(({ theme }) => ({
+    [`& .${Paper.paperClasses.root}`]: {
+        backgroundColor: neoDesign.semanticColors.surfaces.white,
+        borderRadius: neoDesign.borderRadius.s,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
+        boxShadow: `${neoDesign.shadows.dropdown.x}px ${neoDesign.shadows.dropdown.y}px ${neoDesign.shadows.dropdown.blur}px ${neoDesign.shadows.dropdown.spread}px ${neoDesign.shadows.dropdown.shadow}`,
+        minWidth: 200,
+        marginTop: theme.spacing(1),
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+    },
+    [`& .${List.listClasses.root}`]: {
+        padding: 0,
+    },
+}));
+/**
+ * NeoDropdownMenu - Dropdown menu component based on MUI Menu
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11141-4980
  *
@@ -4247,7 +4496,7 @@ const InfoIconWrapper = styles.styled('span')({
 });
 const StyledInputBase = styles.styled(InputBase, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'destructive',
-})(({ theme, size = 'medium', destructive, startAdornment }) => {
+})(({ theme, size = 'medium', destructive, startAdornment, multiline }) => {
     const sizeConfig = {
         small: {
             height: neoDesign.spacing.spacing_5,
@@ -4264,7 +4513,7 @@ const StyledInputBase = styles.styled(InputBase, {
     };
     const sizeStyles = sizeConfig[size];
     return {
-        height: sizeStyles.height,
+        height: multiline ? 'auto' : sizeStyles.height,
         fontSize: sizeStyles.fontSize,
         borderRadius: sizeStyles.borderRadius,
         backgroundColor: neoDesign.semanticColors.input.background,
@@ -4734,271 +4983,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 = `${neoDesign.shadows.card.x}px ${neoDesign.shadows.card.y}px ${neoDesign.shadows.card.blur}px ${neoDesign.shadows.card.spread}px ${neoDesign.shadows.card.shadow}`;
-/**
- * Styled Card component with Neo design tokens
- */
-const StyledCard = styles.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: neoDesign.semanticColors.surfaces.card,
-    border: `1px solid ${selected ? neoDesign.semanticColors.buttons.primary.default : neoDesign.semanticColors.border.primary}`,
-    borderRadius: neoDesign.borderRadius.xS,
-    boxShadow: selected ? activeShadow$1 : 'none',
-    transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
-    cursor: 'pointer',
-    '&:hover': {
-        borderColor: neoDesign.semanticColors.buttons.primary.default,
-        boxShadow: activeShadow$1,
-    },
-    '&:focus-visible': {
-        borderColor: neoDesign.semanticColors.buttons.primary.default,
-        ...focusRingStyles,
-    },
-    ...(disabled && {
-        opacity: 0.5,
-        pointerEvents: 'none',
-        cursor: 'not-allowed',
-    }),
-}));
-/**
- * Header section containing logo and recipe count
- */
-const CardHeader = styles.styled('div')({
-    display: 'flex',
-    alignItems: 'flex-start',
-    justifyContent: 'space-between',
-    width: '100%',
-});
-/**
- * Logo container
- */
-const LogoContainer = styles.styled('div')({
-    width: neoDesign.spacing.spacing_6,
-    height: neoDesign.spacing.spacing_6,
-    flexShrink: 0,
-});
-/**
- * Recipe count badge
- */
-const RecipeCount = styles.styled('p')(({ theme }) => ({
-    margin: 0,
-    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xxs), // 10px
-    fontWeight: neoDesign.typography.fontWeight.semiBold, // 600
-    lineHeight: 1.2,
-    color: neoDesign.colors.grey[800],
-    whiteSpace: 'nowrap',
-}));
-/**
- * Content section containing title and description
- */
-const CardContent = styles.styled('div')(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(2), // 16px
-    width: '100%',
-}));
-/**
- * Title text
- */
-const Title = styles.styled('p')(({ theme }) => ({
-    margin: 0,
-    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.h6), // 16px
-    fontWeight: neoDesign.typography.fontWeight.semiBold, // 600
-    lineHeight: 1.4,
-    color: neoDesign.colors.grey[800],
-    width: '100%',
-}));
-/**
- * Description text
- */
-const Description$1 = styles.styled('p')(({ theme }) => ({
-    margin: 0,
-    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs), // 12px
-    fontWeight: neoDesign.typography.fontWeight.regular, // 400
-    lineHeight: 1.5,
-    color: neoDesign.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 (jsxRuntime.jsxs(StyledCard, { selected: selected, disabled: disabled, onClick: disabled ? undefined : onClick, tabIndex: disabled ? -1 : 0, role: "button", "aria-disabled": disabled, "aria-pressed": selected, ...props, children: [jsxRuntime.jsxs(CardHeader, { children: [jsxRuntime.jsx(LogoContainer, { children: logo }), jsxRuntime.jsx(RecipeCount, { children: recipeCount })] }), jsxRuntime.jsxs(CardContent, { children: [jsxRuntime.jsx(Title, { children: title }), jsxRuntime.jsx(Description$1, { children: description })] })] }));
+ * // After
+ * <NeoCard size="small" logo={...} title="Java" ... />
+ * ```
+ */
+const NeoMarketplaceCard = (props) => {
+    return jsxRuntime.jsx(NeoCard, { size: "small", ...props });
 };
 NeoMarketplaceCard.displayName = 'NeoMarketplaceCard';
 
-const activeShadow = `${neoDesign.shadows.card.x}px ${neoDesign.shadows.card.y}px ${neoDesign.shadows.card.blur}px ${neoDesign.shadows.card.spread}px ${neoDesign.shadows.card.shadow}`;
-const StyledLargeCard = styles.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
-        ? neoDesign.semanticColors.buttons.primary.default
-        : neoDesign.colors.digitalGreen[300];
-    const defaultBorderColor = isLight
-        ? neoDesign.semanticColors.border.primary
-        : `${neoDesign.semanticColors.border.primary}80`;
-    return {
-        width: 340,
-        height: 162,
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'space-between',
-        alignItems: 'flex-start',
-        padding: neoDesign.spacing.spacing_2,
-        borderRadius: neoDesign.borderRadius.xS,
-        backgroundColor: isLight ? neoDesign.semanticColors.surfaces.card : neoDesign.colors.grey[800],
-        border: `1px solid ${isActive || isFocused ? activeBorderColor : defaultBorderColor}`,
-        boxShadow: isActive ? activeShadow : 'none',
-        overflow: 'hidden',
-        ...(isFocused && focusRingStyles),
-        '&:focus-visible': {
-            borderColor: isLight ? neoDesign.semanticColors.buttons.primary.default : neoDesign.colors.digitalGreen[300],
-            ...focusRingStyles,
-        },
-        ...(isDisabled && {
-            opacity: 0.5,
-            pointerEvents: 'none',
-            cursor: 'not-allowed',
-        }),
-    };
-});
-const TopSection = styles.styled('div')({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: neoDesign.spacing.spacing_2,
-    alignItems: 'flex-start',
-    width: '100%',
-    flexShrink: 0,
-});
-const HeaderRow = styles.styled('div')({
-    display: 'flex',
-    gap: neoDesign.spacing.spacing_1,
-    alignItems: 'center',
-    flexShrink: 0,
-});
-const HeaderSlot = styles.styled('div')({
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: 20,
-    height: 20,
-    flexShrink: 0,
-});
-const HeaderTitle = styles.styled('span', {
-    shouldForwardProp: prop => prop !== 'cardTheme',
-})(({ cardTheme = 'light' }) => ({
-    fontFamily: `${neoDesign.typography.fontFamily.heading}, sans-serif`,
-    fontWeight: neoDesign.typography.fontWeight.semiBold,
-    fontSize: neoDesign.typography.fontSize.h6,
-    lineHeight: 1.4,
-    color: cardTheme === 'light' ? neoDesign.colors.grey[800] : neoDesign.semanticColors.surfaces.white,
-    flexShrink: 0,
-}));
-const Description = styles.styled('p', {
-    shouldForwardProp: prop => prop !== 'cardTheme',
-})(({ cardTheme = 'light' }) => ({
-    fontFamily: `${neoDesign.typography.fontFamily.body}, sans-serif`,
-    fontWeight: neoDesign.typography.fontWeight.regular,
-    fontSize: neoDesign.typography.fontSize.xs,
-    lineHeight: 1.5,
-    color: cardTheme === 'light' ? neoDesign.colors.grey[800] : neoDesign.semanticColors.surfaces.white,
-    margin: 0,
-    minWidth: '100%',
-    wordWrap: 'break-word',
-}));
-const ButtonsRow = styles.styled('div')({
-    display: 'flex',
-    gap: neoDesign.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 (jsxRuntime.jsxs(StyledLargeCard, { cardState: state, cardTheme: cardTheme, onClick: isDisabled ? undefined : onClick, tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, ...props, children: [jsxRuntime.jsxs(TopSection, { children: [jsxRuntime.jsxs(HeaderRow, { children: [showIcon && icon && jsxRuntime.jsx(HeaderSlot, { children: icon }), showGel && gel && jsxRuntime.jsx(HeaderSlot, { children: gel }), title && jsxRuntime.jsx(HeaderTitle, { cardTheme: cardTheme, children: title })] }), children && jsxRuntime.jsx(Description, { cardTheme: cardTheme, children: children })] }), showButtons && actions && jsxRuntime.jsx(ButtonsRow, { children: actions })] }));
+ * // After
+ * <NeoCard size="large" cardTheme="light" ... />
+ * ```
+ */
+const NeoMarketplaceLargeCard = (props) => {
+    return jsxRuntime.jsx(NeoCard, { size: "large", ...props });
 };
 NeoMarketplaceLargeCard.displayName = 'NeoMarketplaceLargeCard';
 
@@ -5225,15 +5239,14 @@ const StyledRoot = styles.styled(ButtonBase, {
 })(({ selected }) => ({
     display: 'flex',
     flexDirection: 'column',
-    gap: neoDesign.spacing.spacing_1_4, // 2px
+    gap: neoDesign.spacing.spacing_1_2, // 4px
     alignItems: 'center',
     justifyContent: 'center',
     paddingTop: neoDesign.spacing.spacing_1, // 8px
     paddingBottom: neoDesign.spacing.spacing_1, // 8px
     paddingLeft: neoDesign.spacing.spacing_1_2, // 4px
     paddingRight: neoDesign.spacing.spacing_1_2, // 4px
-    borderRadius: neoDesign.borderRadius.xS, // 4px
-    width: 95,
+    borderRadius: neoDesign.borderRadius.s, // 8px
     cursor: 'pointer',
     textDecoration: 'none',
     '&:hover .neo-nav-icon-padding': {
@@ -5279,7 +5292,7 @@ const IconPadding = styles.styled('span')({
     display: 'flex',
     alignItems: 'center',
     padding: neoDesign.spacing.spacing_1, // 8px
-    borderRadius: neoDesign.spacing.spacing_1, // 8px
+    borderRadius: neoDesign.borderRadius.s, // 8px
     border: '1px solid transparent',
     transition: 'background-color 150ms, border-color 150ms',
 });
@@ -5539,7 +5552,7 @@ function NeoPaginatedGrid({ slots, pageSizeOptions, slotProps: userSlotProps, ..
 }
 NeoPaginatedGrid.displayName = 'NeoPaginatedGrid';
 
-const StyledLinearProgress$1 = styles.styled(LinearProgress, {
+const StyledLinearProgress = styles.styled(LinearProgress, {
     shouldForwardProp: prop => prop !== 'labelPosition',
 })(() => ({
     height: 8,
@@ -5584,7 +5597,7 @@ const ProgressWrapper = styles.styled('div')(({ labelPosition }) => ({
         flexDirection: 'row',
     }),
 }));
-const ProgressLabel$1 = styles.styled(Typography)(({ theme }) => ({
+const ProgressLabel = styles.styled(Typography)(({ theme }) => ({
     fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
     fontWeight: neoDesign.typography.fontWeight.medium,
     color: neoDesign.colors.grey[800],
@@ -5613,7 +5626,7 @@ const ProgressBarContainer = styles.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 (jsxRuntime.jsxs(ProgressWrapper, { labelPosition: labelPosition, children: [jsxRuntime.jsx(ProgressBarContainer, { labelPosition: labelPosition, children: jsxRuntime.jsx(StyledLinearProgress$1, { variant: "determinate", value: variant === 'cancelled' ? 100 : value, "data-variant": variant, labelPosition: labelPosition, ...props }) }), showLabel && jsxRuntime.jsx(ProgressLabel$1, { children: displayLabel })] }));
+    return (jsxRuntime.jsxs(ProgressWrapper, { labelPosition: labelPosition, children: [jsxRuntime.jsx(ProgressBarContainer, { labelPosition: labelPosition, children: jsxRuntime.jsx(StyledLinearProgress, { variant: "determinate", value: variant === 'cancelled' ? 100 : value, "data-variant": variant, labelPosition: labelPosition, ...props }) }), showLabel && jsxRuntime.jsx(ProgressLabel, { children: displayLabel })] }));
 };
 NeoProgressbar.displayName = 'NeoProgressbar';
 
@@ -5715,17 +5728,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 (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Unchecked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: neoDesign.semanticColors.border.primary, strokeWidth: "1", fill: "transparent" })] }));
+    return (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Unchecked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, stroke: neoDesign.semanticColors.border.primary, strokeWidth: "1", fill: disabled ? neoDesign.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 (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Checked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, fill: neoDesign.semanticColors.buttons.primary.default, stroke: neoDesign.semanticColors.buttons.primary.default, strokeWidth: "1" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: innerRadius, fill: neoDesign.semanticColors.surfaces.white })] }));
+    return (jsxRuntime.jsxs("svg", { width: dimensions, height: dimensions, viewBox: `0 0 ${dimensions} ${dimensions}`, fill: "none", "aria-hidden": "true", children: [jsxRuntime.jsx("title", { children: "Checked radio button" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: radius - 0.5, fill: disabled
+                    ? neoDesign.semanticColors.buttons.primary.disabled
+                    : neoDesign.semanticColors.buttons.primary.default, stroke: disabled ? neoDesign.semanticColors.border.primary : neoDesign.semanticColors.buttons.primary.default, strokeWidth: "1" }), jsxRuntime.jsx("circle", { cx: dimensions / 2, cy: dimensions / 2, r: innerRadius, fill: disabled ? neoDesign.semanticColors.icons.disabled : neoDesign.semanticColors.surfaces.white })] }));
 };
 const RadioContainer = styles.styled('label')(({ disabled }) => ({
     display: 'inline-flex',
@@ -5770,6 +5785,10 @@ const StyledRadio = styles.styled(Radio, {
         height: dimensions,
         flexShrink: 0,
         borderRadius: radius,
+        color: neoDesign.semanticColors.border.primary,
+        [`&.${Radio.radioClasses.checked}`]: {
+            color: neoDesign.semanticColors.buttons.primary.default,
+        },
         '&:hover': {
             backgroundColor: 'transparent',
         },
@@ -5787,9 +5806,12 @@ const StyledRadio = styles.styled(Radio, {
                 backgroundColor: 'transparent',
             },
         },
-        // Disabled state
+        // Disabled state — icons handle their own disabled colors
         [`&.${Radio.radioClasses.disabled}`]: {
-            opacity: 0.5,
+            color: neoDesign.semanticColors.border.primary,
+            [`&.${Radio.radioClasses.checked}`]: {
+                color: neoDesign.semanticColors.border.primary,
+            },
         },
     };
 });
@@ -5797,7 +5819,6 @@ const StyledRadio = styles.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
@@ -5837,9 +5858,9 @@ const StyledRadio = styles.styled(Radio, {
  * </RadioGroup>
  */
 const NeoRadio = ({ size = 'medium', label, helperText, disabled, ...props }) => {
-    // Custom icons based on size
-    const uncheckedIcon = jsxRuntime.jsx(UncheckedIcon, { size: size });
-    const checkedIcon = jsxRuntime.jsx(CheckedIcon, { size: size });
+    // Custom icons based on size and disabled state
+    const uncheckedIcon = jsxRuntime.jsx(UncheckedIcon, { size: size, disabled: disabled });
+    const checkedIcon = jsxRuntime.jsx(CheckedIcon, { size: size, disabled: disabled });
     // If no label, return just the radio button
     if (!label && !helperText) {
         return (jsxRuntime.jsx(StyledRadio, { size: size, disabled: disabled, icon: uncheckedIcon, checkedIcon: checkedIcon, ...props }));
@@ -6154,7 +6175,7 @@ NeoTab.displayName = 'NeoTab';
 
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert = styles.styled(Alert, {
-    shouldForwardProp: prop => prop !== 'variant' && prop !== 'showProgress',
+    shouldForwardProp: prop => prop !== 'variant',
 })(({ theme, variant = 'default' }) => {
     // Base styles
     const baseStyles = {
@@ -6211,11 +6232,6 @@ const StyledAlert = styles.styled(Alert, {
             color: neoDesign.semanticColors.status.info.dark,
             border: `1px solid ${neoDesign.semanticColors.status.info.default}`,
         },
-        download: {
-            backgroundColor: neoDesign.semanticColors.surfaces.snackbarDarkMode,
-            color: neoDesign.colors.grey['800'],
-            border: `1px solid ${neoDesign.semanticColors.border.primary}`,
-        },
     };
     return {
         ...baseStyles,
@@ -6230,7 +6246,6 @@ const ToastTitle = styles.styled('p')(({ theme, variant = 'default' }) => {
         error: neoDesign.semanticColors.status.error.dark,
         success: neoDesign.semanticColors.status.success.dark,
         info: neoDesign.semanticColors.status.info.dark,
-        download: neoDesign.colors.grey['700'],
     };
     return {
         margin: 0,
@@ -6248,7 +6263,6 @@ const ToastMessage = styles.styled('p')(({ theme, variant = 'default' }) => {
         error: neoDesign.semanticColors.status.error.dark,
         success: neoDesign.semanticColors.status.success.dark,
         info: neoDesign.semanticColors.status.info.dark,
-        download: neoDesign.colors.grey['800'],
     };
     return {
         margin: 0,
@@ -6286,7 +6300,7 @@ const ToastButton = styles.styled(Button, {
         if (toastVariant === 'info') {
             return neoDesign.semanticColors.status.info.dark;
         }
-        // default and download variants use icon placeholder color
+        // default variant uses icon placeholder color
         return neoDesign.semanticColors.icons.placeholder;
     };
     return {
@@ -6303,68 +6317,20 @@ const ToastButton = styles.styled(Button, {
         },
     };
 });
-const ProgressSection = styles.styled(Stack)({
-    gap: neoDesign.spacing.spacing_1,
-    width: '100%',
-});
-const FileName = styles.styled('p')(({ theme }) => ({
-    margin: 0,
-    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
-    fontWeight: neoDesign.typography.fontWeight.medium,
-    lineHeight: 1.5,
-    color: neoDesign.colors.grey['800'],
-}));
-const ProgressLabel = styles.styled('p')(({ theme }) => ({
-    margin: 0,
-    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
-    fontWeight: neoDesign.typography.fontWeight.medium,
-    lineHeight: 1.5,
-    color: neoDesign.colors.grey['800'],
-}));
-const StyledLinearProgress = styles.styled(LinearProgress)({
-    width: '100%',
-    height: neoDesign.spacing.spacing_2,
-    borderRadius: neoDesign.borderRadius.s,
-    backgroundColor: neoDesign.colors.grey['200'],
-    [`& .${LinearProgress.linearProgressClasses.bar}`]: {
-        backgroundColor: neoDesign.semanticColors.buttons.primary.default,
-        borderRadius: `${neoDesign.borderRadius.xS}px 0 0 ${neoDesign.borderRadius.xS}px`,
-    },
-});
-const DownloadActions = styles.styled(Stack)({
-    gap: `${neoDesign.spacing.spacing_4}px`,
-    alignItems: 'center',
-});
-const DownloadIconButton = styles.styled(IconButton)({
-    padding: 0,
-    width: 16,
-    height: 16,
-    color: neoDesign.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 (jsxRuntime.jsx(StyledAlert, { ...props, variant: variant, showProgress: isDownloadVariant, action: showClose && !isDownloadVariant ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: neoDesign.semanticColors.icons.placeholder }, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: isDownloadVariant ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: {
-                        alignItems: 'flex-start',
-                        justifyContent: 'space-between',
-                        width: '100%',
-                        gap: `${neoDesign.spacing.spacing_4}px`,
-                    }, children: [title && jsxRuntime.jsx(ToastTitle, { variant: variant, children: title }), showClose && (jsxRuntime.jsxs(DownloadActions, { direction: "row", children: [jsxRuntime.jsx(DownloadIconButton, { size: "small", children: jsxRuntime.jsx(Stack, { sx: { width: 16, height: 16 } }) }), jsxRuntime.jsx(DownloadIconButton, { size: "small", onClick: onClose, children: jsxRuntime.jsx(X, { size: 16 }) })] }))] }), jsxRuntime.jsxs(ProgressSection, { children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: { alignItems: 'flex-end', justifyContent: 'space-between', width: '100%' }, children: [fileName && jsxRuntime.jsx(FileName, { children: fileName }), progress !== undefined && jsxRuntime.jsxs(ProgressLabel, { children: [progress, "%"] })] }), jsxRuntime.jsx(StyledLinearProgress, { variant: "determinate", value: progress ?? 0 })] })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${neoDesign.spacing.spacing_1}px`, width: '100%' }, children: [title && jsxRuntime.jsx(ToastTitle, { variant: variant, children: title }), message && jsxRuntime.jsx(ToastMessage, { variant: variant, children: message })] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] })) }));
+ */
+const NeoToast = ({ variant = 'default', title, message, showClose = true, actions, onClose, ...props }) => {
+    return (jsxRuntime.jsxs(StyledAlert, { ...props, variant: variant, action: showClose ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: neoDesign.semanticColors.icons.placeholder }, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${neoDesign.spacing.spacing_1}px`, width: '100%' }, children: [title && jsxRuntime.jsx(ToastTitle, { variant: variant, children: title }), message && jsxRuntime.jsx(ToastMessage, { variant: variant, children: message })] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] }));
 };
 /**
  * Helper component for creating toast action buttons with proper styling
@@ -6892,6 +6858,7 @@ exports.NeoBreadcrumbs = NeoBreadcrumbs;
 exports.NeoButton = NeoButton;
 exports.NeoButtonTab = NeoButtonTab;
 exports.NeoButtonTabGroup = NeoButtonTabGroup;
+exports.NeoCard = NeoCard;
 exports.NeoCheckbox = NeoCheckbox;
 exports.NeoCodeSnippet = NeoCodeSnippet;
 exports.NeoDataGrid = NeoDataGrid;
@@ -6908,6 +6875,7 @@ exports.NeoDataGridSelect = NeoDropdown;
 exports.NeoDatePicker = NeoDatePicker;
 exports.NeoDivider = NeoDivider;
 exports.NeoDot = NeoDot;
+exports.NeoDownloadToast = NeoDownloadToast;
 exports.NeoDropdown = NeoDropdown;
 exports.NeoDropdownMenu = NeoDropdownMenu;
 exports.NeoDropdownMenuItem = NeoDropdownMenuItem;