@moderneinc/neo-styled-components 2.5.0-next.45d7db → 2.5.0-next.80ce67

package/dist/index.js

@@ -149,7 +149,7 @@ const NeoAvatar = ({ size = 'medium', variant = 'circular', ...props }) => {
 };
 NeoAvatar.displayName = 'NeoAvatar';
 
-const StyledChip$1 = styles.styled(Chip)(({ theme }) => ({
+const StyledChip$2 = styles.styled(Chip)(({ theme }) => ({
     height: 24,
     paddingTop: neoDesign.spacing.spacing_1_4,
     paddingBottom: neoDesign.spacing.spacing_1_4,
@@ -236,7 +236,7 @@ const StyledChip$1 = styles.styled(Chip)(({ theme }) => ({
  * - Label → label prop
  */
 const NeoBadge = (props) => {
-    return jsxRuntime.jsx(StyledChip$1, { ...props });
+    return jsxRuntime.jsx(StyledChip$2, { ...props });
 };
 NeoBadge.displayName = 'NeoBadge';
 
@@ -386,6 +386,7 @@ const ActivityDot = styles.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)
@@ -501,7 +502,7 @@ const NeoActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 NeoActivityIndicatorCell.displayName = 'NeoActivityIndicatorCell';
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -512,7 +513,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 }).join(" ").trim();
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -521,7 +522,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -533,7 +534,7 @@ const toCamelCase = (string) => string.replace(
 );
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -546,7 +547,7 @@ const toPascalCase = (string) => {
 };
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -565,7 +566,7 @@ var defaultAttributes = {
 };
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -581,7 +582,7 @@ const hasA11yProp = (props) => {
 };
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -619,7 +620,7 @@ const Icon = react.forwardRef(
 );
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -644,42 +645,42 @@ 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.
  */
 
 
-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.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.
  */
 
 
-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.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.
  */
 
 
-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" }],
@@ -691,127 +692,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.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.
  */
 
 
-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.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.
  */
 
 
-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.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.
  */
 
 
-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.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.
  */
 
 
-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.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.
  */
 
 
-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.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.
  */
 
 
-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.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.
  */
 
 
-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.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.
  */
 
 
-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.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.
  */
 
 
-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.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.
+ */
+
+
+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.
@@ -826,7 +842,7 @@ const __iconNode$5 = [
 const ListFilter = createLucideIcon("list-filter", __iconNode$5);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -840,7 +856,7 @@ const __iconNode$4 = [
 const Plus = createLucideIcon("plus", __iconNode$4);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -854,7 +870,7 @@ const __iconNode$3 = [
 const Search = createLucideIcon("search", __iconNode$3);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -871,7 +887,7 @@ const __iconNode$2 = [
 const Trash2 = createLucideIcon("trash-2", __iconNode$2);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -890,7 +906,7 @@ const __iconNode$1 = [
 const WifiOff = createLucideIcon("wifi-off", __iconNode$1);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -1379,7 +1395,6 @@ const StyledButtonGroup = styles.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:
@@ -1424,7 +1439,7 @@ const LabelContainer$4 = styles.styled('div')(({ size = 'medium' }) => ({
     flexDirection: 'column',
     gap: size === 'medium' ? 2 : 0,
 }));
-const Label$3 = styles.styled('span')(({ theme, size = 'medium' }) => ({
+const Label$4 = styles.styled('span')(({ theme, size = 'medium' }) => ({
     fontSize: theme.typography.pxToRem(size === 'xs'
         ? neoDesign.typography.fontSize.xs
         : size === 'small'
@@ -1573,7 +1588,7 @@ const NeoCheckbox = ({ size = 'medium', label, helperText, disabled, icon, check
         return (jsxRuntime.jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }));
     }
     // With label, wrap in container for proper layout
-    return (jsxRuntime.jsxs(CheckboxContainer, { disabled: disabled, children: [jsxRuntime.jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }), jsxRuntime.jsxs(LabelContainer$4, { size: size, children: [label && jsxRuntime.jsx(Label$3, { size: size, children: label }), helperText && jsxRuntime.jsx(HelperText$2, { size: size, children: helperText })] })] }));
+    return (jsxRuntime.jsxs(CheckboxContainer, { disabled: disabled, children: [jsxRuntime.jsx(StyledCheckbox, { size: size, disabled: disabled, icon: defaultIcon, checkedIcon: defaultCheckedIcon, indeterminateIcon: defaultIndeterminateIcon, className: combinedClassName, ...props }), jsxRuntime.jsxs(LabelContainer$4, { size: size, children: [label && jsxRuntime.jsx(Label$4, { size: size, children: label }), helperText && jsxRuntime.jsx(HelperText$2, { size: size, children: helperText })] })] }));
 };
 NeoCheckbox.displayName = 'NeoCheckbox';
 
@@ -1600,6 +1615,11 @@ const StyledButtonBase = styles.styled(ButtonBase, {
             paddingMultiline: theme.spacing(3), // 24px all sides
             fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm), // 14px
         },
+        inline: {
+            height: 'auto',
+            paddingSingleLine: `0 ${theme.spacing(0.5)}`, // 4px horizontal
+            fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs), // 12px
+        },
     };
     const sizeStyles = sizeConfig[size];
     // Base styles shared by all variants
@@ -1614,12 +1634,12 @@ const StyledButtonBase = styles.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: neoDesign.typography.fontFamily.code,
         fontWeight: neoDesign.typography.fontWeight.regular,
-        lineHeight: isMultiline ? 1.5 : size === 'xs' ? 1.2 : 'normal',
+        lineHeight: isMultiline ? 1.5 : size === 'xs' || size === 'inline' ? 1.2 : 'normal',
         borderRadius: neoDesign.borderRadius.xS,
         textAlign: 'left',
         textTransform: 'none',
@@ -1670,12 +1690,13 @@ const IconWrapper$2 = styles.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 (jsxRuntime.jsxs(StyledButtonBase, { variant: variant, size: size, isMultiline: isMultiline, ...props, children: [isMultiline ? children : jsxRuntime.jsx("span", { children: children }), endIcon && jsxRuntime.jsx(IconWrapper$2, { isMultiline: isMultiline, children: endIcon })] }));
 };
 NeoCodeSnippet.displayName = 'NeoCodeSnippet';
@@ -1887,7 +1908,7 @@ const LabelContainer$3 = styles.styled('div')({
     gap: neoDesign.spacing.spacing_1,
     minWidth: 0,
 });
-const Label$2 = styles.styled('span')({
+const Label$3 = styles.styled('span')({
     color: neoDesign.semanticColors.icons.default,
     flexShrink: 0,
 });
@@ -1913,9 +1934,11 @@ const Shortcut = styles.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)
@@ -1937,7 +1960,7 @@ const Shortcut = styles.styled('span')(({ theme }) => ({
  * ```
  */
 const NeoMenuItem = ({ icon, shortcut, secondaryText, children, ...props }) => {
-    return (jsxRuntime.jsx(StyledMenuItem, { ...props, children: jsxRuntime.jsxs(MenuItemContent, { children: [icon && jsxRuntime.jsx(IconWrapper$1, { children: icon }), jsxRuntime.jsxs(LabelContainer$3, { children: [jsxRuntime.jsx(Label$2, { children: children }), secondaryText && jsxRuntime.jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsxRuntime.jsx(Shortcut, { children: shortcut })] }) }));
+    return (jsxRuntime.jsx(StyledMenuItem, { ...props, children: jsxRuntime.jsxs(MenuItemContent, { children: [icon && jsxRuntime.jsx(IconWrapper$1, { children: icon }), jsxRuntime.jsxs(LabelContainer$3, { children: [jsxRuntime.jsx(Label$3, { children: children }), secondaryText && jsxRuntime.jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsxRuntime.jsx(Shortcut, { children: shortcut })] }) }));
 };
 NeoMenuItem.displayName = 'NeoMenuItem';
 
@@ -2453,111 +2476,85 @@ function NeoDataGridColumnsButton() {
 }
 NeoDataGridColumnsButton.displayName = 'NeoDataGridColumnsButton';
 
-const StyledChip = styles.styled(Chip)(({ theme, size, variant, color }) => ({
-    padding: 0,
-    borderRadius: neoDesign.borderRadius.full,
-    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
-    fontWeight: neoDesign.typography.fontWeight.medium,
-    // Size variants
-    ...(size === 'small' && {
+const sizeStyles = {
+    small: {
         height: 16,
         paddingLeft: neoDesign.spacing.spacing_1_2, // 4px
         paddingRight: neoDesign.spacing.spacing_1_2, // 4px
-    }),
-    ...(size === 'medium' && {
+    },
+    medium: {
         height: 18,
         paddingLeft: neoDesign.spacing.spacing_3_4, // 6px
         paddingRight: neoDesign.spacing.spacing_3_4, // 6px
-    }),
-    ...(size === 'large' && {
+    },
+    large: {
         height: 20,
         paddingLeft: neoDesign.spacing.spacing_3_4, // 6px
         paddingRight: neoDesign.spacing.spacing_3_4, // 6px
-    }),
-    [`& .${Chip.chipClasses.label}`]: {
-        padding: 0,
     },
-    // Outlined variant (light type in Figma) - Neutral/Default
-    ...(variant === 'outlined' &&
-        color === 'default' && {
+};
+const outlinedColorStyles = {
+    default: {
         backgroundColor: neoDesign.semanticColors.status.neutral.light,
         color: neoDesign.semanticColors.status.neutral.dark,
-        borderColor: neoDesign.colors.grey[200], // base/grey/200
-    }),
-    // Outlined variant - Error
-    ...(variant === 'outlined' &&
-        color === 'error' && {
+        borderColor: neoDesign.colors.grey[200],
+    },
+    error: {
         backgroundColor: neoDesign.semanticColors.status.error.light,
         color: neoDesign.semanticColors.status.error.dark,
-        borderColor: neoDesign.colors.red[100], // base/red/100
-    }),
-    // Outlined variant - Warning
-    ...(variant === 'outlined' &&
-        color === 'warning' && {
+        borderColor: neoDesign.colors.red[100],
+    },
+    warning: {
         backgroundColor: neoDesign.semanticColors.status.warning.light,
         color: neoDesign.semanticColors.status.warning.dark,
-        borderColor: neoDesign.colors.orange[100], // base/orange/100
-    }),
-    // Outlined variant - Success
-    ...(variant === 'outlined' &&
-        color === 'success' && {
+        borderColor: neoDesign.colors.orange[100],
+    },
+    success: {
         backgroundColor: neoDesign.semanticColors.status.success.light,
         color: neoDesign.semanticColors.status.success.dark,
-        borderColor: 'rgba(94, 196, 111, 0.24)', // rgba from Figma
-    }),
-    // Outlined variant - Info
-    ...(variant === 'outlined' &&
-        color === 'info' && {
+        borderColor: 'rgba(94, 196, 111, 0.24)',
+    },
+    info: {
         backgroundColor: neoDesign.semanticColors.status.info.light,
         color: neoDesign.semanticColors.status.info.dark,
-        borderColor: neoDesign.colors.digitalBlue[100], // base/digital-blue/100
-    }),
-    // Outlined variant - Violet
-    ...(variant === 'outlined' &&
-        color === 'violet' && {
+        borderColor: neoDesign.colors.digitalBlue[100],
+    },
+    violet: {
         backgroundColor: `${neoDesign.colors.violet[100]}66`, // rgba(235,213,241,0.4)
         color: neoDesign.colors.violet[600],
-        borderColor: neoDesign.colors.violet[100], // base/violet/100
-    }),
-    // Filled variant (dark type in Figma) - Neutral/Default
-    ...(variant === 'filled' &&
-        color === 'default' && {
-        backgroundColor: neoDesign.semanticColors.status.neutral.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Error
-    ...(variant === 'filled' &&
-        color === 'error' && {
-        backgroundColor: neoDesign.semanticColors.status.error.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Warning
-    ...(variant === 'filled' &&
-        color === 'warning' && {
-        backgroundColor: neoDesign.semanticColors.status.warning.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Success
-    ...(variant === 'filled' &&
-        color === 'success' && {
-        backgroundColor: neoDesign.semanticColors.status.success.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Info
-    ...(variant === 'filled' &&
-        color === 'info' && {
-        backgroundColor: neoDesign.semanticColors.status.info.medium,
-        color: theme.palette.common.white,
-        border: 'none',
-    }),
-    // Filled variant - Violet
+        borderColor: neoDesign.colors.violet[100],
+    },
+    beta: {
+        backgroundColor: neoDesign.colors.digitalBlue[100],
+        color: neoDesign.colors.digitalBlue[400],
+        borderColor: neoDesign.colors.digitalBlue[100],
+    },
+};
+const filledColorStyles = {
+    default: neoDesign.semanticColors.status.neutral.medium,
+    error: neoDesign.semanticColors.status.error.medium,
+    warning: neoDesign.semanticColors.status.warning.medium,
+    success: neoDesign.semanticColors.status.success.medium,
+    info: neoDesign.semanticColors.status.info.medium,
+    violet: neoDesign.colors.violet[500],
+    beta: neoDesign.colors.digitalBlue[300],
+};
+const StyledChip$1 = styles.styled(Chip)(({ theme, size, variant, color }) => ({
+    padding: 0,
+    borderRadius: neoDesign.borderRadius.full,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    ...(size && sizeStyles[size]),
+    [`& .${Chip.chipClasses.label}`]: {
+        padding: 0,
+    },
+    ...(variant === 'outlined' &&
+        color &&
+        outlinedColorStyles[color]),
     ...(variant === 'filled' &&
-        color === 'violet' && {
-        backgroundColor: neoDesign.colors.violet[500],
+        color &&
+        color in filledColorStyles && {
+        backgroundColor: filledColorStyles[color],
         color: theme.palette.common.white,
         border: 'none',
     }),
@@ -2570,11 +2567,11 @@ const StyledChip = styles.styled(Chip)(({ theme, size, variant, color }) => ({
  * Figma Props Mapping:
  * - m (sm|md|lg) → size (small|medium|large)
  * - type (light|dark) → variant (outlined|filled)
- * - state (Neutral|Error|Warning|Success|Info|Violet) → color (default|error|warning|success|info|violet)
+ * - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
  * - Label text → label prop
  */
 const NeoTag = ({ size = 'small', variant = 'outlined', ...props }) => {
-    return jsxRuntime.jsx(StyledChip, { size: size, variant: variant, ...props });
+    return jsxRuntime.jsx(StyledChip$1, { size: size, variant: variant, ...props });
 };
 NeoTag.displayName = 'NeoTag';
 
@@ -3535,6 +3532,102 @@ const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...prop
 };
 NeoDot.displayName = 'NeoDot';
 
+const focusRing = `${neoDesign.shadows.focusWhite1.x}px ${neoDesign.shadows.focusWhite1.y}px ${neoDesign.shadows.focusWhite1.blur}px ${neoDesign.shadows.focusWhite1.spread}px ${neoDesign.shadows.focusWhite1.shadow}, ${neoDesign.shadows.focusBlue2.x}px ${neoDesign.shadows.focusBlue2.y}px ${neoDesign.shadows.focusBlue2.blur}px ${neoDesign.shadows.focusBlue2.spread}px ${neoDesign.shadows.focusBlue2.shadow}`;
+const filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
+const StyledChip = styles.styled(Chip, {
+    shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
+})(({ theme, selected }) => ({
+    borderRadius: neoDesign.borderRadius.full,
+    border: `1px solid ${neoDesign.semanticColors.buttons.secondary.defaultBorder}`,
+    backgroundColor: selected
+        ? neoDesign.semanticColors.buttons.secondary.pressedBackground
+        : neoDesign.semanticColors.surfaces.white,
+    minHeight: 40,
+    padding: `${neoDesign.spacing.spacing_3_4}px ${neoDesign.spacing.spacing_1_1_2}px`,
+    gap: neoDesign.spacing.spacing_1,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    lineHeight: 1,
+    color: neoDesign.semanticColors.typography.body,
+    [`& .${Chip.chipClasses.label}`]: {
+        padding: 0,
+        overflow: 'visible',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    [`& .${Chip.chipClasses.deleteIcon}`]: {
+        color: neoDesign.semanticColors.icons.default,
+        width: 24,
+        height: 24,
+        margin: 0,
+        flexShrink: 0,
+        '&:hover': {
+            color: neoDesign.semanticColors.icons.default,
+        },
+    },
+    '&:hover': {
+        backgroundColor: neoDesign.semanticColors.buttons.secondary.hoverBackground,
+    },
+    [`&.${Chip.chipClasses.focusVisible}`]: {
+        boxShadow: focusRing,
+        backgroundColor: selected
+            ? neoDesign.semanticColors.buttons.secondary.pressedBackground
+            : neoDesign.semanticColors.surfaces.white,
+    },
+}));
+const LabelContent = styles.styled('span')({
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: neoDesign.spacing.spacing_1,
+});
+const TextStack = styles.styled('span')({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    gap: neoDesign.spacing.spacing_1_4,
+});
+const HeaderLabel = styles.styled('span')(({ theme }) => ({
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xxs),
+    fontWeight: neoDesign.typography.fontWeight.regular,
+    lineHeight: '120%',
+    color: neoDesign.semanticColors.typography.bodySecondary,
+}));
+const SelectedLabel = styles.styled('span')(({ theme }) => ({
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    lineHeight: 1,
+    color: neoDesign.semanticColors.buttons.secondary.default,
+}));
+const CountBadge = styles.styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 16,
+    height: 16,
+    padding: `0 ${neoDesign.spacing.spacing_1_2}px`,
+    borderRadius: neoDesign.borderRadius.full,
+    backgroundColor: neoDesign.semanticColors.brand,
+    color: neoDesign.semanticColors.surfaces.white,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs),
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    lineHeight: 1,
+    boxSizing: 'border-box',
+}));
+/**
+ * NeoFilterChip - Filter chip for filtering data, based on MUI Chip.
+ *
+ * @example
+ * <NeoFilterChip label="Status" selected selectedLabel="Active, Pending" count={2} onClear={handleClear} />
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=8257-239
+ */
+const NeoFilterChip = ({ label, selected = false, expanded, selectedLabel, count = 0, onClear, onClick, ...props }) => {
+    const chipLabel = selected ? (jsxRuntime.jsxs(LabelContent, { children: [jsxRuntime.jsxs(TextStack, { children: [jsxRuntime.jsx(HeaderLabel, { children: label }), jsxRuntime.jsx(SelectedLabel, { children: selectedLabel ?? label })] }), count > 0 && jsxRuntime.jsx(CountBadge, { children: count })] })) : (label);
+    return (jsxRuntime.jsx(StyledChip, { label: chipLabel, selected: selected, clickable: true, onClick: onClick, onDelete: selected && onClear ? onClear : undefined, deleteIcon: jsxRuntime.jsx(X, { size: 24 }), "aria-expanded": expanded, ...props }));
+};
+NeoFilterChip.displayName = 'NeoFilterChip';
+
 const SpinnerWrapper = styles.styled('div')({
     width: 24,
     height: 24,
@@ -3775,6 +3868,31 @@ const NeoFooter = ({ variant = 'pagination', showShadow = false, loading = false
 };
 NeoFooter.displayName = 'NeoFooter';
 
+const customProps$1 = ['iconSize'];
+const StyledIconWrapper = styles.styled('div', {
+    shouldForwardProp: prop => !customProps$1.includes(prop),
+})(({ iconSize }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: iconSize,
+    height: iconSize,
+    flexShrink: 0,
+    '& svg': {
+        width: iconSize,
+        height: iconSize,
+    },
+}));
+/**
+ * NeoIconWrapper - Flex-centered container that sizes icons
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4061-9955
+ */
+const NeoIconWrapper = ({ size = 20, children, ...props }) => {
+    return (jsxRuntime.jsx(StyledIconWrapper, { iconSize: size, ...props, children: children }));
+};
+NeoIconWrapper.displayName = 'NeoIconWrapper';
+
 /**
  * NeoInfiniteScrollGrid - DataGrid with infinite scroll and load-more functionality
  *
@@ -4326,6 +4444,22 @@ const StyledListItemButton = styles.styled(ListItemButton)(({ theme }) => ({
             color: neoDesign.semanticColors.typography.button.disabled,
         },
     },
+    // Focus state
+    [`&.${ListItemButton.listItemButtonClasses.focusVisible}`]: {
+        outline: `2px solid ${neoDesign.semanticColors.border.tabActive}`,
+        outlineOffset: 2,
+        border: `2px solid ${neoDesign.semanticColors.border.tabActive}`,
+        backgroundColor: theme.palette.common.white,
+        [`& .${ListItemIcon.listItemIconClasses.root}`]: {
+            color: neoDesign.semanticColors.icons.default,
+        },
+        [`& .${ListItemText.listItemTextClasses.primary}`]: {
+            color: neoDesign.colors.grey[800],
+        },
+        [`& .${ListItemText.listItemTextClasses.secondary}`]: {
+            color: neoDesign.semanticColors.typography.bodySecondary,
+        },
+    },
     // Disabled state
     [`&.${ListItemButton.listItemButtonClasses.disabled}`]: {
         backgroundColor: neoDesign.colors.grey[50],
@@ -4345,7 +4479,7 @@ const StyledListItemButton = styles.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.
@@ -4366,9 +4500,10 @@ const StyledListItemButton = styles.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:
@@ -4783,6 +4918,87 @@ const NeoModalFooter = ({ leadingContent, children }) => {
 };
 NeoModalFooter.displayName = 'NeoModalFooter';
 
+const customProps = ['selected'];
+const StyledRoot = styles.styled(ButtonBase, {
+    shouldForwardProp: prop => !customProps.includes(prop),
+})(({ selected }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: neoDesign.spacing.spacing_1_4, // 2px
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: neoDesign.spacing.spacing_1, // 8px
+    paddingBottom: neoDesign.spacing.spacing_1, // 8px
+    paddingLeft: neoDesign.spacing.spacing_1_2, // 4px
+    paddingRight: neoDesign.spacing.spacing_1_2, // 4px
+    borderRadius: neoDesign.borderRadius.xS, // 4px
+    width: 95,
+    cursor: 'pointer',
+    textDecoration: 'none',
+    '&:hover .neo-nav-icon-padding': {
+        backgroundColor: neoDesign.semanticColors.buttons.secondary.hoverBackground, // #F2F3FF
+    },
+    '&:hover .neo-nav-label': {
+        color: neoDesign.semanticColors.buttons.primary.hover, // #1E2EC2
+    },
+    ...(selected && {
+        '& .neo-nav-icon-padding': {
+            backgroundColor: `${neoDesign.colors.digitalBlue[100]}BF`, // rgba(220,224,255,0.75)
+        },
+        '& .neo-nav-label': {
+            color: neoDesign.semanticColors.buttons.primary.pressed, // #131E7A
+            fontWeight: neoDesign.typography.fontWeight.semiBold,
+        },
+        '&:hover .neo-nav-icon-padding': {
+            backgroundColor: `${neoDesign.colors.digitalBlue[100]}BF`,
+        },
+        '&:hover .neo-nav-label': {
+            color: neoDesign.semanticColors.buttons.primary.pressed,
+        },
+    }),
+}));
+const IconPadding = styles.styled('span')({
+    display: 'flex',
+    alignItems: 'center',
+    padding: neoDesign.spacing.spacing_1, // 8px
+    borderRadius: neoDesign.spacing.spacing_1, // 8px
+    transition: 'background-color 150ms',
+});
+const Label$2 = styles.styled('span')(({ theme }) => ({
+    fontFamily: neoDesign.typography.fontFamily.body,
+    fontWeight: neoDesign.typography.fontWeight.regular,
+    fontSize: theme.typography.pxToRem(10),
+    lineHeight: 1.2,
+    textAlign: 'center',
+    color: neoDesign.semanticColors.typography.navigation.default, // #1F2937
+    width: '100%',
+    transition: 'color 150ms',
+}));
+const TagPill = styles.styled('span')(({ theme }) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 18,
+    paddingLeft: neoDesign.spacing.spacing_3_4, // 6px
+    paddingRight: neoDesign.spacing.spacing_3_4, // 6px
+    borderRadius: neoDesign.borderRadius.full,
+    backgroundColor: neoDesign.colors.digitalBlue[300], // #8D99FF
+    color: neoDesign.semanticColors.typography.tooltip, // white
+    fontFamily: neoDesign.typography.fontFamily.body,
+    fontWeight: neoDesign.typography.fontWeight.medium,
+    fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs), // 12px
+    lineHeight: 1,
+}));
+/**
+ * NeoNavigationItem - Vertical navigation item with icon, label, and optional tag
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=8455-6120
+ */
+const NeoNavigationItem = ({ icon, label, selected = false, tag, children, ...props }) => {
+    return (jsxRuntime.jsxs(StyledRoot, { selected: selected, disableRipple: true, ...props, children: [jsxRuntime.jsx(IconPadding, { className: "neo-nav-icon-padding", children: icon }), label && jsxRuntime.jsx(Label$2, { className: "neo-nav-label", children: label }), tag && jsxRuntime.jsx(TagPill, { children: tag }), children] }));
+};
+NeoNavigationItem.displayName = 'NeoNavigationItem';
+
 /**
  * Sticky header wrapper - sticks to top when scrolling
  */
@@ -5365,7 +5581,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 = styles.styled(Alert, {
     shouldForwardProp: prop => prop !== 'severity' && prop !== 'variant',
@@ -5384,6 +5600,10 @@ const StyledAlert$1 = styles.styled(Alert, {
             light: neoDesign.semanticColors.status.neutral.light,
             medium: neoDesign.semanticColors.status.neutral.medium,
         },
+        info: {
+            light: neoDesign.semanticColors.status.info.light,
+            medium: neoDesign.semanticColors.status.info.medium,
+        },
     };
     const severityColors = colorMap[severity];
     // Variant-specific styles based on Phase 1.1 analysis
@@ -5443,19 +5663,20 @@ const StyledAlert$1 = styles.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
@@ -5469,6 +5690,7 @@ const NeoStatusBanner = ({ severity = 'success', variant = 'outlined', icon, chi
         success: jsxRuntime.jsx(CircleCheck, { size: 24 }),
         error: jsxRuntime.jsx(CircleAlert, { size: 24 }),
         neutral: jsxRuntime.jsx(WifiOff, { size: 24 }),
+        info: jsxRuntime.jsx(Info, { size: 24 }),
     };
     const defaultIcon = iconMap[severity];
     // Type assertion needed: severity and variant are custom props filtered by shouldForwardProp
@@ -6168,8 +6390,10 @@ exports.NeoDataGridSelect = NeoSelect;
 exports.NeoDatePicker = NeoDatePicker;
 exports.NeoDivider = NeoDivider;
 exports.NeoDot = NeoDot;
+exports.NeoFilterChip = NeoFilterChip;
 exports.NeoFooter = NeoFooter;
 exports.NeoIconButton = NeoIconButton;
+exports.NeoIconWrapper = NeoIconWrapper;
 exports.NeoInfiniteScrollGrid = NeoInfiniteScrollGrid;
 exports.NeoInputField = NeoInputField;
 exports.NeoListItem = NeoListItem;
@@ -6183,6 +6407,7 @@ exports.NeoModalContent = NeoModalContent;
 exports.NeoModalFooter = NeoModalFooter;
 exports.NeoModalHeader = NeoModalHeader;
 exports.NeoMultiBadgesCell = NeoMultiBadgesCell;
+exports.NeoNavigationItem = NeoNavigationItem;
 exports.NeoPageContent = NeoPageContent;
 exports.NeoPaginatedGrid = NeoPaginatedGrid;
 exports.NeoProgressbar = NeoProgressbar;