@moderneinc/neo-styled-components 2.5.0-next.fd6db5 → 2.5.0-next.fefc86

package/dist/index.js

@@ -62,21 +62,39 @@ var Switch = require('@mui/material/Switch');
 var ToggleButton = require('@mui/material/ToggleButton');
 var ToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
 
+const focusRingShadow$2 = `${neoDesign.shadows.focusWhite1.x}px ${neoDesign.shadows.focusWhite1.y}px ${neoDesign.shadows.focusWhite1.blur}px ${neoDesign.shadows.focusWhite1.spread}px ${neoDesign.shadows.focusWhite1.shadow}, ${neoDesign.shadows.focusBlue2.x}px ${neoDesign.shadows.focusBlue2.y}px ${neoDesign.shadows.focusBlue2.blur}px ${neoDesign.shadows.focusBlue2.spread}px ${neoDesign.shadows.focusBlue2.shadow}`;
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Avatar variant type without global augmentation
 const StyledAvatar = styles.styled(Avatar, {
     shouldForwardProp: prop => prop !== 'size' && prop !== 'variant',
 })(({ theme, size = 'medium', variant = 'circular' }) => ({
+    boxSizing: 'border-box',
     borderRadius: neoDesign.borderRadius.full,
     fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
     fontWeight: neoDesign.typography.fontWeight.regular,
     lineHeight: 1.5,
-    // Size variants
-    ...(size === 'small' && {
+    // Size variants — dimensions match Figma bounding boxes (border-box)
+    ...(size === 'small' &&
+        variant === 'circular' && {
+        width: neoDesign.spacing.spacing_4,
+        height: neoDesign.spacing.spacing_4,
+        fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
+    }),
+    ...(size === 'small' &&
+        variant === 'initials' && {
         width: neoDesign.spacing.spacing_2_1_2,
         height: neoDesign.spacing.spacing_2_1_2,
         fontSize: theme.typography.pxToRem(neoDesign.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(neoDesign.typography.fontSize.sm),
+    }),
+    // Medium initials has no container, so it owns its 44px dimension
+    ...(size === 'medium' &&
+        variant === 'initials' && {
         width: neoDesign.spacing.spacing_5_1_2,
         height: neoDesign.spacing.spacing_5_1_2,
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
@@ -92,20 +110,29 @@ const StyledAvatar = styles.styled(Avatar, {
         backgroundColor: 'transparent',
         border: `2px solid ${neoDesign.semanticColors.surfaces.white}`,
     }),
+    '&:focus-visible': {
+        outline: 'none',
+        boxShadow: focusRingShadow$2,
+    },
 }));
 const AvatarContainer = styles.styled(Box)(({ size = 'medium' }) => ({
+    boxSizing: 'border-box',
     ...(size === 'medium' && {
         width: neoDesign.spacing.spacing_5_1_2,
         height: neoDesign.spacing.spacing_5_1_2,
         backgroundColor: neoDesign.semanticColors.surfaces.white,
         borderRadius: neoDesign.borderRadius.full,
-        padding: neoDesign.spacing.spacing_1_2,
+        padding: neoDesign.spacing.spacing_1_4,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
         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}`,
     }),
+    '&:focus-within': {
+        outline: 'none',
+        boxShadow: focusRingShadow$2,
+    },
 }));
 /**
  * NeoAvatar - User avatar component based on MUI Avatar
@@ -114,8 +141,9 @@ const AvatarContainer = styles.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:
@@ -149,7 +177,7 @@ const NeoAvatar = ({ size = 'medium', variant = 'circular', ...props }) => {
 };
 NeoAvatar.displayName = 'NeoAvatar';
 
-const StyledChip$1 = styles.styled(Chip)(({ theme }) => ({
+const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     height: 24,
     paddingTop: neoDesign.spacing.spacing_1_4,
     paddingBottom: neoDesign.spacing.spacing_1_4,
@@ -236,7 +264,7 @@ const StyledChip$1 = styles.styled(Chip)(({ theme }) => ({
  * - Label → label prop
  */
 const NeoBadge = (props) => {
-    return jsxRuntime.jsx(StyledChip$1, { ...props });
+    return jsxRuntime.jsx(StyledChip$2, { ...props });
 };
 NeoBadge.displayName = 'NeoBadge';
 
@@ -1459,6 +1487,8 @@ const HelperText$2 = styles.styled('span')(({ theme, size = 'medium' }) => ({
     lineHeight: size === 'xs' ? 1.5 : size === 'small' ? 1.4 : 1.5,
     color: neoDesign.semanticColors.typography.bodySecondary,
 }));
+// Figma-exact border radius for xs checkbox — no matching design token
+const FIGMA_XS_BORDER_RADIUS = 1;
 const StyledCheckbox = styles.styled(Checkbox, {
     shouldForwardProp: prop => prop !== 'size',
 })(({ size = 'medium' }) => {
@@ -1466,8 +1496,7 @@ const StyledCheckbox = styles.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,
@@ -1634,7 +1663,9 @@ const StyledButtonBase = styles.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: neoDesign.typography.fontFamily.code,
@@ -1758,13 +1789,14 @@ const ColumnItemContainer = styles.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 = styles.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: neoDesign.semanticColors.surfaces.listHover,
@@ -2476,111 +2508,85 @@ function NeoDataGridColumnsButton() {
 }
 NeoDataGridColumnsButton.displayName = 'NeoDataGridColumnsButton';
 
-const StyledChip = styles.styled(Chip)(({ theme, size, variant, color }) => ({
-    padding: 0,
-    borderRadius: neoDesign.borderRadius.full,
-    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
-    fontWeight: neoDesign.typography.fontWeight.medium,
-    // Size variants
-    ...(size === 'small' && {
+const sizeStyles = {
+    small: {
         height: 16,
         paddingLeft: neoDesign.spacing.spacing_1_2, // 4px
         paddingRight: neoDesign.spacing.spacing_1_2, // 4px
-    }),
-    ...(size === 'medium' && {
+    },
+    medium: {
         height: 18,
         paddingLeft: neoDesign.spacing.spacing_3_4, // 6px
         paddingRight: neoDesign.spacing.spacing_3_4, // 6px
-    }),
-    ...(size === 'large' && {
+    },
+    large: {
         height: 20,
         paddingLeft: neoDesign.spacing.spacing_3_4, // 6px
         paddingRight: neoDesign.spacing.spacing_3_4, // 6px
-    }),
-    [`& .${Chip.chipClasses.label}`]: {
-        padding: 0,
     },
-    // Outlined variant (light type in Figma) - Neutral/Default
-    ...(variant === 'outlined' &&
-        color === 'default' && {
+};
+const outlinedColorStyles = {
+    default: {
         backgroundColor: neoDesign.semanticColors.status.neutral.light,
         color: neoDesign.semanticColors.status.neutral.dark,
-        borderColor: neoDesign.colors.grey[200], // base/grey/200
-    }),
-    // Outlined variant - Error
-    ...(variant === 'outlined' &&
-        color === 'error' && {
+        borderColor: neoDesign.colors.grey[200],
+    },
+    error: {
         backgroundColor: neoDesign.semanticColors.status.error.light,
         color: neoDesign.semanticColors.status.error.dark,
-        borderColor: neoDesign.colors.red[100], // base/red/100
-    }),
-    // Outlined variant - Warning
-    ...(variant === 'outlined' &&
-        color === 'warning' && {
+        borderColor: neoDesign.colors.red[100],
+    },
+    warning: {
         backgroundColor: neoDesign.semanticColors.status.warning.light,
         color: neoDesign.semanticColors.status.warning.dark,
-        borderColor: neoDesign.colors.orange[100], // base/orange/100
-    }),
-    // Outlined variant - Success
-    ...(variant === 'outlined' &&
-        color === 'success' && {
+        borderColor: neoDesign.colors.orange[100],
+    },
+    success: {
         backgroundColor: neoDesign.semanticColors.status.success.light,
         color: neoDesign.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: neoDesign.semanticColors.status.info.light,
         color: neoDesign.semanticColors.status.info.dark,
-        borderColor: neoDesign.colors.digitalBlue[100], // base/digital-blue/100
-    }),
-    // Outlined variant - Violet
-    ...(variant === 'outlined' &&
-        color === 'violet' && {
+        borderColor: neoDesign.colors.digitalBlue[100],
+    },
+    violet: {
         backgroundColor: `${neoDesign.colors.violet[100]}66`, // rgba(235,213,241,0.4)
         color: neoDesign.colors.violet[600],
-        borderColor: neoDesign.colors.violet[100], // base/violet/100
-    }),
-    // Filled variant (dark type in Figma) - Neutral/Default
-    ...(variant === 'filled' &&
-        color === 'default' && {
-        backgroundColor: neoDesign.semanticColors.status.neutral.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Error
-    ...(variant === 'filled' &&
-        color === 'error' && {
-        backgroundColor: neoDesign.semanticColors.status.error.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Warning
-    ...(variant === 'filled' &&
-        color === 'warning' && {
-        backgroundColor: neoDesign.semanticColors.status.warning.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Success
-    ...(variant === 'filled' &&
-        color === 'success' && {
-        backgroundColor: neoDesign.semanticColors.status.success.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Info
-    ...(variant === 'filled' &&
-        color === 'info' && {
-        backgroundColor: neoDesign.semanticColors.status.info.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Violet
+        borderColor: neoDesign.colors.violet[100],
+    },
+    beta: {
+        backgroundColor: neoDesign.colors.digitalBlue[100],
+        color: neoDesign.colors.digitalBlue[400],
+        borderColor: neoDesign.colors.digitalBlue[100],
+    },
+};
+const filledColorStyles = {
+    default: neoDesign.semanticColors.status.neutral.medium,
+    error: neoDesign.semanticColors.status.error.medium,
+    warning: neoDesign.semanticColors.status.warning.medium,
+    success: neoDesign.semanticColors.status.success.medium,
+    info: neoDesign.semanticColors.status.info.medium,
+    violet: neoDesign.colors.violet[500],
+    beta: neoDesign.colors.digitalBlue[300],
+};
+const StyledChip$1 = styles.styled(Chip)(({ theme, size, variant, color }) => ({
+    padding: 0,
+    borderRadius: neoDesign.borderRadius.full,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    ...(size && sizeStyles[size]),
+    [`& .${Chip.chipClasses.label}`]: {
+        padding: 0,
+    },
+    ...(variant === 'outlined' &&
+        color &&
+        outlinedColorStyles[color]),
     ...(variant === 'filled' &&
-        color === 'violet' && {
-        backgroundColor: neoDesign.colors.violet[500],
+        color &&
+        color in filledColorStyles && {
+        backgroundColor: filledColorStyles[color],
         color: theme.palette.common.white,
         border: 'none',
     }),
@@ -2593,11 +2599,11 @@ const StyledChip = styles.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 }) => {
-    return jsxRuntime.jsx(StyledChip, { size: size, variant: variant, ...props });
+    return jsxRuntime.jsx(StyledChip$1, { size: size, variant: variant, ...props });
 };
 NeoTag.displayName = 'NeoTag';
 
@@ -3559,49 +3565,70 @@ const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...prop
 NeoDot.displayName = 'NeoDot';
 
 const focusRing = `${neoDesign.shadows.focusWhite1.x}px ${neoDesign.shadows.focusWhite1.y}px ${neoDesign.shadows.focusWhite1.blur}px ${neoDesign.shadows.focusWhite1.spread}px ${neoDesign.shadows.focusWhite1.shadow}, ${neoDesign.shadows.focusBlue2.x}px ${neoDesign.shadows.focusBlue2.y}px ${neoDesign.shadows.focusBlue2.blur}px ${neoDesign.shadows.focusBlue2.spread}px ${neoDesign.shadows.focusBlue2.shadow}`;
-const StyledButton = styles.styled('button', {
-    shouldForwardProp: prop => prop !== 'active',
-})(({ active }) => ({
-    display: 'inline-flex',
-    alignItems: active ? 'flex-end' : 'center',
-    gap: neoDesign.spacing.spacing_1_2,
-    padding: active ? `${neoDesign.spacing.spacing_3_4}px ${neoDesign.spacing.spacing_1_1_2}px` : `0 ${neoDesign.spacing.spacing_1_1_2}px`,
-    minHeight: 40,
-    border: `1px solid ${neoDesign.semanticColors.buttons.secondary.defaultBorder}`,
+const filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
+const StyledChip = styles.styled(Chip, {
+    shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
+})(({ theme, selected }) => ({
     borderRadius: neoDesign.borderRadius.full,
-    backgroundColor: active
-        ? neoDesign.semanticColors.buttons.secondary.hoverBackground
+    border: `1px solid ${neoDesign.semanticColors.buttons.secondary.defaultBorder}`,
+    backgroundColor: selected
+        ? neoDesign.semanticColors.buttons.secondary.pressedBackground
         : neoDesign.semanticColors.surfaces.white,
-    cursor: 'pointer',
-    fontFamily: 'inherit',
-    outline: 'none',
-    boxSizing: 'border-box',
+    minHeight: 40,
+    padding: `${neoDesign.spacing.spacing_3_4}px ${neoDesign.spacing.spacing_1_1_2}px`,
+    gap: neoDesign.spacing.spacing_1,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    lineHeight: 1,
+    color: neoDesign.semanticColors.typography.body,
+    [`& .${Chip.chipClasses.label}`]: {
+        padding: 0,
+        overflow: 'visible',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    [`& .${Chip.chipClasses.deleteIcon}`]: {
+        color: neoDesign.semanticColors.icons.default,
+        width: 24,
+        height: 24,
+        margin: 0,
+        flexShrink: 0,
+        '&:hover': {
+            color: neoDesign.semanticColors.icons.default,
+        },
+    },
     '&:hover': {
         backgroundColor: neoDesign.semanticColors.buttons.secondary.hoverBackground,
     },
-    '&:focus-visible': {
+    [`&.${Chip.chipClasses.focusVisible}`]: {
         boxShadow: focusRing,
+        backgroundColor: selected
+            ? neoDesign.semanticColors.buttons.secondary.pressedBackground
+            : neoDesign.semanticColors.surfaces.white,
     },
 }));
-const TextContent = styles.styled('span', {
-    shouldForwardProp: prop => prop !== 'active',
-})(({ active }) => ({
+const LabelContent = styles.styled('span')({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: neoDesign.spacing.spacing_1,
+});
+const TextStack = styles.styled('span')({
     display: 'flex',
     flexDirection: 'column',
     alignItems: 'flex-start',
     justifyContent: 'center',
-    gap: active ? neoDesign.spacing.spacing_1_4 : undefined,
-}));
+    gap: neoDesign.spacing.spacing_1_4,
+});
 const HeaderLabel = styles.styled('span')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xxs),
     fontWeight: neoDesign.typography.fontWeight.regular,
     lineHeight: '120%',
     color: neoDesign.semanticColors.typography.bodySecondary,
 }));
-const Label$2 = styles.styled('span')(({ theme }) => ({
+const SelectedLabel = styles.styled('span')(({ theme }) => ({
     fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
     fontWeight: neoDesign.typography.fontWeight.medium,
-    lineHeight: `${neoDesign.typography.lineHeight.xs}px`,
+    lineHeight: 1,
     color: neoDesign.semanticColors.buttons.secondary.default,
 }));
 const CountBadge = styles.styled('span')(({ theme }) => ({
@@ -3612,7 +3639,6 @@ const CountBadge = styles.styled('span')(({ theme }) => ({
     height: 16,
     padding: `0 ${neoDesign.spacing.spacing_1_2}px`,
     borderRadius: neoDesign.borderRadius.full,
-    border: `1px solid ${neoDesign.semanticColors.buttons.secondary.defaultBorder}`,
     backgroundColor: neoDesign.semanticColors.brand,
     color: neoDesign.semanticColors.surfaces.white,
     fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
@@ -3620,24 +3646,19 @@ const CountBadge = styles.styled('span')(({ theme }) => ({
     lineHeight: 1,
     boxSizing: 'border-box',
 }));
-const ChevronIcon = styles.styled(ChevronDown)({
-    width: 16,
-    height: 16,
-    color: neoDesign.semanticColors.brand,
-    flexShrink: 0,
-});
 /**
- * NeoFilterChips - Filter chip button used for filtering data
+ * NeoFilterChip - Filter chip for filtering data, based on MUI Chip.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8257-239
+ * @example
+ * <NeoFilterChip label="Status" selected selectedLabel="Active, Pending" count={2} onClear={handleClear} />
  *
- * Figma Props Mapping:
- * - Property 1 (default|hover ope|focused|Active|active focused) → active boolean + CSS states
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8257-239
  */
-const NeoFilterChips = ({ label, active = false, count = 0, onClick, ...props }) => {
-    return (jsxRuntime.jsxs(StyledButton, { type: "button", active: active, onClick: onClick, ...props, children: [jsxRuntime.jsxs(TextContent, { active: active, children: [active && jsxRuntime.jsx(HeaderLabel, { children: label }), jsxRuntime.jsx(Label$2, { children: label })] }), active && count > 0 && jsxRuntime.jsx(CountBadge, { children: count }), jsxRuntime.jsx(ChevronIcon, {})] }));
+const NeoFilterChip = ({ label, selected = false, expanded, selectedLabel, count = 0, onClear, onClick, ...props }) => {
+    const chipLabel = selected ? (jsxRuntime.jsxs(LabelContent, { children: [jsxRuntime.jsxs(TextStack, { children: [jsxRuntime.jsx(HeaderLabel, { children: label }), jsxRuntime.jsx(SelectedLabel, { children: selectedLabel ?? label })] }), count > 0 && jsxRuntime.jsx(CountBadge, { children: count })] })) : (label);
+    return (jsxRuntime.jsx(StyledChip, { label: chipLabel, selected: selected, clickable: true, onClick: onClick, onDelete: selected && onClear ? onClear : undefined, deleteIcon: jsxRuntime.jsx(X, { size: 24 }), "aria-expanded": expanded, ...props }));
 };
-NeoFilterChips.displayName = 'NeoFilterChips';
+NeoFilterChip.displayName = 'NeoFilterChip';
 
 const SpinnerWrapper = styles.styled('div')({
     width: 24,
@@ -3879,6 +3900,31 @@ const NeoFooter = ({ variant = 'pagination', showShadow = false, loading = false
 };
 NeoFooter.displayName = 'NeoFooter';
 
+const customProps$1 = ['iconSize'];
+const StyledIconWrapper = styles.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 (jsxRuntime.jsx(StyledIconWrapper, { iconSize: size, ...props, children: children }));
+};
+NeoIconWrapper.displayName = 'NeoIconWrapper';
+
 /**
  * NeoInfiniteScrollGrid - DataGrid with infinite scroll and load-more functionality
  *
@@ -4513,11 +4559,11 @@ NeoListItemButton.displayName = 'NeoListItemButton';
  * Focus ring box-shadow using Neo design tokens
  * Combines focusWhite1 (inner white ring) and focusBlue2 (outer blue ring)
  */
-const focusRingShadow = `${neoDesign.shadows.focusWhite1.x}px ${neoDesign.shadows.focusWhite1.y}px ${neoDesign.shadows.focusWhite1.blur}px ${neoDesign.shadows.focusWhite1.spread}px ${neoDesign.shadows.focusWhite1.shadow}, ${neoDesign.shadows.focusBlue2.x}px ${neoDesign.shadows.focusBlue2.y}px ${neoDesign.shadows.focusBlue2.blur}px ${neoDesign.shadows.focusBlue2.spread}px ${neoDesign.shadows.focusBlue2.shadow}`;
+const focusRingShadow$1 = `${neoDesign.shadows.focusWhite1.x}px ${neoDesign.shadows.focusWhite1.y}px ${neoDesign.shadows.focusWhite1.blur}px ${neoDesign.shadows.focusWhite1.spread}px ${neoDesign.shadows.focusWhite1.shadow}, ${neoDesign.shadows.focusBlue2.x}px ${neoDesign.shadows.focusBlue2.y}px ${neoDesign.shadows.focusBlue2.blur}px ${neoDesign.shadows.focusBlue2.spread}px ${neoDesign.shadows.focusBlue2.shadow}`;
 /**
  * Card box-shadow using Neo design tokens for hover and selected states
  */
-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 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
  */
@@ -4533,16 +4579,16 @@ const StyledCard = styles.styled(MuiCard, {
     backgroundColor: neoDesign.semanticColors.surfaces.card,
     border: `1px solid ${selected ? neoDesign.semanticColors.border.tabActive : neoDesign.semanticColors.border.card}`,
     borderRadius: neoDesign.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: neoDesign.semanticColors.border.tabActive,
-        boxShadow: activeShadow,
+        boxShadow: activeShadow$1,
     },
     '&:focus-visible': {
         borderColor: neoDesign.semanticColors.border.tabActive,
-        boxShadow: focusRingShadow,
+        boxShadow: focusRingShadow$1,
         outline: 'none',
     },
     ...(disabled && {
@@ -4602,7 +4648,7 @@ const Title = styles.styled('p')(({ theme }) => ({
 /**
  * Description text
  */
-const Description = styles.styled('p')(({ theme }) => ({
+const Description$1 = styles.styled('p')(({ theme }) => ({
     margin: 0,
     fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs), // 12px
     fontWeight: neoDesign.typography.fontWeight.regular, // 400
@@ -4657,10 +4703,131 @@ const Description = styles.styled('p')(({ theme }) => ({
  * - 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, { children: description })] })] }));
+    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 })] })] }));
 };
 NeoMarketplaceCard.displayName = 'NeoMarketplaceCard';
 
+const focusRingShadow = `${neoDesign.shadows.focusWhite1.x}px ${neoDesign.shadows.focusWhite1.y}px ${neoDesign.shadows.focusWhite1.blur}px ${neoDesign.shadows.focusWhite1.spread}px ${neoDesign.shadows.focusWhite1.shadow}, ${neoDesign.shadows.focusBlue2.x}px ${neoDesign.shadows.focusBlue2.y}px ${neoDesign.shadows.focusBlue2.blur}px ${neoDesign.shadows.focusBlue2.spread}px ${neoDesign.shadows.focusBlue2.shadow}`;
+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.border.tabActive : neoDesign.colors.digitalGreen[300];
+    const defaultBorderColor = isLight
+        ? neoDesign.semanticColors.border.card
+        : `${neoDesign.semanticColors.border.card}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 : isFocused ? focusRingShadow : 'none',
+        overflow: 'hidden',
+        '&:focus-visible': {
+            borderColor: isLight ? neoDesign.semanticColors.border.tabActive : neoDesign.colors.digitalGreen[300],
+            boxShadow: focusRingShadow,
+            outline: 'none',
+        },
+        ...(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).
+ *
+ * @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 (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 })] }));
+};
+NeoMarketplaceLargeCard.displayName = 'NeoMarketplaceLargeCard';
+
 const StyledMenu = styles.styled(Menu)(({ theme }) => ({
     [`& .${Paper.paperClasses.root}`]: {
         backgroundColor: neoDesign.semanticColors.surfaces.white,
@@ -4904,6 +5071,87 @@ const NeoModalFooter = ({ leadingContent, children }) => {
 };
 NeoModalFooter.displayName = 'NeoModalFooter';
 
+const customProps = ['selected'];
+const StyledRoot = styles.styled(ButtonBase, {
+    shouldForwardProp: prop => !customProps.includes(prop),
+})(({ selected }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: neoDesign.spacing.spacing_1_4, // 2px
+    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,
+    cursor: 'pointer',
+    textDecoration: 'none',
+    '&:hover .neo-nav-icon-padding': {
+        backgroundColor: neoDesign.semanticColors.buttons.secondary.hoverBackground, // #F2F3FF
+    },
+    '&:hover .neo-nav-label': {
+        color: neoDesign.semanticColors.buttons.primary.hover, // #1E2EC2
+    },
+    ...(selected && {
+        '& .neo-nav-icon-padding': {
+            backgroundColor: `${neoDesign.colors.digitalBlue[100]}BF`, // rgba(220,224,255,0.75)
+        },
+        '& .neo-nav-label': {
+            color: neoDesign.semanticColors.buttons.primary.pressed, // #131E7A
+            fontWeight: neoDesign.typography.fontWeight.semiBold,
+        },
+        '&:hover .neo-nav-icon-padding': {
+            backgroundColor: `${neoDesign.colors.digitalBlue[100]}BF`,
+        },
+        '&:hover .neo-nav-label': {
+            color: neoDesign.semanticColors.buttons.primary.pressed,
+        },
+    }),
+}));
+const IconPadding = styles.styled('span')({
+    display: 'flex',
+    alignItems: 'center',
+    padding: neoDesign.spacing.spacing_1, // 8px
+    borderRadius: neoDesign.spacing.spacing_1, // 8px
+    transition: 'background-color 150ms',
+});
+const Label$2 = styles.styled('span')(({ theme }) => ({
+    fontFamily: neoDesign.typography.fontFamily.body,
+    fontWeight: neoDesign.typography.fontWeight.regular,
+    fontSize: theme.typography.pxToRem(10),
+    lineHeight: 1.2,
+    textAlign: 'center',
+    color: neoDesign.semanticColors.typography.navigation.default, // #1F2937
+    width: '100%',
+    transition: 'color 150ms',
+}));
+const TagPill = styles.styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 18,
+    paddingLeft: neoDesign.spacing.spacing_3_4, // 6px
+    paddingRight: neoDesign.spacing.spacing_3_4, // 6px
+    borderRadius: neoDesign.borderRadius.full,
+    backgroundColor: neoDesign.colors.digitalBlue[300], // #8D99FF
+    color: neoDesign.semanticColors.typography.tooltip, // white
+    fontFamily: neoDesign.typography.fontFamily.body,
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    fontSize: theme.typography.pxToRem(neoDesign.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 (jsxRuntime.jsxs(StyledRoot, { selected: selected, disableRipple: true, ...props, children: [jsxRuntime.jsx(IconPadding, { className: "neo-nav-icon-padding", children: icon }), label && jsxRuntime.jsx(Label$2, { className: "neo-nav-label", children: label }), tag && jsxRuntime.jsx(TagPill, { children: tag }), children] }));
+};
+NeoNavigationItem.displayName = 'NeoNavigationItem';
+
 /**
  * Sticky header wrapper - sticks to top when scrolling
  */
@@ -6199,6 +6447,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 = styles.styled(ToggleButtonGroup)(({ theme }) => ({
     backgroundColor: neoDesign.colors.grey[50],
     padding: theme.spacing(0.625, 0.875),
@@ -6206,17 +6456,14 @@ const StyledToggleButtonGroup = styles.styled(ToggleButtonGroup)(({ theme }) =>
     gap: 0,
     [`& .${ToggleButtonGroup.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,
         },
     },
 }));
@@ -6295,15 +6542,17 @@ exports.NeoDataGridSelect = NeoSelect;
 exports.NeoDatePicker = NeoDatePicker;
 exports.NeoDivider = NeoDivider;
 exports.NeoDot = NeoDot;
-exports.NeoFilterChips = NeoFilterChips;
+exports.NeoFilterChip = NeoFilterChip;
 exports.NeoFooter = NeoFooter;
 exports.NeoIconButton = NeoIconButton;
+exports.NeoIconWrapper = NeoIconWrapper;
 exports.NeoInfiniteScrollGrid = NeoInfiniteScrollGrid;
 exports.NeoInputField = NeoInputField;
 exports.NeoListItem = NeoListItem;
 exports.NeoListItemButton = NeoListItemButton;
 exports.NeoLoadingSpinner = NeoLoadingSpinner;
 exports.NeoMarketplaceCard = NeoMarketplaceCard;
+exports.NeoMarketplaceLargeCard = NeoMarketplaceLargeCard;
 exports.NeoMenu = NeoMenu;
 exports.NeoMenuItem = NeoMenuItem;
 exports.NeoModal = NeoModal;
@@ -6311,6 +6560,7 @@ exports.NeoModalContent = NeoModalContent;
 exports.NeoModalFooter = NeoModalFooter;
 exports.NeoModalHeader = NeoModalHeader;
 exports.NeoMultiBadgesCell = NeoMultiBadgesCell;
+exports.NeoNavigationItem = NeoNavigationItem;
 exports.NeoPageContent = NeoPageContent;
 exports.NeoPaginatedGrid = NeoPaginatedGrid;
 exports.NeoProgressbar = NeoProgressbar;