@moderneinc/neo-styled-components 2.5.0-next.f787ac → 2.5.0-next.fbda18

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { semanticColors, colors, spacing, typography, borderRadius, shadows } from '@moderneinc/neo-design';
+import { shadows, semanticColors, colors, spacing, typography, borderRadius } from '@moderneinc/neo-design';
 import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
@@ -60,21 +60,39 @@ import Switch, { switchClasses } from '@mui/material/Switch';
 import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
 import ToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 
+const focusRingShadow$2 = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Avatar variant type without global augmentation
 const StyledAvatar = styled(Avatar, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'variant',
 })(({ theme, size = 'medium', variant = 'circular' }) => ({
+    boxSizing: 'border-box',
     borderRadius: borderRadius.full,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     fontWeight: typography.fontWeight.regular,
     lineHeight: 1.5,
-    // Size variants
-    ...(size === 'small' && {
+    // Size variants — dimensions match Figma bounding boxes (border-box)
+    ...(size === 'small' &&
+        variant === 'circular' && {
+        width: spacing.spacing_4,
+        height: spacing.spacing_4,
+        fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    }),
+    ...(size === 'small' &&
+        variant === 'initials' && {
         width: spacing.spacing_2_1_2,
         height: spacing.spacing_2_1_2,
         fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     }),
-    ...(size === 'medium' && {
+    // Medium circular fills its AvatarContainer (container owns the 44px dimension)
+    ...(size === 'medium' &&
+        variant === 'circular' && {
+        width: '100%',
+        height: '100%',
+        fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    }),
+    // Medium initials has no container, so it owns its 44px dimension
+    ...(size === 'medium' &&
+        variant === 'initials' && {
         width: spacing.spacing_5_1_2,
         height: spacing.spacing_5_1_2,
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
@@ -90,20 +108,29 @@ const StyledAvatar = styled(Avatar, {
         backgroundColor: 'transparent',
         border: `2px solid ${semanticColors.surfaces.white}`,
     }),
+    '&:focus-visible': {
+        outline: 'none',
+        boxShadow: focusRingShadow$2,
+    },
 }));
 const AvatarContainer = styled(Box)(({ size = 'medium' }) => ({
+    boxSizing: 'border-box',
     ...(size === 'medium' && {
         width: spacing.spacing_5_1_2,
         height: spacing.spacing_5_1_2,
         backgroundColor: semanticColors.surfaces.white,
         borderRadius: borderRadius.full,
-        padding: spacing.spacing_1_2,
+        padding: spacing.spacing_1_4,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
         boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
     }),
+    '&:focus-within': {
+        outline: 'none',
+        boxShadow: focusRingShadow$2,
+    },
 }));
 /**
  * NeoAvatar - User avatar component based on MUI Avatar
@@ -112,8 +139,9 @@ const AvatarContainer = styled(Box)(({ size = 'medium' }) => ({
  *
  * Figma Props Mapping:
  * - Figma Type "Initials" → variant="initials", size="small" (20px)
- * - Figma Type "Small" → variant="circular", size="small" (20px with image)
+ * - Figma Type "Small" → variant="circular", size="small" (32px with image)
  * - Figma Type "Medium" → variant="circular", size="medium" (44px white container with image)
+ * - State: Focus → CSS :focus-visible ring (2px white inner + 4px blue outer)
  * - State: Hover (tooltip) → Wrap component with MUI Tooltip
  *
  * Usage:
@@ -1437,7 +1465,7 @@ const LabelContainer$4 = styled('div')(({ size = 'medium' }) => ({
     flexDirection: 'column',
     gap: size === 'medium' ? 2 : 0,
 }));
-const Label$3 = styled('span')(({ theme, size = 'medium' }) => ({
+const Label$4 = styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'xs'
         ? typography.fontSize.xs
         : size === 'small'
@@ -1457,6 +1485,8 @@ const HelperText$2 = styled('span')(({ theme, size = 'medium' }) => ({
     lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
     color: semanticColors.typography.bodySecondary,
 }));
+// Figma-exact border radius for xs checkbox — no matching design token
+const FIGMA_XS_BORDER_RADIUS = 1;
 const StyledCheckbox = styled(Checkbox, {
     shouldForwardProp: prop => prop !== 'size',
 })(({ size = 'medium' }) => {
@@ -1464,8 +1494,7 @@ const StyledCheckbox = styled(Checkbox, {
     const sizeConfig = {
         xs: {
             size: 12,
-            // biome-ignore plugin: Figma-exact 1px for xs — no matching token
-            borderRadius: 1, // From Figma: 1px for xs
+            borderRadius: FIGMA_XS_BORDER_RADIUS,
         },
         small: {
             size: 16,
@@ -1586,7 +1615,7 @@ const NeoCheckbox = ({ size = 'medium', label, helperText, disabled, icon, check
         return (jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }));
     }
     // With label, wrap in container for proper layout
-    return (jsxs(CheckboxContainer, { disabled: disabled, children: [jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }), jsxs(LabelContainer$4, { size: size, children: [label && jsx(Label$3, { size: size, children: label }), helperText && jsx(HelperText$2, { size: size, children: helperText })] })] }));
+    return (jsxs(CheckboxContainer, { disabled: disabled, children: [jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }), jsxs(LabelContainer$4, { size: size, children: [label && jsx(Label$4, { size: size, children: label }), helperText && jsx(HelperText$2, { size: size, children: helperText })] })] }));
 };
 NeoCheckbox.displayName = 'NeoCheckbox';
 
@@ -1632,7 +1661,9 @@ const StyledButtonBase = styled(ButtonBase, {
         width: isMultiline ? '100%' : 'fit-content',
         maxWidth: isMultiline ? '100%' : 'none',
         overflowX: isMultiline ? 'auto' : 'visible',
-        padding: isMultiline && 'paddingMultiline' in sizeStyles ? sizeStyles.paddingMultiline : sizeStyles.paddingSingleLine,
+        padding: isMultiline && 'paddingMultiline' in sizeStyles
+            ? sizeStyles.paddingMultiline
+            : sizeStyles.paddingSingleLine,
         paddingRight: isMultiline ? theme.spacing(7) : undefined, // Extra space for copy button in multiline only
         fontSize: sizeStyles.fontSize,
         fontFamily: typography.fontFamily.code,
@@ -1756,13 +1787,14 @@ const ColumnItemContainer = styled(Box)(({ theme }) => ({
     paddingLeft: theme.spacing(0.75),
     paddingRight: theme.spacing(0.75),
 }));
+// Figma-exact border radius for menu items — no matching design token
+const MENU_ITEM_BORDER_RADIUS = 6;
 const MenuItemContent$1 = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: theme.spacing(1),
     padding: theme.spacing(1),
-    // biome-ignore plugin: no exact token for 6px
-    borderRadius: 6,
+    borderRadius: MENU_ITEM_BORDER_RADIUS,
     width: '100%',
     '&:hover': {
         backgroundColor: semanticColors.surfaces.listHover,
@@ -1906,7 +1938,7 @@ const LabelContainer$3 = styled('div')({
     gap: spacing.spacing_1,
     minWidth: 0,
 });
-const Label$2 = styled('span')({
+const Label$3 = styled('span')({
     color: semanticColors.icons.default,
     flexShrink: 0,
 });
@@ -1958,7 +1990,7 @@ const Shortcut = styled('span')(({ theme }) => ({
  * ```
  */
 const NeoMenuItem = ({ icon, shortcut, secondaryText, children, ...props }) => {
-    return (jsx(StyledMenuItem, { ...props, children: jsxs(MenuItemContent, { children: [icon && jsx(IconWrapper$1, { children: icon }), jsxs(LabelContainer$3, { children: [jsx(Label$2, { children: children }), secondaryText && jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsx(Shortcut, { children: shortcut })] }) }));
+    return (jsx(StyledMenuItem, { ...props, children: jsxs(MenuItemContent, { children: [icon && jsx(IconWrapper$1, { children: icon }), jsxs(LabelContainer$3, { children: [jsx(Label$3, { children: children }), secondaryText && jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsx(Shortcut, { children: shortcut })] }) }));
 };
 NeoMenuItem.displayName = 'NeoMenuItem';
 
@@ -2474,111 +2506,85 @@ function NeoDataGridColumnsButton() {
 }
 NeoDataGridColumnsButton.displayName = 'NeoDataGridColumnsButton';
 
-const StyledChip$1 = styled(Chip)(({ theme, size, variant, color }) => ({
-    padding: 0,
-    borderRadius: borderRadius.full,
-    fontSize: theme.typography.pxToRem(typography.fontSize.xs),
-    fontWeight: typography.fontWeight.medium,
-    // Size variants
-    ...(size === 'small' && {
+const sizeStyles = {
+    small: {
         height: 16,
         paddingLeft: spacing.spacing_1_2, // 4px
         paddingRight: spacing.spacing_1_2, // 4px
-    }),
-    ...(size === 'medium' && {
+    },
+    medium: {
         height: 18,
         paddingLeft: spacing.spacing_3_4, // 6px
         paddingRight: spacing.spacing_3_4, // 6px
-    }),
-    ...(size === 'large' && {
+    },
+    large: {
         height: 20,
         paddingLeft: spacing.spacing_3_4, // 6px
         paddingRight: spacing.spacing_3_4, // 6px
-    }),
-    [`& .${chipClasses.label}`]: {
-        padding: 0,
     },
-    // Outlined variant (light type in Figma) - Neutral/Default
-    ...(variant === 'outlined' &&
-        color === 'default' && {
+};
+const outlinedColorStyles = {
+    default: {
         backgroundColor: semanticColors.status.neutral.light,
         color: semanticColors.status.neutral.dark,
-        borderColor: colors.grey[200], // base/grey/200
-    }),
-    // Outlined variant - Error
-    ...(variant === 'outlined' &&
-        color === 'error' && {
+        borderColor: colors.grey[200],
+    },
+    error: {
         backgroundColor: semanticColors.status.error.light,
         color: semanticColors.status.error.dark,
-        borderColor: colors.red[100], // base/red/100
-    }),
-    // Outlined variant - Warning
-    ...(variant === 'outlined' &&
-        color === 'warning' && {
+        borderColor: colors.red[100],
+    },
+    warning: {
         backgroundColor: semanticColors.status.warning.light,
         color: semanticColors.status.warning.dark,
-        borderColor: colors.orange[100], // base/orange/100
-    }),
-    // Outlined variant - Success
-    ...(variant === 'outlined' &&
-        color === 'success' && {
+        borderColor: colors.orange[100],
+    },
+    success: {
         backgroundColor: semanticColors.status.success.light,
         color: semanticColors.status.success.dark,
-        borderColor: 'rgba(94, 196, 111, 0.24)', // rgba from Figma
-    }),
-    // Outlined variant - Info
-    ...(variant === 'outlined' &&
-        color === 'info' && {
+        borderColor: 'rgba(94, 196, 111, 0.24)',
+    },
+    info: {
         backgroundColor: semanticColors.status.info.light,
         color: semanticColors.status.info.dark,
-        borderColor: colors.digitalBlue[100], // base/digital-blue/100
-    }),
-    // Outlined variant - Violet
-    ...(variant === 'outlined' &&
-        color === 'violet' && {
+        borderColor: colors.digitalBlue[100],
+    },
+    violet: {
         backgroundColor: `${colors.violet[100]}66`, // rgba(235,213,241,0.4)
         color: colors.violet[600],
-        borderColor: colors.violet[100], // base/violet/100
-    }),
-    // Filled variant (dark type in Figma) - Neutral/Default
-    ...(variant === 'filled' &&
-        color === 'default' && {
-        backgroundColor: semanticColors.status.neutral.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Error
-    ...(variant === 'filled' &&
-        color === 'error' && {
-        backgroundColor: semanticColors.status.error.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Warning
-    ...(variant === 'filled' &&
-        color === 'warning' && {
-        backgroundColor: semanticColors.status.warning.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Success
-    ...(variant === 'filled' &&
-        color === 'success' && {
-        backgroundColor: semanticColors.status.success.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Info
-    ...(variant === 'filled' &&
-        color === 'info' && {
-        backgroundColor: semanticColors.status.info.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Violet
+        borderColor: colors.violet[100],
+    },
+    beta: {
+        backgroundColor: colors.digitalBlue[100],
+        color: colors.digitalBlue[400],
+        borderColor: colors.digitalBlue[100],
+    },
+};
+const filledColorStyles = {
+    default: semanticColors.status.neutral.medium,
+    error: semanticColors.status.error.medium,
+    warning: semanticColors.status.warning.medium,
+    success: semanticColors.status.success.medium,
+    info: semanticColors.status.info.medium,
+    violet: colors.violet[500],
+    beta: colors.digitalBlue[300],
+};
+const StyledChip$1 = styled(Chip)(({ theme, size, variant, color }) => ({
+    padding: 0,
+    borderRadius: borderRadius.full,
+    fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    fontWeight: typography.fontWeight.medium,
+    ...(size && sizeStyles[size]),
+    [`& .${chipClasses.label}`]: {
+        padding: 0,
+    },
+    ...(variant === 'outlined' &&
+        color &&
+        outlinedColorStyles[color]),
     ...(variant === 'filled' &&
-        color === 'violet' && {
-        backgroundColor: colors.violet[500],
+        color &&
+        color in filledColorStyles && {
+        backgroundColor: filledColorStyles[color],
         color: theme.palette.common.white,
         border: 'none',
     }),
@@ -2591,7 +2597,7 @@ const StyledChip$1 = styled(Chip)(({ theme, size, variant, color }) => ({
  * Figma Props Mapping:
  * - m (sm|md|lg) → size (small|medium|large)
  * - type (light|dark) → variant (outlined|filled)
- * - state (Neutral|Error|Warning|Success|Info|Violet) → color (default|error|warning|success|info|violet)
+ * - 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 }) => {
@@ -3892,6 +3898,31 @@ const NeoFooter = ({ variant = 'pagination', showShadow = false, loading = false
 };
 NeoFooter.displayName = 'NeoFooter';
 
+const customProps$1 = ['iconSize'];
+const StyledIconWrapper = styled('div', {
+    shouldForwardProp: prop => !customProps$1.includes(prop),
+})(({ iconSize }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: iconSize,
+    height: iconSize,
+    flexShrink: 0,
+    '& svg': {
+        width: iconSize,
+        height: iconSize,
+    },
+}));
+/**
+ * NeoIconWrapper - Flex-centered container that sizes icons
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4061-9955
+ */
+const NeoIconWrapper = ({ size = 20, children, ...props }) => {
+    return (jsx(StyledIconWrapper, { iconSize: size, ...props, children: children }));
+};
+NeoIconWrapper.displayName = 'NeoIconWrapper';
+
 /**
  * NeoInfiniteScrollGrid - DataGrid with infinite scroll and load-more functionality
  *
@@ -4526,11 +4557,11 @@ NeoListItemButton.displayName = 'NeoListItemButton';
  * Focus ring box-shadow using Neo design tokens
  * Combines focusWhite1 (inner white ring) and focusBlue2 (outer blue ring)
  */
-const focusRingShadow = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
+const focusRingShadow$1 = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
 /**
  * Card box-shadow using Neo design tokens for hover and selected states
  */
-const activeShadow = `${shadows.card.x}px ${shadows.card.y}px ${shadows.card.blur}px ${shadows.card.spread}px ${shadows.card.shadow}`;
+const activeShadow$1 = `${shadows.card.x}px ${shadows.card.y}px ${shadows.card.blur}px ${shadows.card.spread}px ${shadows.card.shadow}`;
 /**
  * Styled Card component with Neo design tokens
  */
@@ -4546,16 +4577,16 @@ const StyledCard = styled(MuiCard, {
     backgroundColor: semanticColors.surfaces.card,
     border: `1px solid ${selected ? semanticColors.border.tabActive : semanticColors.border.card}`,
     borderRadius: borderRadius.xS,
-    boxShadow: selected ? activeShadow : 'none',
+    boxShadow: selected ? activeShadow$1 : 'none',
     transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
     cursor: 'pointer',
     '&:hover': {
         borderColor: semanticColors.border.tabActive,
-        boxShadow: activeShadow,
+        boxShadow: activeShadow$1,
     },
     '&:focus-visible': {
         borderColor: semanticColors.border.tabActive,
-        boxShadow: focusRingShadow,
+        boxShadow: focusRingShadow$1,
         outline: 'none',
     },
     ...(disabled && {
@@ -4615,7 +4646,7 @@ const Title = styled('p')(({ theme }) => ({
 /**
  * Description text
  */
-const Description = styled('p')(({ theme }) => ({
+const Description$1 = styled('p')(({ theme }) => ({
     margin: 0,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs), // 12px
     fontWeight: typography.fontWeight.regular, // 400
@@ -4670,10 +4701,131 @@ const Description = styled('p')(({ theme }) => ({
  * - typography.fontWeight.regular (400) - Description
  */
 const NeoMarketplaceCard = ({ logo, recipeCount, title, description, selected = false, disabled = false, onClick, ...props }) => {
-    return (jsxs(StyledCard, { selected: selected, disabled: disabled, onClick: disabled ? undefined : onClick, tabIndex: disabled ? -1 : 0, role: "button", "aria-disabled": disabled, "aria-pressed": selected, ...props, children: [jsxs(CardHeader, { children: [jsx(LogoContainer, { children: logo }), jsx(RecipeCount, { children: recipeCount })] }), jsxs(CardContent, { children: [jsx(Title, { children: title }), jsx(Description, { children: description })] })] }));
+    return (jsxs(StyledCard, { selected: selected, disabled: disabled, onClick: disabled ? undefined : onClick, tabIndex: disabled ? -1 : 0, role: "button", "aria-disabled": disabled, "aria-pressed": selected, ...props, children: [jsxs(CardHeader, { children: [jsx(LogoContainer, { children: logo }), jsx(RecipeCount, { children: recipeCount })] }), jsxs(CardContent, { children: [jsx(Title, { children: title }), jsx(Description$1, { children: description })] })] }));
 };
 NeoMarketplaceCard.displayName = 'NeoMarketplaceCard';
 
+const focusRingShadow = `${shadows.focusWhite1.x}px ${shadows.focusWhite1.y}px ${shadows.focusWhite1.blur}px ${shadows.focusWhite1.spread}px ${shadows.focusWhite1.shadow}, ${shadows.focusBlue2.x}px ${shadows.focusBlue2.y}px ${shadows.focusBlue2.blur}px ${shadows.focusBlue2.spread}px ${shadows.focusBlue2.shadow}`;
+const activeShadow = `${shadows.card.x}px ${shadows.card.y}px ${shadows.card.blur}px ${shadows.card.spread}px ${shadows.card.shadow}`;
+const StyledLargeCard = styled(MuiCard, {
+    shouldForwardProp: prop => prop !== 'cardState' && prop !== 'cardTheme',
+})(({ cardState = 'default', cardTheme = 'light' }) => {
+    const isLight = cardTheme === 'light';
+    const isActive = cardState === 'active';
+    const isDisabled = cardState === 'disabled';
+    const isFocused = cardState === 'focused';
+    const activeBorderColor = isLight ? semanticColors.border.tabActive : colors.digitalGreen[300];
+    const defaultBorderColor = isLight
+        ? semanticColors.border.card
+        : `${semanticColors.border.card}80`;
+    return {
+        width: 340,
+        height: 162,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        padding: spacing.spacing_2,
+        borderRadius: borderRadius.xS,
+        backgroundColor: isLight ? semanticColors.surfaces.card : colors.grey[800],
+        border: `1px solid ${isActive || isFocused ? activeBorderColor : defaultBorderColor}`,
+        boxShadow: isActive ? activeShadow : isFocused ? focusRingShadow : 'none',
+        overflow: 'hidden',
+        '&:focus-visible': {
+            borderColor: isLight ? semanticColors.border.tabActive : colors.digitalGreen[300],
+            boxShadow: focusRingShadow,
+            outline: 'none',
+        },
+        ...(isDisabled && {
+            opacity: 0.5,
+            pointerEvents: 'none',
+            cursor: 'not-allowed',
+        }),
+    };
+});
+const TopSection = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.spacing_2,
+    alignItems: 'flex-start',
+    width: '100%',
+    flexShrink: 0,
+});
+const HeaderRow = styled('div')({
+    display: 'flex',
+    gap: spacing.spacing_1,
+    alignItems: 'center',
+    flexShrink: 0,
+});
+const HeaderSlot = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 20,
+    height: 20,
+    flexShrink: 0,
+});
+const HeaderTitle = styled('span', {
+    shouldForwardProp: prop => prop !== 'cardTheme',
+})(({ cardTheme = 'light' }) => ({
+    fontFamily: `${typography.fontFamily.heading}, sans-serif`,
+    fontWeight: typography.fontWeight.semiBold,
+    fontSize: typography.fontSize.h6,
+    lineHeight: 1.4,
+    color: cardTheme === 'light' ? colors.grey[800] : semanticColors.surfaces.white,
+    flexShrink: 0,
+}));
+const Description = styled('p', {
+    shouldForwardProp: prop => prop !== 'cardTheme',
+})(({ cardTheme = 'light' }) => ({
+    fontFamily: `${typography.fontFamily.body}, sans-serif`,
+    fontWeight: typography.fontWeight.regular,
+    fontSize: typography.fontSize.xs,
+    lineHeight: 1.5,
+    color: cardTheme === 'light' ? colors.grey[800] : semanticColors.surfaces.white,
+    margin: 0,
+    minWidth: '100%',
+    wordWrap: 'break-word',
+}));
+const ButtonsRow = styled('div')({
+    display: 'flex',
+    gap: spacing.spacing_3,
+    alignItems: 'flex-start',
+    flexShrink: 0,
+});
+/**
+ * NeoMarketplaceLargeCard - A large marketplace card with state and theme variants
+ *
+ * A 340x162px card with optional icon, gel brand icon, title, description, and action buttons.
+ * Icon, gel, and title display inline in a header row.
+ * Supports 4 states (default, active, disabled, focused) and 2 themes (light, dark).
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=5925-11
+ *
+ * Figma Props Mapping:
+ * - Property 1 → state (default/active/disabled/focused)
+ * - Property 2 → cardTheme (light/dark)
+ * - Show Icon → showIcon
+ * - Show gel → showGel
+ * - show buttons → showButtons
+ *
+ * Design Tokens Used:
+ * - semanticColors.surfaces.card (#ffffff) - Light theme background
+ * - colors.grey[800] (#1f2937) - Dark theme background
+ * - semanticColors.border.card (#d1d5db) - Default border (50% opacity on dark)
+ * - semanticColors.border.tabActive (#2f42ff) - Active/focused border (light theme)
+ * - colors.digitalGreen[300] (#88fe9b) - Active/focused border (dark theme)
+ * - borderRadius.xS (4px) - Corner radius
+ * - shadows.focusWhite1 + shadows.focusBlue2 - Focus ring
+ * - shadows.card - Active state shadow
+ */
+const NeoMarketplaceLargeCard = ({ state = 'default', cardTheme = 'light', showIcon = true, showGel = true, showButtons = true, icon, gel, title, children, actions, onClick, ...props }) => {
+    const isDisabled = state === 'disabled';
+    return (jsxs(StyledLargeCard, { cardState: state, cardTheme: cardTheme, onClick: isDisabled ? undefined : onClick, tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled || undefined, ...props, children: [jsxs(TopSection, { children: [jsxs(HeaderRow, { children: [showIcon && icon && jsx(HeaderSlot, { children: icon }), showGel && gel && jsx(HeaderSlot, { children: gel }), title && jsx(HeaderTitle, { cardTheme: cardTheme, children: title })] }), children && jsx(Description, { cardTheme: cardTheme, children: children })] }), showButtons && actions && jsx(ButtonsRow, { children: actions })] }));
+};
+NeoMarketplaceLargeCard.displayName = 'NeoMarketplaceLargeCard';
+
 const StyledMenu = styled(Menu)(({ theme }) => ({
     [`& .${paperClasses.root}`]: {
         backgroundColor: semanticColors.surfaces.white,
@@ -4917,6 +5069,87 @@ const NeoModalFooter = ({ leadingContent, children }) => {
 };
 NeoModalFooter.displayName = 'NeoModalFooter';
 
+const customProps = ['selected'];
+const StyledRoot = styled(ButtonBase, {
+    shouldForwardProp: prop => !customProps.includes(prop),
+})(({ selected }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.spacing_1_4, // 2px
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: spacing.spacing_1, // 8px
+    paddingBottom: spacing.spacing_1, // 8px
+    paddingLeft: spacing.spacing_1_2, // 4px
+    paddingRight: spacing.spacing_1_2, // 4px
+    borderRadius: borderRadius.xS, // 4px
+    width: 95,
+    cursor: 'pointer',
+    textDecoration: 'none',
+    '&:hover .neo-nav-icon-padding': {
+        backgroundColor: semanticColors.buttons.secondary.hoverBackground, // #F2F3FF
+    },
+    '&:hover .neo-nav-label': {
+        color: semanticColors.buttons.primary.hover, // #1E2EC2
+    },
+    ...(selected && {
+        '& .neo-nav-icon-padding': {
+            backgroundColor: `${colors.digitalBlue[100]}BF`, // rgba(220,224,255,0.75)
+        },
+        '& .neo-nav-label': {
+            color: semanticColors.buttons.primary.pressed, // #131E7A
+            fontWeight: typography.fontWeight.semiBold,
+        },
+        '&:hover .neo-nav-icon-padding': {
+            backgroundColor: `${colors.digitalBlue[100]}BF`,
+        },
+        '&:hover .neo-nav-label': {
+            color: semanticColors.buttons.primary.pressed,
+        },
+    }),
+}));
+const IconPadding = styled('span')({
+    display: 'flex',
+    alignItems: 'center',
+    padding: spacing.spacing_1, // 8px
+    borderRadius: spacing.spacing_1, // 8px
+    transition: 'background-color 150ms',
+});
+const Label$2 = styled('span')(({ theme }) => ({
+    fontFamily: typography.fontFamily.body,
+    fontWeight: typography.fontWeight.regular,
+    fontSize: theme.typography.pxToRem(10),
+    lineHeight: 1.2,
+    textAlign: 'center',
+    color: semanticColors.typography.navigation.default, // #1F2937
+    width: '100%',
+    transition: 'color 150ms',
+}));
+const TagPill = styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 18,
+    paddingLeft: spacing.spacing_3_4, // 6px
+    paddingRight: spacing.spacing_3_4, // 6px
+    borderRadius: borderRadius.full,
+    backgroundColor: colors.digitalBlue[300], // #8D99FF
+    color: semanticColors.typography.tooltip, // white
+    fontFamily: typography.fontFamily.body,
+    fontWeight: typography.fontWeight.medium,
+    fontSize: theme.typography.pxToRem(typography.fontSize.xs), // 12px
+    lineHeight: 1,
+}));
+/**
+ * NeoNavigationItem - Vertical navigation item with icon, label, and optional tag
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
+ */
+const NeoNavigationItem = ({ icon, label, selected = false, tag, children, ...props }) => {
+    return (jsxs(StyledRoot, { selected: selected, disableRipple: true, ...props, children: [jsx(IconPadding, { className: "neo-nav-icon-padding", children: icon }), label && jsx(Label$2, { className: "neo-nav-label", children: label }), tag && jsx(TagPill, { children: tag }), children] }));
+};
+NeoNavigationItem.displayName = 'NeoNavigationItem';
+
 /**
  * Sticky header wrapper - sticks to top when scrolling
  */
@@ -6212,6 +6445,8 @@ const NeoTooltip = ({ variant = 'light', title, description, children, arrow = f
 };
 NeoTooltip.displayName = 'NeoTooltip';
 
+// Figma-exact border radius for toggle buttons — no matching design token
+const TOGGLE_BUTTON_BORDER_RADIUS = 14;
 const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
     backgroundColor: colors.grey[50],
     padding: theme.spacing(0.625, 0.875),
@@ -6219,17 +6454,14 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
     gap: 0,
     [`& .${toggleButtonGroupClasses.grouped}`]: {
         border: 'none',
-        // biome-ignore plugin: no exact token for 14px
-        borderRadius: 14,
+        borderRadius: TOGGLE_BUTTON_BORDER_RADIUS,
         margin: 0,
         '&:not(:first-of-type)': {
-            // biome-ignore plugin: no exact token for 14px
-            borderRadius: 14,
+            borderRadius: TOGGLE_BUTTON_BORDER_RADIUS,
             marginLeft: 0,
         },
         '&:not(:last-of-type)': {
-            // biome-ignore plugin: no exact token for 14px
-            borderRadius: 14,
+            borderRadius: TOGGLE_BUTTON_BORDER_RADIUS,
         },
     },
 }));
@@ -6282,5 +6514,5 @@ NeoTypologyControl.displayName = 'NeoTypologyControl';
 
 const version = '0.0.0-development';
 
-export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoIconButton, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
+export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonGroup, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoFilterChip, NeoFooter, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
 //# sourceMappingURL=index.esm.js.map