@moderneinc/neo-styled-components 2.4.0-next.df8e26 → 2.5.0-next.00efee

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import Avatar from '@mui/material/Avatar';
 import Chip, { chipClasses } from '@mui/material/Chip';
-import SvgIcon from '@mui/material/SvgIcon';
+import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
 import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
 import { forwardRef, createElement, useState, useMemo, useRef, useEffect } from 'react';
@@ -147,9 +147,12 @@ const NeoAvatar = ({ size = 'medium', variant = 'circular', ...props }) => {
 };
 NeoAvatar.displayName = 'NeoAvatar';
 
-const StyledChip$1 = styled(Chip)(({ theme }) => ({
+const StyledChip$2 = styled(Chip)(({ theme }) => ({
     height: 24,
-    padding: `${spacing.spacing_1_4}px ${spacing.spacing_1}px`,
+    paddingTop: spacing.spacing_1_4,
+    paddingBottom: spacing.spacing_1_4,
+    paddingLeft: spacing.spacing_1,
+    paddingRight: spacing.spacing_1,
     borderRadius: borderRadius.full,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     lineHeight: 1,
@@ -157,16 +160,19 @@ const StyledChip$1 = styled(Chip)(({ theme }) => ({
     gap: spacing.spacing_1_2,
     overflow: 'visible',
     [`& .${chipClasses.label}`]: {
-        padding: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
         overflow: 'visible',
     },
     [`& .${chipClasses.icon}`]: {
-        margin: 0,
+        marginLeft: 0,
+        marginRight: 0,
         width: 12,
         height: 12,
     },
     [`& .${chipClasses.deleteIcon}`]: {
-        margin: 0,
+        marginLeft: 0,
+        marginRight: 0,
         width: 12,
         height: 12,
     },
@@ -228,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';
 
@@ -378,6 +384,7 @@ const ActivityDot = styled('div')(({ color }) => ({
  *
  * **Figma Props Mapping:**
  * - `Size` (Figma) → `size` (React): Height variant matching DataGrid sizes
+ * - `Type` (Figma) → `color` (React): Activity type (Commit Job → commitJob, Recipe Run → recipeRun, Visualization → visualization)
  *
  * **Design Tokens:**
  * - `semanticColors.activity.commitJob` - Blue dot for commit job events (#2F42FF)
@@ -493,7 +500,7 @@ const NeoActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 NeoActivityIndicatorCell.displayName = 'NeoActivityIndicatorCell';
 
 /**
- * @license lucide-react v0.563.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.
@@ -504,7 +511,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 }).join(" ").trim();
 
 /**
- * @license lucide-react v0.563.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 +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.563.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.
@@ -525,7 +532,7 @@ const toCamelCase = (string) => string.replace(
 );
 
 /**
- * @license lucide-react v0.563.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.
@@ -538,7 +545,7 @@ const toPascalCase = (string) => {
 };
 
 /**
- * @license lucide-react v0.563.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.
@@ -557,7 +564,7 @@ var defaultAttributes = {
 };
 
 /**
- * @license lucide-react v0.563.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.
@@ -573,7 +580,7 @@ const hasA11yProp = (props) => {
 };
 
 /**
- * @license lucide-react v0.563.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.
@@ -611,7 +618,7 @@ const Icon = forwardRef(
 );
 
 /**
- * @license lucide-react v0.563.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.
@@ -636,42 +643,42 @@ const createLucideIcon = (iconName, iconNode) => {
 };
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$h = [
+const __iconNode$i = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$h);
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$i);
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$g = [
+const __iconNode$h = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$g);
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$h);
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$f = [
+const __iconNode$g = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
@@ -683,127 +690,142 @@ const __iconNode$f = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$f);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$g);
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$e = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$e);
+const __iconNode$f = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$d = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$d);
+const __iconNode$e = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$e);
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$c = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$c);
+const __iconNode$d = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$b = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$b);
+const __iconNode$c = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$c);
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$a = [
+const __iconNode$b = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$a);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$b);
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$9 = [
+const __iconNode$a = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$9);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$a);
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$8 = [
+const __iconNode$9 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$8);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$9);
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$7);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$8);
 
 /**
- * @license lucide-react v0.563.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.
  */
 
 
-const __iconNode$6 = [
+const __iconNode$7 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
 ];
-const Columns3 = createLucideIcon("columns-3", __iconNode$6);
+const Columns3 = createLucideIcon("columns-3", __iconNode$7);
 
 /**
- * @license lucide-react v0.563.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.
+ */
+
+
+const __iconNode$6 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 16v-4", key: "1dtifu" }],
+  ["path", { d: "M12 8h.01", key: "e9boi3" }]
+];
+const Info = createLucideIcon("info", __iconNode$6);
+
+/**
+ * @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.
@@ -818,7 +840,7 @@ const __iconNode$5 = [
 const ListFilter = createLucideIcon("list-filter", __iconNode$5);
 
 /**
- * @license lucide-react v0.563.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.
@@ -832,7 +854,7 @@ const __iconNode$4 = [
 const Plus = createLucideIcon("plus", __iconNode$4);
 
 /**
- * @license lucide-react v0.563.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.
@@ -846,7 +868,7 @@ const __iconNode$3 = [
 const Search = createLucideIcon("search", __iconNode$3);
 
 /**
- * @license lucide-react v0.563.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.
@@ -863,7 +885,7 @@ const __iconNode$2 = [
 const Trash2 = createLucideIcon("trash-2", __iconNode$2);
 
 /**
- * @license lucide-react v0.563.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.
@@ -882,7 +904,7 @@ const __iconNode$1 = [
 const WifiOff = createLucideIcon("wifi-off", __iconNode$1);
 
 /**
- * @license lucide-react v0.563.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.
@@ -972,7 +994,7 @@ const LinkText = styled('span')(({ variant = 'light' }) => {
         return colors.grey['800'];
     };
     return {
-        fontWeight: 600,
+        fontWeight: typography.fontWeight.semiBold,
         color: getLinkColor(),
         cursor: 'pointer',
         '&:hover': {
@@ -1116,7 +1138,7 @@ const StyledButtonBase$1 = styled(ButtonBase, {
         height: sizeStyles.height,
         padding: sizeStyles.padding,
         fontSize: sizeStyles.fontSize,
-        fontWeight: 500,
+        fontWeight: typography.fontWeight.medium,
         lineHeight: '1.25rem',
         borderRadius: borderRadius.button,
         textTransform: 'none',
@@ -1371,7 +1393,6 @@ const StyledButtonGroup = styled(MuiButtonGroup)(({ theme, size = 'medium' }) =>
  *
  * Figma Props Mapping:
  * - Size (Sm|Md) → size prop (small|medium)
- * - Icon=False → Icon support not included in this implementation
  * - Active button state → Controlled externally via button props or classes
  *
  * Usage:
@@ -1407,7 +1428,7 @@ const IndeterminateIcon = ({ size = 'medium' }) => (jsxs(SvgIcon, { viewBox: "0
 const CheckboxContainer = styled('label')(({ disabled }) => ({
     display: 'inline-flex',
     alignItems: 'flex-start',
-    gap: 8,
+    gap: spacing.spacing_1,
     cursor: disabled ? 'not-allowed' : 'pointer',
     userSelect: 'none',
 }));
@@ -1416,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'
@@ -1436,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' }) => {
@@ -1443,7 +1466,7 @@ const StyledCheckbox = styled(Checkbox, {
     const sizeConfig = {
         xs: {
             size: 12,
-            borderRadius: 1, // From Figma: 1px for xs
+            borderRadius: FIGMA_XS_BORDER_RADIUS,
         },
         small: {
             size: 16,
@@ -1564,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';
 
@@ -1591,6 +1614,11 @@ const StyledButtonBase = styled(ButtonBase, {
             paddingMultiline: theme.spacing(3), // 24px all sides
             fontSize: theme.typography.pxToRem(typography.fontSize.sm), // 14px
         },
+        inline: {
+            height: 'auto',
+            paddingSingleLine: `0 ${theme.spacing(0.5)}`, // 4px horizontal
+            fontSize: theme.typography.pxToRem(typography.fontSize.xs), // 12px
+        },
     };
     const sizeStyles = sizeConfig[size];
     // Base styles shared by all variants
@@ -1605,13 +1633,15 @@ const StyledButtonBase = styled(ButtonBase, {
         width: isMultiline ? '100%' : 'fit-content',
         maxWidth: isMultiline ? '100%' : 'none',
         overflowX: isMultiline ? 'auto' : 'visible',
-        padding: isMultiline ? 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,
         fontWeight: typography.fontWeight.regular,
-        lineHeight: isMultiline ? 1.5 : size === 'xs' ? 1.2 : 'normal',
-        borderRadius: 4,
+        lineHeight: isMultiline ? 1.5 : size === 'xs' || size === 'inline' ? 1.2 : 'normal',
+        borderRadius: borderRadius.xS,
         textAlign: 'left',
         textTransform: 'none',
         gap: isMultiline ? undefined : theme.spacing(1.25), // 10px gap only for single-line
@@ -1661,12 +1691,13 @@ const IconWrapper$2 = styled('span')(({ theme, isMultiline }) => ({
  *
  * Figma Props Mapping:
  * - Color (Light|Dark) → variant (outlined|filled)
- * - size (Single line|multiline) → auto-detected from children
+ * - size (Single line|multiline|inline) → size prop + auto-detected multiline
  * - Copy button → endIcon (ReactNode)
  * - Text content → children prop
  */
 const NeoCodeSnippet = ({ variant = 'outlined', size = 'small', endIcon, children, ...props }) => {
-    const isMultiline = String(children).includes('\n');
+    // Inline snippets are never multiline — they sit within a line of text
+    const isMultiline = size !== 'inline' && String(children).includes('\n');
     return (jsxs(StyledButtonBase, { variant: variant, size: size, isMultiline: isMultiline, ...props, children: [isMultiline ? children : jsx("span", { children: children }), endIcon && jsx(IconWrapper$2, { isMultiline: isMultiline, children: endIcon })] }));
 };
 NeoCodeSnippet.displayName = 'NeoCodeSnippet';
@@ -1714,7 +1745,7 @@ const StyledSearchField = styled(TextField)(({ theme }) => ({
             borderColor: semanticColors.buttons.primary.default,
         },
     },
-    '& .MuiInputAdornment-root': {
+    [`& .${inputAdornmentClasses.root}`]: {
         color: semanticColors.icons.placeholder,
         '& svg': {
             width: 20,
@@ -1728,12 +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),
-    borderRadius: 6,
+    borderRadius: MENU_ITEM_BORDER_RADIUS,
     width: '100%',
     '&:hover': {
         backgroundColor: semanticColors.surfaces.listHover,
@@ -1762,7 +1795,7 @@ const FooterRow = styled(Box)(({ theme }) => ({
 }));
 const ResetButton = styled(Button)(({ theme }) => ({
     fontSize: theme.typography.pxToRem(16),
-    fontWeight: 400,
+    fontWeight: typography.fontWeight.regular,
     color: semanticColors.buttons.primary.default,
     textTransform: 'none',
     padding: theme.spacing(1),
@@ -1874,10 +1907,10 @@ const LabelContainer$3 = styled('div')({
     flex: 1,
     display: 'flex',
     alignItems: 'center',
-    gap: 8,
+    gap: spacing.spacing_1,
     minWidth: 0,
 });
-const Label$2 = styled('span')({
+const Label$3 = styled('span')({
     color: semanticColors.icons.default,
     flexShrink: 0,
 });
@@ -1893,7 +1926,7 @@ const Shortcut = styled('span')(({ theme }) => ({
     marginLeft: 'auto',
     flexShrink: 0,
     border: `1px solid ${semanticColors.border.secondary}`,
-    borderRadius: 4,
+    borderRadius: borderRadius.xS,
     padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
     backgroundColor: semanticColors.surfaces.white,
 }));
@@ -1903,9 +1936,11 @@ const Shortcut = styled('span')(({ theme }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8649
  *
  * Figma Props Mapping:
+ * - Figma "Dropdown - Menu" component uses Type (Avatar|Button|Icon) and Open (True|False)
+ *   to control the menu trigger. NeoMenuItem is the individual item inside the menu.
  * - Text label → children prop (mapped via figma.children)
- * - State=Selected → selected prop (mapped via figma.enum)
- * - State=Disabled → disabled prop (mapped via figma.enum)
+ * - selected → selected prop (React-controlled)
+ * - disabled → disabled prop (React-controlled)
  * - Hover state → CSS :hover (not mapped)
  * - Icon slot → icon prop (not mappable - ReactNode)
  * - Secondary text → secondaryText prop (not mappable - ReactNode/string)
@@ -1927,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';
 
@@ -1996,7 +2031,7 @@ const NeoSelect = (props) => {
                     backgroundColor: semanticColors.surfaces.white,
                     borderRadius: `${borderRadius.s}px`,
                     border: `1px solid ${semanticColors.border.primary}`,
-                    boxShadow: '0px 4px 12px rgba(0, 0, 0, 0.1)',
+                    boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
                     marginTop: 1,
                     ...props.MenuProps?.PaperProps?.sx,
                 },
@@ -2160,14 +2195,14 @@ const StyledGridFilterPanel = styled(GridFilterPanel)({
         height: 32, // NeoButton small size
         padding: `0 ${spacing.spacing_1}px`, // NeoButton link variant padding
         fontSize: typography.fontSize.sm,
-        fontWeight: 500,
+        fontWeight: typography.fontWeight.medium,
         lineHeight: 1.5,
         textTransform: 'none',
         minHeight: 'auto',
         backgroundColor: 'transparent',
         color: semanticColors.buttons.tertiary.default,
         border: 'none',
-        '& .MuiButton-startIcon': {
+        [`& .${buttonClasses.startIcon}`]: {
             display: 'none', // Hide the trash icon
         },
         '&:hover': {
@@ -2276,7 +2311,7 @@ const getDataGridHeaderStyles = () => {
         // Style the checkbox in header to match Neo design (16x16 from Figma)
         [`& .${gridClasses.columnHeaderCheckbox}`]: {
             padding: 0,
-            '& .MuiCheckbox-root': {
+            [`& .${checkboxClasses.root}`]: {
                 padding: 0,
                 width: 16,
                 height: 16,
@@ -2381,7 +2416,7 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         // Fix for MUI X 8.15.0+ scroll shadow issue - backgroundColor must be on main, not root
         // See: https://github.com/mui/mui-x/issues/20107
         // This must be set to prevent scroll shadow artifacts
-        '& .MuiDataGrid-main': {
+        [`& .${gridClasses$1.main}`]: {
             backgroundColor: semanticColors.surfaces.white,
         },
         // White background for empty/loading overlays
@@ -2392,9 +2427,9 @@ function NeoDataGrid({ autoHeight = false, toolbar, slots, sx, density = 'standa
         border: `1px solid ${semanticColors.border.primary}`,
         // Style row selection checkboxes to match header (16px, proper spacing)
         [`& .${gridClasses$1.cellCheckbox}`]: {
-            '& .MuiCheckbox-root': {
+            [`& .${checkboxClasses.root}`]: {
                 padding: `${spacing.spacing_1}px`,
-                '& .MuiSvgIcon-root': {
+                [`& .${svgIconClasses.root}`]: {
                     width: 16,
                     height: 16,
                 },
@@ -2443,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',
     }),
@@ -2560,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';
 
@@ -3331,7 +3340,7 @@ const shortcutChipStyles = {
         paddingY: `${spacing.spacing_1}px`,
         justifyContent: 'flex-start',
         width: '100%',
-        '& .MuiChip-label': {
+        [`& .${chipClasses.label}`]: {
             padding: 0,
         },
         '&:hover': {
@@ -3525,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,
@@ -3765,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
  *
@@ -3889,7 +4019,7 @@ const StyledInputLabel = styled(InputLabel, {
     position: 'static',
     transform: 'none',
     fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-    fontWeight: 500,
+    fontWeight: typography.fontWeight.medium,
     color: semanticColors.typography.input.label,
     display: 'flex',
     alignItems: 'center',
@@ -3969,7 +4099,7 @@ const StyledInputBase = styled(InputBase, {
             borderColor: semanticColors.status.error.medium,
         },
         // Adornment styling
-        '& .MuiInputAdornment-root': {
+        [`& .${inputAdornmentClasses.root}`]: {
             color: destructive ? semanticColors.status.error.medium : semanticColors.icons.placeholder,
         },
     };
@@ -4274,7 +4404,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     gap: spacing.spacing_2,
-    borderRadius: theme.typography.pxToRem(12),
+    borderRadius: borderRadius.m,
     paddingTop: spacing.spacing_1,
     paddingBottom: spacing.spacing_1,
     paddingLeft: spacing.spacing_3_4,
@@ -4316,6 +4446,22 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
             color: semanticColors.typography.button.disabled,
         },
     },
+    // Focus state
+    [`&.${listItemButtonClasses.focusVisible}`]: {
+        outline: `2px solid ${semanticColors.border.tabActive}`,
+        outlineOffset: 2,
+        border: `2px solid ${semanticColors.border.tabActive}`,
+        backgroundColor: theme.palette.common.white,
+        [`& .${listItemIconClasses.root}`]: {
+            color: semanticColors.icons.default,
+        },
+        [`& .${listItemTextClasses.primary}`]: {
+            color: colors.grey[800],
+        },
+        [`& .${listItemTextClasses.secondary}`]: {
+            color: semanticColors.typography.bodySecondary,
+        },
+    },
     // Disabled state
     [`&.${listItemButtonClasses.disabled}`]: {
         backgroundColor: colors.grey[50],
@@ -4335,7 +4481,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
  * NeoListItemButton - Selectable list item with icon and text
  *
  * A selectable list item component that displays an optional icon with primary
- * and secondary text. Supports active (selected), deselected, and disabled states.
+ * and secondary text. Supports active (selected), deselected, focus, and disabled states.
  *
  * Uses MUI's ListItemButton as base for proper accessibility and interaction.
  * Compose with ListItemIcon and ListItemText for proper structure.
@@ -4356,9 +4502,10 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4925-3764
  *
  * Figma Props Mapping:
- * - property1="Active" → selected={true}
- * - property1="Deselected" → selected={false}
- * - property1="Disabled" → disabled={true}
+ * - state="active" → selected={true}
+ * - state="deselected" → selected={false}
+ * - state="focus" → focus-visible CSS state
+ * - state="disabled" → disabled={true}
  * - showIcon → Conditional rendering of ListItemIcon child
  *
  * Design Tokens Used:
@@ -4382,36 +4529,36 @@ 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
  */
 const StyledCard = styled(MuiCard, {
     shouldForwardProp: prop => prop !== 'selected' && prop !== 'disabled',
 })(({ theme, selected, disabled }) => ({
-    width: theme.typography.pxToRem(160),
-    height: theme.typography.pxToRem(160),
+    width: 160,
+    height: 160,
     padding: theme.spacing(1.5), // 12px
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(2), // 16px
     backgroundColor: semanticColors.surfaces.card,
     border: `1px solid ${selected ? semanticColors.border.tabActive : semanticColors.border.card}`,
-    borderRadius: theme.typography.pxToRem(4),
-    boxShadow: selected ? activeShadow : 'none',
+    borderRadius: borderRadius.xS,
+    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 && {
@@ -4432,11 +4579,11 @@ const CardHeader = styled('div')({
 /**
  * Logo container
  */
-const LogoContainer = styled('div')(({ theme }) => ({
-    width: theme.typography.pxToRem(spacing.spacing_6),
-    height: theme.typography.pxToRem(spacing.spacing_6),
+const LogoContainer = styled('div')({
+    width: spacing.spacing_6,
+    height: spacing.spacing_6,
     flexShrink: 0,
-}));
+});
 /**
  * Recipe count badge
  */
@@ -4471,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
@@ -4526,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,
@@ -4773,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
  */
@@ -5355,7 +5704,7 @@ NeoSkeleton.displayName = 'NeoSkeleton';
 
 /**
  * Styled Alert component with custom severity and variant styling
- * Uses Custom Variants Pattern to add 'neutral' severity
+ * Uses Custom Variants Pattern to add 'neutral' and 'info' severities
  */
 const StyledAlert$1 = styled(Alert, {
     shouldForwardProp: prop => prop !== 'severity' && prop !== 'variant',
@@ -5374,6 +5723,10 @@ const StyledAlert$1 = styled(Alert, {
             light: semanticColors.status.neutral.light,
             medium: semanticColors.status.neutral.medium,
         },
+        info: {
+            light: semanticColors.status.info.light,
+            medium: semanticColors.status.info.medium,
+        },
     };
     const severityColors = colorMap[severity];
     // Variant-specific styles based on Phase 1.1 analysis
@@ -5433,19 +5786,20 @@ const StyledAlert$1 = styled(Alert, {
 /**
  * NeoStatusBanner - Status banner component for displaying system status messages
  *
- * Displays status information with different severity levels (success, error, neutral) and
+ * Displays status information with different severity levels (success, error, info, neutral) and
  * visual modes (outlined for light backgrounds, filled for emphasis).
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4921-3427
  *
  * Figma Props Mapping:
- * - Status (Success|Error|Offline) → severity ('success'|'error'|'neutral')
+ * - Status (Success|Error|Info|Offline) → severity ('success'|'error'|'info'|'neutral')
  * - Mode (Light|Dark) → variant ('outlined'|'filled')
  *
  * Design Tokens Used:
  * - status.success.light, status.success.medium
  * - status.error.light, status.error.medium
  * - status.neutral.light, status.neutral.medium
+ * - status.info.light, status.info.medium
  * - typography.tooltip, typography.bodySecondary
  * - grey[800]
  * - fontSize.default, fontSize.sm
@@ -5459,6 +5813,7 @@ const NeoStatusBanner = ({ severity = 'success', variant = 'outlined', icon, chi
         success: jsx(CircleCheck, { size: 24 }),
         error: jsx(CircleAlert, { size: 24 }),
         neutral: jsx(WifiOff, { size: 24 }),
+        info: jsx(Info, { size: 24 }),
     };
     const defaultIcon = iconMap[severity];
     // Type assertion needed: severity and variant are custom props filtered by shouldForwardProp
@@ -5493,14 +5848,14 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
     minHeight: spacing.spacing_5,
     padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
     textTransform: 'none',
-    fontWeight: 400,
+    fontWeight: typography.fontWeight.regular,
     fontSize: theme.typography.pxToRem(14),
     lineHeight: '1.5rem',
     color: semanticColors.typography.tab.inactive,
     transition: 'none', // Remove animation
     [`&.${tabClasses.selected}`]: {
         color: semanticColors.typography.tab.active,
-        fontWeight: 600,
+        fontWeight: typography.fontWeight.semiBold,
     },
     [`&.${buttonBaseClasses.focusVisible}`]: {
         outline: `2px solid ${semanticColors.buttons.primary.focus}`,
@@ -5619,7 +5974,7 @@ const ToastTitle = styled('p')(({ theme, variant = 'default' }) => {
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-        fontWeight: 600,
+        fontWeight: typography.fontWeight.semiBold,
         lineHeight: 1.4,
         color: colorMap[variant],
     };
@@ -5637,7 +5992,7 @@ const ToastMessage = styled('p')(({ theme, variant = 'default' }) => {
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-        fontWeight: 400,
+        fontWeight: typography.fontWeight.regular,
         lineHeight: 1.4,
         color: colorMap[variant],
     };
@@ -5677,7 +6032,7 @@ const ToastButton = styled(Button, {
         padding: 0,
         minWidth: 'auto',
         fontSize: typography.fontSize.sm,
-        fontWeight: 500,
+        fontWeight: typography.fontWeight.medium,
         lineHeight: 'normal',
         textTransform: 'none',
         color: getColor(),
@@ -5694,14 +6049,14 @@ const ProgressSection = styled(Stack)({
 const FileName = styled('p')(({ theme }) => ({
     margin: 0,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
-    fontWeight: 500,
+    fontWeight: typography.fontWeight.medium,
     lineHeight: 1.5,
     color: colors.grey['800'],
 }));
 const ProgressLabel = styled('p')(({ theme }) => ({
     margin: 0,
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
-    fontWeight: 500,
+    fontWeight: typography.fontWeight.medium,
     lineHeight: 1.5,
     color: colors.grey['800'],
 }));
@@ -5773,13 +6128,13 @@ const LabelContainer = styled('div')({
 });
 const Label = styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? typography.fontSize.sm : typography.fontSize.default),
-    fontWeight: 500,
+    fontWeight: typography.fontWeight.medium,
     lineHeight: size === 'small' ? 1.4 : 1.5,
     color: semanticColors.typography.input.default,
 }));
 const HelperText = styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'small' ? typography.fontSize.sm : typography.fontSize.default),
-    fontWeight: 400,
+    fontWeight: typography.fontWeight.regular,
     lineHeight: size === 'small' ? 1.4 : 1.5,
     color: semanticColors.typography.bodySecondary,
 }));
@@ -6062,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),
@@ -6069,14 +6426,14 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({
     gap: 0,
     [`& .${toggleButtonGroupClasses.grouped}`]: {
         border: 'none',
-        borderRadius: 14,
+        borderRadius: TOGGLE_BUTTON_BORDER_RADIUS,
         margin: 0,
         '&:not(:first-of-type)': {
-            borderRadius: 14,
+            borderRadius: TOGGLE_BUTTON_BORDER_RADIUS,
             marginLeft: 0,
         },
         '&:not(:last-of-type)': {
-            borderRadius: 14,
+            borderRadius: TOGGLE_BUTTON_BORDER_RADIUS,
         },
     },
 }));
@@ -6129,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