@moderneinc/neo-styled-components 2.8.0-next.94ceac → 2.8.0-next.9bca98

package/dist/Banner/Banner.d.ts

@@ -1,13 +1,22 @@
 import { type AlertProps } from '@mui/material/Alert';
 import type { ReactNode } from 'react';
+type Intent = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+type BannerType = 'outlined' | 'filled';
 export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
-     * The visual style variant of the banner
-     * @default "light"
+     * The intent/purpose of the banner
+     * @default "info"
      *
-     * @figmaPropMapping color (Dark|Light|Success|Error|Warning) → variant
+     * @figmaPropMapping Intention (Info|Success|Error|Warning|Neutral) → intent
      */
-    variant?: 'dark' | 'light' | 'success' | 'error' | 'warning';
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
+     *
+     * @figmaPropMapping Type (Outlined|Filled) → type
+     */
+    type?: BannerType;
     /**
      * The message text to display
      *
@@ -18,20 +27,20 @@ export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity'
      * Horizontal alignment of the message content
      * @default "left"
      *
-     * @figmaPropMapping messagePosition (Left|Center) → messagePosition
+     * @figmaPropMapping Message Position (Left|Center) → messagePosition
      */
     messagePosition?: 'left' | 'center';
     /**
      * Optional link text to display after the message
      *
-     * @figmaPropMapping link (boolean) → linkText (string)
+     * @figmaPropMapping Show Link (boolean) → linkText (string)
      */
     linkText?: string;
     /**
      * Whether to show the close button
      * @default true
      *
-     * @figmaPropMapping closeIcon → showClose
+     * @figmaPropMapping Dismissible → showClose
      */
     showClose?: boolean;
     /**
@@ -48,19 +57,8 @@ export interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity'
      */
     onLinkClick?: () => void;
 }
