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

package/dist/index.esm.js

@@ -147,7 +147,7 @@ const NeoAvatar = ({ size = 'medium', variant = 'circular', ...props }) => {
 };
 NeoAvatar.displayName = 'NeoAvatar';
 
-const StyledChip$1 = styled(Chip)(({ theme }) => ({
+const StyledChip$2 = styled(Chip)(({ theme }) => ({
     height: 24,
     paddingTop: spacing.spacing_1_4,
     paddingBottom: spacing.spacing_1_4,
@@ -234,7 +234,7 @@ const StyledChip$1 = styled(Chip)(({ theme }) => ({
  * - Label → label prop
  */
 const NeoBadge = (props) => {
-    return jsx(StyledChip$1, { ...props });
+    return jsx(StyledChip$2, { ...props });
 };
 NeoBadge.displayName = 'NeoBadge';
 
@@ -500,7 +500,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.
@@ -511,7 +511,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.
@@ -520,7 +520,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.
@@ -532,7 +532,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.
@@ -545,7 +545,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.
@@ -564,7 +564,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.
@@ -580,7 +580,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.
@@ -618,7 +618,7 @@ const Icon = 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.
@@ -643,7 +643,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.
@@ -657,7 +657,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.
@@ -671,7 +671,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.
@@ -693,7 +693,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.
@@ -704,7 +704,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.
@@ -715,7 +715,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.
@@ -726,7 +726,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.
@@ -737,7 +737,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.
@@ -751,7 +751,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.
@@ -766,7 +766,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.
@@ -780,7 +780,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.
@@ -795,7 +795,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.
@@ -810,7 +810,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.
@@ -825,7 +825,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.
@@ -840,7 +840,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.
@@ -854,7 +854,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.
@@ -868,7 +868,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.
@@ -885,7 +885,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.
@@ -904,7 +904,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.
@@ -1437,7 +1437,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 +1457,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 +1466,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 +1587,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 +1633,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 +1759,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 +1910,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 +1962,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 +2478,85 @@ function NeoDataGridColumnsButton() {
 }
 NeoDataGridColumnsButton.displayName = 'NeoDataGridColumnsButton';
 
-const StyledChip = 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,11 +2569,11 @@ const StyledChip = 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 jsx(StyledChip, { size: size, variant: variant, ...props });
+    return jsx(StyledChip$1, { size: size, variant: variant, ...props });
 };
 NeoTag.displayName = 'NeoTag';
 
@@ -3556,6 +3534,102 @@ const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...prop
 };
 NeoDot.displayName = 'NeoDot';
 
+const focusRing = `${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 filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
+const StyledChip = styled(Chip, {
+    shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
+})(({ theme, selected }) => ({
+    borderRadius: borderRadius.full,
+    border: `1px solid ${semanticColors.buttons.secondary.defaultBorder}`,
+    backgroundColor: selected
+        ? semanticColors.buttons.secondary.pressedBackground
+        : semanticColors.surfaces.white,
+    minHeight: 40,
+    padding: `${spacing.spacing_3_4}px ${spacing.spacing_1_1_2}px`,
+    gap: spacing.spacing_1,
+    fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    fontWeight: typography.fontWeight.medium,
+    lineHeight: 1,
+    color: semanticColors.typography.body,
+    [`& .${chipClasses.label}`]: {
+        padding: 0,
+        overflow: 'visible',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    [`& .${chipClasses.deleteIcon}`]: {
+        color: semanticColors.icons.default,
+        width: 24,
+        height: 24,
+        margin: 0,
+        flexShrink: 0,
+        '&:hover': {
+            color: semanticColors.icons.default,
+        },
+    },
+    '&:hover': {
+        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+    },
+    [`&.${chipClasses.focusVisible}`]: {
+        boxShadow: focusRing,
+        backgroundColor: selected
+            ? semanticColors.buttons.secondary.pressedBackground
+            : semanticColors.surfaces.white,
+    },
+}));
+const LabelContent = styled('span')({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: spacing.spacing_1,
+});
+const TextStack = styled('span')({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap: spacing.spacing_1_4,
+});
+const HeaderLabel = styled('span')(({ theme }) => ({
+    fontSize: theme.typography.pxToRem(typography.fontSize.xxs),
+    fontWeight: typography.fontWeight.regular,
+    lineHeight: '120%',
+    color: semanticColors.typography.bodySecondary,
+}));
+const SelectedLabel = styled('span')(({ theme }) => ({
+    fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+    fontWeight: typography.fontWeight.medium,
+    lineHeight: 1,
+    color: semanticColors.buttons.secondary.default,
+}));
+const CountBadge = styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 16,
+    height: 16,
+    padding: `0 ${spacing.spacing_1_2}px`,
+    borderRadius: borderRadius.full,
+    backgroundColor: semanticColors.brand,
+    color: semanticColors.surfaces.white,
+    fontSize: theme.typography.pxToRem(typography.fontSize.xs),
+    fontWeight: 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 ? (jsxs(LabelContent, { children: [jsxs(TextStack, { children: [jsx(HeaderLabel, { children: label }), jsx(SelectedLabel, { children: selectedLabel ?? label })] }), count > 0 && jsx(CountBadge, { children: count })] })) : (label);
+    return (jsx(StyledChip, { label: chipLabel, selected: selected, clickable: true, onClick: onClick, onDelete: selected && onClear ? onClear : undefined, deleteIcon: jsx(X, { size: 24 }), "aria-expanded": expanded, ...props }));
+};
+NeoFilterChip.displayName = 'NeoFilterChip';
+
 const SpinnerWrapper = styled('div')({
     width: 24,
     height: 24,
@@ -3796,6 +3870,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
  *
@@ -4430,11 +4529,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
  */
@@ -4450,16 +4549,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 && {
@@ -4519,7 +4618,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
@@ -4574,10 +4673,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,
@@ -4821,6 +5041,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
  */
@@ -6116,6 +6417,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),
@@ -6123,17 +6426,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,
         },
     },
 }));
@@ -6186,5 +6486,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, 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