@moderneinc/neo-styled-components 2.5.0-next.ab39d3 → 2.5.0-next.ef98e2

package/dist/index.js

@@ -149,7 +149,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 +236,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';
 
@@ -502,7 +502,7 @@ const NeoActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 NeoActivityIndicatorCell.displayName = 'NeoActivityIndicatorCell';
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -513,7 +513,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 }).join(" ").trim();
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -522,7 +522,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -534,7 +534,7 @@ const toCamelCase = (string) => string.replace(
 );
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -547,7 +547,7 @@ const toPascalCase = (string) => {
 };
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -566,7 +566,7 @@ var defaultAttributes = {
 };
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -582,7 +582,7 @@ const hasA11yProp = (props) => {
 };
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -620,7 +620,7 @@ const Icon = react.forwardRef(
 );
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -645,7 +645,7 @@ const createLucideIcon = (iconName, iconNode) => {
 };
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -659,7 +659,7 @@ const __iconNode$i = [
 const ArrowDown = createLucideIcon("arrow-down", __iconNode$i);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -673,7 +673,7 @@ const __iconNode$h = [
 const ArrowUp = createLucideIcon("arrow-up", __iconNode$h);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -695,7 +695,7 @@ const __iconNode$g = [
 const CalendarDays = createLucideIcon("calendar-days", __iconNode$g);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -706,7 +706,7 @@ const __iconNode$f = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
 const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -717,7 +717,7 @@ const __iconNode$e = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
 const ChevronLeft = createLucideIcon("chevron-left", __iconNode$e);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -728,7 +728,7 @@ const __iconNode$d = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
 const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -739,7 +739,7 @@ const __iconNode$c = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
 const ChevronUp = createLucideIcon("chevron-up", __iconNode$c);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -753,7 +753,7 @@ const __iconNode$b = [
 const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$b);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -768,7 +768,7 @@ const __iconNode$a = [
 const CircleAlert = createLucideIcon("circle-alert", __iconNode$a);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -782,7 +782,7 @@ const __iconNode$9 = [
 const CircleCheck = createLucideIcon("circle-check", __iconNode$9);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -797,7 +797,7 @@ const __iconNode$8 = [
 const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$8);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -812,7 +812,7 @@ const __iconNode$7 = [
 const Columns3 = createLucideIcon("columns-3", __iconNode$7);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -827,7 +827,7 @@ const __iconNode$6 = [
 const Info = createLucideIcon("info", __iconNode$6);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -842,7 +842,7 @@ const __iconNode$5 = [
 const ListFilter = createLucideIcon("list-filter", __iconNode$5);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -856,7 +856,7 @@ const __iconNode$4 = [
 const Plus = createLucideIcon("plus", __iconNode$4);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -870,7 +870,7 @@ const __iconNode$3 = [
 const Search = createLucideIcon("search", __iconNode$3);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -887,7 +887,7 @@ const __iconNode$2 = [
 const Trash2 = createLucideIcon("trash-2", __iconNode$2);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -906,7 +906,7 @@ const __iconNode$1 = [
 const WifiOff = createLucideIcon("wifi-off", __iconNode$1);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -1439,7 +1439,7 @@ const LabelContainer$4 = styles.styled('div')(({ size = 'medium' }) => ({
     flexDirection: 'column',
     gap: size === 'medium' ? 2 : 0,
 }));
-const Label$3 = styles.styled('span')(({ theme, size = 'medium' }) => ({
+const Label$4 = styles.styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'xs'
         ? neoDesign.typography.fontSize.xs
         : size === 'small'
@@ -1459,6 +1459,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 +1468,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,
@@ -1588,7 +1589,7 @@ const NeoCheckbox = ({ size = 'medium', label, helperText, disabled, icon, check
         return (jsxRuntime.jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }));
     }
     // With label, wrap in container for proper layout
-    return (jsxRuntime.jsxs(CheckboxContainer, { disabled: disabled, children: [jsxRuntime.jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }), jsxRuntime.jsxs(LabelContainer$4, { size: size, children: [label && jsxRuntime.jsx(Label$3, { size: size, children: label }), helperText && jsxRuntime.jsx(HelperText$2, { size: size, children: helperText })] })] }));
+    return (jsxRuntime.jsxs(CheckboxContainer, { disabled: disabled, children: [jsxRuntime.jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }), jsxRuntime.jsxs(LabelContainer$4, { size: size, children: [label && jsxRuntime.jsx(Label$4, { size: size, children: label }), helperText && jsxRuntime.jsx(HelperText$2, { size: size, children: helperText })] })] }));
 };
 NeoCheckbox.displayName = 'NeoCheckbox';
 
@@ -1634,7 +1635,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 +1761,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,
@@ -1908,7 +1912,7 @@ const LabelContainer$3 = styles.styled('div')({
     gap: neoDesign.spacing.spacing_1,
     minWidth: 0,
 });
-const Label$2 = styles.styled('span')({
+const Label$3 = styles.styled('span')({
     color: neoDesign.semanticColors.icons.default,
     flexShrink: 0,
 });
@@ -1960,7 +1964,7 @@ const Shortcut = styles.styled('span')(({ theme }) => ({
  * ```
  */
 const NeoMenuItem = ({ icon, shortcut, secondaryText, children, ...props }) => {
-    return (jsxRuntime.jsx(StyledMenuItem, { ...props, children: jsxRuntime.jsxs(MenuItemContent, { children: [icon && jsxRuntime.jsx(IconWrapper$1, { children: icon }), jsxRuntime.jsxs(LabelContainer$3, { children: [jsxRuntime.jsx(Label$2, { children: children }), secondaryText && jsxRuntime.jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsxRuntime.jsx(Shortcut, { children: shortcut })] }) }));
+    return (jsxRuntime.jsx(StyledMenuItem, { ...props, children: jsxRuntime.jsxs(MenuItemContent, { children: [icon && jsxRuntime.jsx(IconWrapper$1, { children: icon }), jsxRuntime.jsxs(LabelContainer$3, { children: [jsxRuntime.jsx(Label$3, { children: children }), secondaryText && jsxRuntime.jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsxRuntime.jsx(Shortcut, { children: shortcut })] }) }));
 };
 NeoMenuItem.displayName = 'NeoMenuItem';
 
@@ -2476,111 +2480,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 +2571,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';
 
@@ -3558,6 +3536,102 @@ 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 filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
+const StyledChip = styles.styled(Chip, {
+    shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
+})(({ theme, selected }) => ({
+    borderRadius: neoDesign.borderRadius.full,
+    border: `1px solid ${neoDesign.semanticColors.buttons.secondary.defaultBorder}`,
+    backgroundColor: selected
+        ? neoDesign.semanticColors.buttons.secondary.pressedBackground
+        : neoDesign.semanticColors.surfaces.white,
+    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,
+    },
+    [`&.${Chip.chipClasses.focusVisible}`]: {
+        boxShadow: focusRing,
+        backgroundColor: selected
+            ? neoDesign.semanticColors.buttons.secondary.pressedBackground
+            : neoDesign.semanticColors.surfaces.white,
+    },
+}));
+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: 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 SelectedLabel = styles.styled('span')(({ theme }) => ({
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    lineHeight: 1,
+    color: neoDesign.semanticColors.buttons.secondary.default,
+}));
+const CountBadge = styles.styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 16,
+    height: 16,
+    padding: `0 ${neoDesign.spacing.spacing_1_2}px`,
+    borderRadius: neoDesign.borderRadius.full,
+    backgroundColor: neoDesign.semanticColors.brand,
+    color: neoDesign.semanticColors.surfaces.white,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    lineHeight: 1,
+    boxSizing: 'border-box',
+}));
+/**
+ * NeoFilterChip - Filter chip for filtering data, based on MUI Chip.
+ *
+ * @example
+ * <NeoFilterChip label="Status" selected selectedLabel="Active, Pending" count={2} onClear={handleClear} />
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8257-239
+ */
+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 }));
+};
+NeoFilterChip.displayName = 'NeoFilterChip';
+
 const SpinnerWrapper = styles.styled('div')({
     width: 24,
     height: 24,
@@ -3798,6 +3872,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
  *
@@ -4432,11 +4531,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
  */
@@ -4452,16 +4551,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 && {
@@ -4521,7 +4620,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
@@ -4576,10 +4675,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,
@@ -4823,6 +5043,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
  */
@@ -6118,6 +6419,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),
@@ -6125,17 +6428,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,
         },
     },
 }));
@@ -6214,14 +6514,17 @@ exports.NeoDataGridSelect = NeoSelect;
 exports.NeoDatePicker = NeoDatePicker;
 exports.NeoDivider = NeoDivider;
 exports.NeoDot = NeoDot;
+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;
@@ -6229,6 +6532,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;