-/**
- * 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)
- */
 export declare const NeoBanner: {
-    ({ variant, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): import("react/jsx-runtime").JSX.Element;
+    ({ intent, type, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

package/dist/Card/Card.d.ts

@@ -13,7 +13,7 @@ export interface NeoCardSmallProps extends Omit<CardProps, 'children' | 'title'>
 }
 export interface NeoCardLargeProps extends Omit<CardProps, 'children' | 'title'> {
     size: 'large';
-    state?: 'default' | 'active' | 'disabled' | 'focused';
+    disabled?: boolean;
     cardTheme?: 'light' | 'dark';
     showIcon?: boolean;
     showGel?: boolean;

package/dist/Checkbox/Checkbox.d.ts

@@ -2,7 +2,7 @@ import { type CheckboxProps } from '@mui/material/Checkbox';
 import type { ReactNode } from 'react';
 /**
  * Custom checkbox icons matching Figma design
- * @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
  *
  * Checkbox sizes: xs=12x12, small=16x16, medium=20x20
  * Check/minus paths scaled from Untitled UI (originally 24x24)
@@ -43,7 +43,7 @@ export interface NeoCheckboxProps extends Omit<CheckboxProps, 'size'> {
 /**
  * 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

package/dist/CodeSnippet/CodeSnippet.d.ts

@@ -20,7 +20,7 @@ export interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
      * The size of the code snippet
      * @default "small"
      *
-     * @figma Size (Single line|multiline|inline)
+     * @figma Content (Multi|Inline)
      */
     size?: CodeSnippetSize;
     /**
@@ -38,9 +38,9 @@ export interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
  * @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
  */
 export declare const NeoCodeSnippet: {

package/dist/Radio/Radio.d.ts

@@ -32,7 +32,6 @@ export interface NeoRadioProps extends Omit<RadioProps, 'size'> {
  * 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

package/dist/index.d.ts

@@ -362,14 +362,23 @@ declare const NeoBadge: {
     displayName: string;
 };
 
+type Intent = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+type BannerType = 'outlined' | 'filled';
 interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
-     * The visual style variant of the banner
-     * @default "light"
+     * The intent/purpose of the banner
+     * @default "info"
+     *
+     * @figmaPropMapping Intention (Info|Success|Error|Warning|Neutral) → intent
+     */
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
      *
-     * @figmaPropMapping color (Dark|Light|Success|Error|Warning) → variant
+     * @figmaPropMapping Type (Outlined|Filled) → type
      */
-    variant?: 'dark' | 'light' | 'success' | 'error' | 'warning';
+    type?: BannerType;
     /**
      * The message text to display
      *
@@ -380,20 +389,20 @@ interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'colo
      * Horizontal alignment of the message content
      * @default "left"
      *
-     * @figmaPropMapping messagePosition (Left|Center) → messagePosition
+     * @figmaPropMapping Message Position (Left|Center) → messagePosition
      */
     messagePosition?: 'left' | 'center';
     /**
      * Optional link text to display after the message
      *
-     * @figmaPropMapping link (boolean) → linkText (string)
+     * @figmaPropMapping Show Link (boolean) → linkText (string)
      */
     linkText?: string;
     /**
      * Whether to show the close button
      * @default true
      *
-     * @figmaPropMapping closeIcon → showClose
+     * @figmaPropMapping Dismissible → showClose
      */
     showClose?: boolean;
     /**
@@ -410,20 +419,8 @@ interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'colo
      */
     onLinkClick?: () => void;
 }
-/**
- * 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)
- */
 declare const NeoBanner: {
-    ({ variant, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): react_jsx_runtime.JSX.Element;
+    ({ intent, type, message, messagePosition, linkText, showClose, icon, onClose, onLinkClick, ...props }: NeoBannerProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -684,7 +681,7 @@ interface StyledComponent<ComponentProps extends {}, SpecificComponentProps exte
 
 /**
  * Custom checkbox icons matching Figma design
- * @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
  *
  * Checkbox sizes: xs=12x12, small=16x16, medium=20x20
  * Check/minus paths scaled from Untitled UI (originally 24x24)
@@ -721,7 +718,7 @@ interface NeoCheckboxProps extends Omit<CheckboxProps, 'size'> {
 /**
  * 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
@@ -787,7 +784,7 @@ interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
      * The size of the code snippet
      * @default "small"
      *
-     * @figma Size (Single line|multiline|inline)
+     * @figma Content (Multi|Inline)
      */
     size?: CodeSnippetSize;
     /**
@@ -805,9 +802,9 @@ interface NeoCodeSnippetProps extends Omit<ButtonBaseProps, 'children'> {
  * @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
  */
 declare const NeoCodeSnippet: {
@@ -2006,7 +2003,6 @@ interface NeoRadioProps extends Omit<RadioProps, 'size'> {
  * 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
@@ -2688,7 +2684,7 @@ interface NeoCardSmallProps extends Omit<CardProps, 'children' | 'title'> {
 }
 interface NeoCardLargeProps extends Omit<CardProps, 'children' | 'title'> {
     size: 'large';
-    state?: 'default' | 'active' | 'disabled' | 'focused';
+    disabled?: boolean;
     cardTheme?: 'light' | 'dark';
     showIcon?: boolean;
     showGel?: boolean;

package/dist/index.esm.js

@@ -955,33 +955,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 +989,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 +1014,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 +1033,9 @@ 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'];
-    };
-    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 }))] })) }));
+const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePosition = 'left', linkText, showClose = true, icon, onClose, onLinkClick, ...props }) => {
+    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: onClose, 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';
 
@@ -1606,12 +1566,9 @@ const SmallDescription = styled('p')(({ theme }) => ({
     textOverflow: 'ellipsis',
 }));
 const LargeStyledCard = styled(MuiCard, {
-    shouldForwardProp: prop => prop !== 'cardState' && prop !== 'cardTheme',
-})(({ cardState = 'default', cardTheme = 'light' }) => {
+    shouldForwardProp: prop => prop !== 'disabled' && prop !== 'cardTheme',
+})(({ disabled = false, 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];
@@ -1628,15 +1585,24 @@ const LargeStyledCard = styled(MuiCard, {
         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',
+        border: `1px solid ${defaultBorderColor}`,
+        boxShadow: 'none',
         overflow: 'hidden',
-        ...(isFocused && focusRingStyles),
+        cursor: 'pointer',
+        transition: 'border-color 0.2s, box-shadow 0.2s',
+        '&:hover': {
+            borderColor: activeBorderColor,
+            boxShadow: activeShadow,
+        },
+        '&:active': {
+            borderColor: activeBorderColor,
+            boxShadow: activeShadow,
+        },
         '&:focus-visible': {
-            borderColor: isLight ? semanticColors.buttons.primary.default : colors.digitalGreen[300],
+            borderColor: activeBorderColor,
             ...focusRingStyles,
         },
-        ...(isDisabled && {
+        ...(disabled && {
             opacity: 0.5,
             pointerEvents: 'none',
             cursor: 'not-allowed',
@@ -1698,9 +1664,8 @@ const LargeButtonsRow = styled('div')({
 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 = ({ state = 'default', cardTheme = 'light', showIcon = true, showGel = true, showButtons = true, icon, gel, title, children, actions, onClick, ...props }) => {
-    const isDisabled = state === 'disabled';
-    return (jsxs(LargeStyledCard, { cardState: state, cardTheme: cardTheme, onClick: isDisabled ? undefined : onClick, tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || 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 })] }));
+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) => {
@@ -1786,6 +1751,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}`]: {
@@ -1836,7 +1802,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
@@ -1992,9 +1958,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 }) => {
@@ -5663,17 +5629,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',
@@ -5718,6 +5686,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',
         },
@@ -5735,9 +5707,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,
+            },
         },
     };
 });
@@ -5745,7 +5720,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
@@ -5785,9 +5759,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 }));