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

package/dist/index.esm.js

@@ -147,7 +147,7 @@ const NeoAvatar = ({ size = 'medium', variant = 'circular', ...props }) => {
 };
 NeoAvatar.displayName = 'NeoAvatar';
 
-const StyledChip$1 = styled(Chip)(({ theme }) => ({
+const StyledChip$2 = styled(Chip)(({ theme }) => ({
     height: 24,
     paddingTop: spacing.spacing_1_4,
     paddingBottom: spacing.spacing_1_4,
@@ -234,7 +234,7 @@ const StyledChip$1 = styled(Chip)(({ theme }) => ({
  * - Label → label prop
  */
 const NeoBadge = (props) => {
-    return jsx(StyledChip$1, { ...props });
+    return jsx(StyledChip$2, { ...props });
 };
 NeoBadge.displayName = 'NeoBadge';
 
@@ -384,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)
@@ -499,7 +500,7 @@ const NeoActivityIndicatorCell = ({ event = 'commit-job', secondaryEvent, scene
 NeoActivityIndicatorCell.displayName = 'NeoActivityIndicatorCell';
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -510,7 +511,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 }).join(" ").trim();
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -519,7 +520,7 @@ const mergeClasses = (...classes) => classes.filter((className, index, array) =>
 const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -531,7 +532,7 @@ const toCamelCase = (string) => string.replace(
 );
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -544,7 +545,7 @@ const toPascalCase = (string) => {
 };
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -563,7 +564,7 @@ var defaultAttributes = {
 };
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -579,7 +580,7 @@ const hasA11yProp = (props) => {
 };
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -617,7 +618,7 @@ const Icon = forwardRef(
 );
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -642,42 +643,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" }],
@@ -689,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.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.
@@ -824,7 +840,7 @@ const __iconNode$5 = [
 const ListFilter = createLucideIcon("list-filter", __iconNode$5);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -838,7 +854,7 @@ const __iconNode$4 = [
 const Plus = createLucideIcon("plus", __iconNode$4);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -852,7 +868,7 @@ const __iconNode$3 = [
 const Search = createLucideIcon("search", __iconNode$3);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -869,7 +885,7 @@ const __iconNode$2 = [
 const Trash2 = createLucideIcon("trash-2", __iconNode$2);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -888,7 +904,7 @@ const __iconNode$1 = [
 const WifiOff = createLucideIcon("wifi-off", __iconNode$1);
 
 /**
- * @license lucide-react v0.564.0 - ISC
+ * @license lucide-react v0.575.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
@@ -1377,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:
@@ -1422,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'
@@ -1571,7 +1586,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';
 
@@ -1598,6 +1613,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
@@ -1612,12 +1632,12 @@ 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',
+        lineHeight: isMultiline ? 1.5 : size === 'xs' || size === 'inline' ? 1.2 : 'normal',
         borderRadius: borderRadius.xS,
         textAlign: 'left',
         textTransform: 'none',
@@ -1668,12 +1688,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';
@@ -1885,7 +1906,7 @@ const LabelContainer$3 = styled('div')({
     gap: spacing.spacing_1,
     minWidth: 0,
 });
-const Label$2 = styled('span')({
+const Label$3 = styled('span')({
     color: semanticColors.icons.default,
     flexShrink: 0,
 });
@@ -1911,9 +1932,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)
@@ -1935,7 +1958,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';
 
@@ -2451,111 +2474,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',
     }),
@@ -2568,11 +2565,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';
 
@@ -3533,6 +3530,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,
@@ -3773,6 +3866,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
  *
@@ -4324,6 +4442,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],
@@ -4343,7 +4477,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.
@@ -4364,9 +4498,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:
@@ -4781,6 +4916,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
  */
@@ -5363,7 +5579,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',
@@ -5382,6 +5598,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
@@ -5441,19 +5661,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
@@ -5467,6 +5688,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
@@ -6140,5 +6362,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, 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