@moderneinc/neo-styled-components 3.0.0 → 4.0.0-next.44b6fc

package/dist/index.js

@@ -8,11 +8,11 @@ var Avatar = require('@mui/material/Avatar');
 var Chip = require('@mui/material/Chip');
 var SvgIcon = require('@mui/material/SvgIcon');
 var Alert = require('@mui/material/Alert');
-var IconButton = require('@mui/material/IconButton');
+var ButtonBase = require('@mui/material/ButtonBase');
 var React = require('react');
+var IconButton = require('@mui/material/IconButton');
 var Breadcrumbs = require('@mui/material/Breadcrumbs');
 var Link = require('@mui/material/Link');
-var ButtonBase = require('@mui/material/ButtonBase');
 var CircularProgress = require('@mui/material/CircularProgress');
 var MuiToggleButton = require('@mui/material/ToggleButton');
 var MuiToggleButtonGroup = require('@mui/material/ToggleButtonGroup');
@@ -42,14 +42,14 @@ var Badge = require('@mui/material/Badge');
 var LinearProgress = require('@mui/material/LinearProgress');
 var Paper = require('@mui/material/Paper');
 var Stack = require('@mui/material/Stack');
-var List = require('@mui/material/List');
-var Menu = require('@mui/material/Menu');
 var FormControl = require('@mui/material/FormControl');
 var FormHelperText = require('@mui/material/FormHelperText');
 var ListItemButton = require('@mui/material/ListItemButton');
 var ListItemIcon = require('@mui/material/ListItemIcon');
 var ListItemText = require('@mui/material/ListItemText');
 var Typography = require('@mui/material/Typography');
+var List = require('@mui/material/List');
+var Menu = require('@mui/material/Menu');
 var Dialog = require('@mui/material/Dialog');
 var DialogActions = require('@mui/material/DialogActions');
 var DialogContent = require('@mui/material/DialogContent');
@@ -138,7 +138,7 @@ const AvatarContainer = styles.styled(Box)(({ size = 'medium' }) => ({
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
-        boxShadow: `${neoDesign.shadows.neutralSmall.x}px ${neoDesign.shadows.neutralSmall.y}px ${neoDesign.shadows.neutralSmall.blur}px ${neoDesign.shadows.neutralSmall.spread}px ${neoDesign.shadows.neutralSmall.shadow}`,
+        boxShadow: `${neoDesign.shadows.neutral.small.x}px ${neoDesign.shadows.neutral.small.y}px ${neoDesign.shadows.neutral.small.blur}px ${neoDesign.shadows.neutral.small.spread}px ${neoDesign.shadows.neutral.small.shadow}`,
     }),
     '&:focus-within': {
         ...focusRingStyles,
@@ -690,11 +690,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$j = [
+const __iconNode$k = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$j);
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$k);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -704,11 +704,32 @@ const ArrowDown = createLucideIcon("arrow-down", __iconNode$j);
  */
 
 
-const __iconNode$i = [
+const __iconNode$j = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$i);
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$j);
+
+/**
+ * @license lucide-react v0.577.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$i = [
+  [
+    "path",
+    {
+      d: "M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z",
+      key: "3c2336"
+    }
+  ],
+  ["line", { x1: "12", x2: "12", y1: "16", y2: "12", key: "1y1yb1" }],
+  ["line", { x1: "12", x2: "12.01", y1: "8", y2: "8", key: "110wyk" }]
+];
+const BadgeInfo = createLucideIcon("badge-info", __iconNode$i);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -814,10 +835,10 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$b);
 
 
 const __iconNode$a = [
-  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-  ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
+  ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
+  ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$a);
+const CircleCheckBig = createLucideIcon("circle-check-big", __iconNode$a);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -858,26 +879,11 @@ const Columns3 = createLucideIcon("columns-3", __iconNode$8);
 
 
 const __iconNode$7 = [
-  ["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$7);
-
-/**
- * @license lucide-react v0.577.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 = [
   ["path", { d: "M2 5h20", key: "1fs1ex" }],
   ["path", { d: "M6 12h12", key: "8npq4p" }],
   ["path", { d: "M9 19h6", key: "456am0" }]
 ];
-const ListFilter = createLucideIcon("list-filter", __iconNode$6);
+const ListFilter = createLucideIcon("list-filter", __iconNode$7);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -887,8 +893,8 @@ const ListFilter = createLucideIcon("list-filter", __iconNode$6);
  */
 
 
-const __iconNode$5 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
-const Minus = createLucideIcon("minus", __iconNode$5);
+const __iconNode$6 = [["path", { d: "M5 12h14", key: "1ays0h" }]];
+const Minus = createLucideIcon("minus", __iconNode$6);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -898,11 +904,11 @@ const Minus = createLucideIcon("minus", __iconNode$5);
  */
 
 
-const __iconNode$4 = [
+const __iconNode$5 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$4);
+const Plus = createLucideIcon("plus", __iconNode$5);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -912,11 +918,11 @@ const Plus = createLucideIcon("plus", __iconNode$4);
  */
 
 
-const __iconNode$3 = [
+const __iconNode$4 = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
 ];
-const Search = createLucideIcon("search", __iconNode$3);
+const Search = createLucideIcon("search", __iconNode$4);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -926,14 +932,35 @@ const Search = createLucideIcon("search", __iconNode$3);
  */
 
 
-const __iconNode$2 = [
+const __iconNode$3 = [
   ["path", { d: "M10 11v6", key: "nco0om" }],
   ["path", { d: "M14 11v6", key: "outv1u" }],
   ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
 ];
-const Trash2 = createLucideIcon("trash-2", __iconNode$2);
+const Trash2 = createLucideIcon("trash-2", __iconNode$3);
+
+/**
+ * @license lucide-react v0.577.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$2 = [
+  [
+    "path",
+    {
+      d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+      key: "wmoenq"
+    }
+  ],
+  ["path", { d: "M12 9v4", key: "juzpu7" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+const TriangleAlert = createLucideIcon("triangle-alert", __iconNode$2);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -968,7 +995,93 @@ const __iconNode = [
 ];
 const X = createLucideIcon("x", __iconNode);
 
-const intentColors = {
+const neutralSmallShadow = `${neoDesign.shadows.neutral.small.x}px ${neoDesign.shadows.neutral.small.y}px ${neoDesign.shadows.neutral.small.blur}px ${neoDesign.shadows.neutral.small.spread}px ${neoDesign.shadows.neutral.small.shadow}`;
+const intentColors$2 = {
+    success: neoDesign.semanticColors.status.success,
+    error: neoDesign.semanticColors.status.error,
+    warning: neoDesign.semanticColors.status.warning,
+    offline: neoDesign.semanticColors.status.neutral,
+    info: neoDesign.semanticColors.status.info,
+};
+// biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
+const StyledAlert$2 = styles.styled(Alert, {
+    shouldForwardProp: prop => prop !== 'intent' && prop !== 'alertType',
+})(({ theme, intent = 'success', alertType = 'outlined' }) => {
+    const palette = intentColors$2[intent];
+    const isFilled = alertType === 'filled';
+    const iconColor = isFilled ? neoDesign.semanticColors.typography.tooltip : palette.default;
+    const messageColor = isFilled ? neoDesign.semanticColors.typography.tooltip : neoDesign.semanticColors.typography.body;
+    return {
+        height: neoDesign.spacing.spacing_8,
+        width: '100%',
+        borderRadius: neoDesign.borderRadius.xS,
+        alignItems: 'center',
+        fontFamily: neoDesign.typography.fontFamily.body,
+        fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.default),
+        fontWeight: neoDesign.typography.fontWeight.semiBold,
+        lineHeight: 1.5,
+        padding: theme.spacing(0, 2),
+        backgroundColor: isFilled ? palette.dark : palette.light,
+        border: isFilled ? 'none' : `1px solid ${palette.transparent}`,
+        color: isFilled ? neoDesign.semanticColors.typography.tooltip : neoDesign.semanticColors.typography.body,
+        boxShadow: isFilled ? neutralSmallShadow : undefined,
+        [`& .${Alert.alertClasses.icon}`]: {
+            color: iconColor,
+            padding: 0,
+            opacity: 1,
+            marginRight: neoDesign.spacing.spacing_1_1_2,
+        },
+        [`& .${Alert.alertClasses.message}`]: {
+            color: messageColor,
+            padding: 0,
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            '& span:last-child': {
+                fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
+                fontWeight: neoDesign.typography.fontWeight.medium,
+                color: isFilled
+                    ? neoDesign.semanticColors.typography.tooltip
+                    : neoDesign.semanticColors.typography.bodySecondary,
+                lineHeight: 1.4,
+            },
+        },
+        [`& .${Alert.alertClasses.action}`]: {
+            padding: 0,
+            marginRight: 0,
+            ...(isFilled && {
+                color: neoDesign.semanticColors.typography.tooltip,
+                [`& .${ButtonBase.buttonBaseClasses.root}`]: { color: 'inherit' },
+            }),
+        },
+    };
+});
+const iconMap = {
+    success: jsxRuntime.jsx(CircleCheckBig, { size: 24 }),
+    error: jsxRuntime.jsx(CircleAlert, { size: 24 }),
+    warning: jsxRuntime.jsx(TriangleAlert, { size: 24 }),
+    offline: jsxRuntime.jsx(WifiOff, { size: 24 }),
+    info: jsxRuntime.jsx(BadgeInfo, { size: 24 }),
+};
+/**
+ * NeoAlert - Alert component for displaying contextual status messages
+ *
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4921-3427
+ *
+ * Figma Props Mapping:
+ * - Intent (Success|Error|Warning|Offline|Info) → intent
+ * - Type (Outlined|Filled) → type
+ * - Show supporting text → description prop presence
+ * - Show Button → action prop presence
+ */
+const NeoAlert = ({ intent = 'success', type = 'outlined', title, description, icon, action, ...props }) => {
+    const defaultIcon = iconMap[intent];
+    return (jsxRuntime.jsxs(StyledAlert$2, { ...props, intent: intent, alertType: type, icon: icon ?? defaultIcon, action: action, children: [jsxRuntime.jsx("span", { children: title }), description && jsxRuntime.jsx("span", { children: description })] }));
+};
+NeoAlert.displayName = 'NeoAlert';
+
+const intentColors$1 = {
     info: neoDesign.semanticColors.status.info,
     success: neoDesign.semanticColors.status.success,
     error: neoDesign.semanticColors.status.error,
@@ -976,10 +1089,10 @@ const intentColors = {
     neutral: neoDesign.semanticColors.status.neutral,
 };
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
-const StyledAlert$2 = styles.styled(Alert, {
+const StyledAlert$1 = styles.styled(Alert, {
     shouldForwardProp: prop => prop !== 'messagePosition' && prop !== 'intent' && prop !== 'bannerType',
 })(({ intent = 'info', bannerType = 'outlined', messagePosition = 'left' }) => {
-    const palette = intentColors[intent];
+    const palette = intentColors$1[intent];
     const typeStyles = bannerType === 'filled'
         ? {
             backgroundColor: palette.dark,
@@ -1000,7 +1113,7 @@ const StyledAlert$2 = styles.styled(Alert, {
         alignItems: 'center',
         justifyContent: messagePosition === 'center' ? 'center' : 'flex-start',
         ...(messagePosition === 'center' && { position: 'relative' }),
-        boxShadow: `${neoDesign.shadows.neutralSmall.x}px ${neoDesign.shadows.neutralSmall.y}px ${neoDesign.shadows.neutralSmall.blur}px ${neoDesign.shadows.neutralSmall.spread}px ${neoDesign.shadows.neutralSmall.shadow}`,
+        boxShadow: `${neoDesign.shadows.neutral.small.x}px ${neoDesign.shadows.neutral.small.y}px ${neoDesign.shadows.neutral.small.blur}px ${neoDesign.shadows.neutral.small.spread}px ${neoDesign.shadows.neutral.small.shadow}`,
         fontSize: neoDesign.typography.fontSize.default,
         fontWeight: neoDesign.typography.fontWeight.medium,
         lineHeight: 1.5,
@@ -1055,8 +1168,8 @@ const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePositio
     if (dismissed) {
         return null;
     }
-    const closeIconColor = type === 'filled' ? neoDesign.semanticColors.surfaces.white : intentColors[intent].default;
-    return (jsxRuntime.jsx(StyledAlert$2, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsxRuntime.jsx(StyledIconButton$1, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsxRuntime.jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
+    const closeIconColor = type === 'filled' ? neoDesign.semanticColors.surfaces.white : intentColors$1[intent].default;
+    return (jsxRuntime.jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsxRuntime.jsx(StyledIconButton$1, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsxRuntime.jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 NeoBanner.displayName = 'NeoBanner';
 
@@ -2220,32 +2333,32 @@ const Shortcut = styles.styled('span')(({ theme }) => ({
     backgroundColor: neoDesign.semanticColors.surfaces.white,
 }));
 /**
- * NeoDropdownMenuItem - Dropdown menu item component based on MUI MenuItem
+ * NeoMenuItem - Menu item component based on MUI MenuItem
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4159-8584
  *
  * @example
  * ```tsx
  * // With icon and shortcut
- * <NeoDropdownMenuItem icon={<UserIcon />} shortcut="⌘+P">
+ * <NeoMenuItem icon={<UserIcon />} shortcut="⌘+P">
  *   View profile
- * </NeoDropdownMenuItem>
+ * </NeoMenuItem>
  *
  * // With secondary text (user list pattern from Figma node 4305:41844)
- * <NeoDropdownMenuItem secondaryText="@phoenix">Phoenix Baker</NeoDropdownMenuItem>
- * <NeoDropdownMenuItem secondaryText="@olivia">Olivia Rhye</NeoDropdownMenuItem>
+ * <NeoMenuItem secondaryText="@phoenix">Phoenix Baker</NeoMenuItem>
+ * <NeoMenuItem secondaryText="@olivia">Olivia Rhye</NeoMenuItem>
  *
  * // Disabled state
- * <NeoDropdownMenuItem disabled>Disabled item</NeoDropdownMenuItem>
+ * <NeoMenuItem disabled>Disabled item</NeoMenuItem>
  * ```
  */
-const NeoDropdownMenuItem = ({ icon, shortcut, secondaryText, children, ...props }) => {
+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$3, { children: children }), secondaryText && jsxRuntime.jsx(SecondaryLabel, { children: secondaryText })] }), shortcut && jsxRuntime.jsx(Shortcut, { children: shortcut })] }) }));
 };
-NeoDropdownMenuItem.displayName = 'NeoDropdownMenuItem';
+NeoMenuItem.displayName = 'NeoMenuItem';
 
 /**
- * Custom chevron icon for dropdown
+ * Custom chevron icon for select
  * Must accept props from MUI Select to work correctly
  */
 const ChevronDownIcon = (props) => (jsxRuntime.jsx(ChevronDown, { ...props, size: neoDesign.spacing.spacing_2_1_2, color: neoDesign.semanticColors.typography.input.default, style: { ...props.style } }));
@@ -2285,22 +2398,22 @@ const StyledSelect = styles.styled(MuiSelect)({
     },
 });
 /**
- * NeoDropdown - Dropdown select component with Neo design system styling
+ * NeoSelect - Select component with Neo design system styling
  *
  * A styled version of MUI's Select that uses Neo design tokens, Lucide ChevronDown icon,
- * and NeoDropdownMenu/NeoDropdownMenuItem for the dropdown list.
+ * and NeoMenu/NeoMenuItem for the dropdown list.
  *
  * @example
  * ```tsx
- * import { NeoDropdown, NeoDropdownOption } from '@moderneinc/neo-styled-components'
+ * import { NeoSelect, NeoSelectOption } from '@moderneinc/neo-styled-components'
  *
- * <NeoDropdown value={value} onChange={handleChange}>
- *   <NeoDropdownOption value="option1">Option 1</NeoDropdownOption>
- *   <NeoDropdownOption value="option2">Option 2</NeoDropdownOption>
- * </NeoDropdown>
+ * <NeoSelect value={value} onChange={handleChange}>
+ *   <NeoSelectOption value="option1">Option 1</NeoSelectOption>
+ *   <NeoSelectOption value="option2">Option 2</NeoSelectOption>
+ * </NeoSelect>
  * ```
  */
-const NeoDropdown = (props) => {
+const NeoSelect = (props) => {
     return (jsxRuntime.jsx(StyledSelect, { ...props, IconComponent: ChevronDownIcon, variant: "standard", MenuProps: {
             ...props.MenuProps,
             PaperProps: {
@@ -2315,7 +2428,7 @@ const NeoDropdown = (props) => {
             },
         } }));
 };
-NeoDropdown.displayName = 'NeoDropdown';
+NeoSelect.displayName = 'NeoSelect';
 
 /**
  * Icon components for DataGrid filter panel slots
@@ -2776,37 +2889,37 @@ const outlinedColorStyles = {
     default: {
         backgroundColor: neoDesign.semanticColors.status.neutral.light,
         color: neoDesign.semanticColors.status.neutral.dark,
-        borderColor: neoDesign.colors.grey[200],
+        borderColor: neoDesign.semanticColors.status.neutral.transparent,
     },
     error: {
         backgroundColor: neoDesign.semanticColors.status.error.light,
         color: neoDesign.semanticColors.status.error.dark,
-        borderColor: neoDesign.colors.red[100],
+        borderColor: neoDesign.semanticColors.status.error.transparent,
     },
     warning: {
         backgroundColor: neoDesign.semanticColors.status.warning.light,
         color: neoDesign.semanticColors.status.warning.dark,
-        borderColor: neoDesign.colors.orange[100],
+        borderColor: neoDesign.semanticColors.status.warning.transparent,
     },
     success: {
         backgroundColor: neoDesign.semanticColors.status.success.light,
         color: neoDesign.semanticColors.status.success.dark,
-        borderColor: 'rgba(94, 196, 111, 0.24)',
+        borderColor: neoDesign.semanticColors.status.success.transparent,
     },
     info: {
         backgroundColor: neoDesign.semanticColors.status.info.light,
         color: neoDesign.semanticColors.status.info.dark,
-        borderColor: neoDesign.colors.digitalBlue[100],
+        borderColor: neoDesign.semanticColors.status.info.transparent,
     },
     violet: {
-        backgroundColor: `${neoDesign.colors.violet[100]}66`, // rgba(235,213,241,0.4)
+        backgroundColor: 'rgba(235, 213, 241, 0.4)',
         color: neoDesign.colors.violet[600],
-        borderColor: neoDesign.colors.violet[100],
+        borderColor: neoDesign.colors.violet[200],
     },
     beta: {
-        backgroundColor: neoDesign.colors.digitalBlue[100],
+        backgroundColor: neoDesign.colors.digitalBlue[50],
         color: neoDesign.colors.digitalBlue[400],
-        borderColor: neoDesign.colors.digitalBlue[100],
+        borderColor: neoDesign.colors.digitalBlue[200],
     },
 };
 const filledColorStyles = {
@@ -2844,13 +2957,13 @@ const StyledChip$1 = styles.styled(Chip)(({ theme, size, variant, color }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4120-34533
  *
  * Figma Props Mapping:
- * - m (sm|md|lg) → size (small|medium|large)
- * - type (light|dark) → variant (outlined|filled)
- * - state (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
- * - Label text → label prop
+ * - Size (Small|Medium|Large) → size (small|medium|large)
+ * - Variant (Subtle|Filled) → variant (outlined|filled)
+ * - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → intent (default|error|warning|success|info|violet|beta)
+ * - TEXT Label → label prop
  */
-function NeoTag({ size = 'small', variant = 'outlined', ...props }) {
-    return jsxRuntime.jsx(StyledChip$1, { size: size, variant: variant, ...props });
+function NeoTag({ size = 'small', variant = 'outlined', intent = 'default', ...props }) {
+    return jsxRuntime.jsx(StyledChip$1, { size: size, variant: variant, color: intent, ...props });
 }
 NeoTag.displayName = 'NeoTag';
 
@@ -3632,11 +3745,10 @@ const shortcutChipStyles = {
  * customization. Supports both single date selection and date range selection with
  * built-in shortcuts.
  *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4176-3700
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4176-8593
  *
  * Figma Props Mapping:
- * - opened → open (boolean)
- * - type ('Single date'|'Dual dates') → type ('single'|'range')
+ * - Mode ('Single'|'Range') → type ('single'|'range')
  *
  * Design Tokens Used:
  * - colors: semanticColors.grey[800], semanticColors.grey[700], semanticColors.surfaces.white, semanticColors.icons.hoverBackground
@@ -3736,11 +3848,11 @@ const StyledDivider = styles.styled(Divider)(({ theme }) => ({
  * @example
  * ```tsx
  * // In a menu
- * <NeoDropdownMenu>
- *   <NeoDropdownMenuItem>Settings</NeoDropdownMenuItem>
+ * <NeoMenu>
+ *   <NeoMenuItem>Settings</NeoMenuItem>
  *   <NeoDivider />
- *   <NeoDropdownMenuItem>Sign out</NeoDropdownMenuItem>
- * </NeoDropdownMenu>
+ *   <NeoMenuItem>Sign out</NeoMenuItem>
+ * </NeoMenu>
  *
  * // In a card
  * <Card>
@@ -3889,47 +4001,6 @@ const NeoDownloadToast = ({ title, fileName, progress, showClose = true, showPau
 };
 NeoDownloadToast.displayName = 'NeoDownloadToast';
 
-const StyledMenu = styles.styled(Menu)(({ theme }) => ({
-    [`& .${Paper.paperClasses.root}`]: {
-        backgroundColor: neoDesign.semanticColors.surfaces.white,
-        borderRadius: neoDesign.borderRadius.s,
-        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
-        boxShadow: `${neoDesign.shadows.dropdown.x}px ${neoDesign.shadows.dropdown.y}px ${neoDesign.shadows.dropdown.blur}px ${neoDesign.shadows.dropdown.spread}px ${neoDesign.shadows.dropdown.shadow}`,
-        minWidth: 200,
-        marginTop: theme.spacing(1),
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(1),
-    },
-    [`& .${List.listClasses.root}`]: {
-        padding: 0,
-    },
-}));
-/**
- * NeoDropdownMenu - Dropdown menu component based on MUI Menu
- *
- * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11141-4980
- *
- * @example
- * ```tsx
- * const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
- * const open = Boolean(anchorEl);
- *
- * <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open Menu</Button>
- * <NeoDropdownMenu
- *   open={open}
- *   anchorEl={anchorEl}
- *   onClose={() => setAnchorEl(null)}
- * >
- *   <NeoDropdownMenuItem icon={<Icon />} shortcut="⌘+P">View profile</NeoDropdownMenuItem>
- *   <NeoDropdownMenuItem>Settings</NeoDropdownMenuItem>
- * </NeoDropdownMenu>
- * ```
- */
-const NeoDropdownMenu = ({ children, ...props }) => {
-    return jsxRuntime.jsx(StyledMenu, { ...props, children: children });
-};
-NeoDropdownMenu.displayName = 'NeoDropdownMenu';
-
 const filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
 const StyledChip = styles.styled(Chip, {
     shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
@@ -4073,11 +4144,11 @@ const StyledFooter = styles.styled(Box, {
     '&::before': {
         content: showShadow ? '""' : 'none',
         position: 'absolute',
-        top: `-${neoDesign.shadows.neutralRegular.blur}px`, // -4px
+        top: `-${neoDesign.shadows.neutral.regular.blur}px`, // -4px
         left: 0,
         right: 0,
-        height: `${neoDesign.shadows.neutralRegular.blur}px`, // 4px
-        background: `linear-gradient(to top, ${neoDesign.shadows.neutralRegular.shadow}, transparent)`, // rgba(31, 41, 55, 0.1)
+        height: `${neoDesign.shadows.neutral.regular.blur}px`, // 4px
+        background: `linear-gradient(to top, ${neoDesign.shadows.neutral.regular.shadow}, transparent)`, // rgba(31, 41, 55, 0.1)
         pointerEvents: 'none',
     },
     [theme.breakpoints.down('sm')]: {
@@ -4667,6 +4738,19 @@ const sizeConfig = {
         badgeFontSize: neoDesign.typography.fontSize.xs,
         lineHeight: 1.5,
     },
+    xxxlarge: {
+        height: neoDesign.spacing.spacing_10,
+        paddingTop: 1,
+        paddingRight: neoDesign.spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: neoDesign.spacing.spacing_3_4,
+        gap: neoDesign.spacing.spacing_2,
+        iconSize: neoDesign.spacing.spacing_6,
+        fontSize: neoDesign.typography.fontSize.h5,
+        secondaryFontSize: neoDesign.typography.fontSize.sm,
+        badgeFontSize: neoDesign.typography.fontSize.xs,
+        lineHeight: 1.5,
+    },
 };
 const StyledListItemButton$1 = styles.styled(ListItemButton, {
     shouldForwardProp: prop => prop !== 'size' &&
@@ -4711,7 +4795,7 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
         '& .list-item-primary': {
             fontSize: theme.typography.pxToRem(config.fontSize),
             lineHeight: config.lineHeight,
-            fontWeight: isLink && size === 'xxlarge'
+            fontWeight: isLink && (size === 'xxlarge' || size === 'xxxlarge')
                 ? neoDesign.typography.fontWeight.semiBold
                 : size === 'small' || size === 'medium'
                     ? neoDesign.typography.fontWeight.regular
@@ -4722,18 +4806,20 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
-            ...(isLink && size === 'xxlarge' && { textDecoration: 'none' }),
+            ...(isLink && (size === 'xxlarge' || size === 'xxxlarge') && { textDecoration: 'none' }),
         },
-        // Link hover styling (underline on hover for xxlarge)
+        // Link hover styling (underline on hover for xxlarge/xxxlarge)
         ...(isLink &&
-            size === 'xxlarge' && {
+            (size === 'xxlarge' || size === 'xxxlarge') && {
             '&:hover .list-item-primary': {
                 textDecoration: 'underline',
             },
         }),
-        // Badge styling (for xxlarge link variant)
+        // Badge styling (for xxlarge/xxxlarge link variant)
         '& .list-item-badge': {
-            fontSize: theme.typography.pxToRem(size === 'xxlarge' ? config.badgeFontSize || 12 : 12),
+            fontSize: theme.typography.pxToRem(size === 'xxlarge' || size === 'xxxlarge'
+                ? config.badgeFontSize || 12
+                : 12),
             lineHeight: 1.5,
             fontWeight: neoDesign.typography.fontWeight.regular,
             color: neoDesign.semanticColors.typography.bodySecondary,
@@ -4811,14 +4897,14 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
 /**
  * NeoListItem - Flexible list item component with multiple size variants and states
  *
- * A versatile list item component built on MUI's ListItemButton that supports five size variants
- * (small to xxlarge), interactive states (default, selected, disabled, link), and optional
+ * A versatile list item component built on MUI's ListItemButton that supports six size variants
+ * (small to xxxlarge), interactive states (default, selected, disabled, link), and optional
  * icons/logos, secondary text, and badges.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4205-36442
  *
  * Figma Props Mapping:
- * - size (small|medium|large|xlarge|XXL) → size (small|medium|large|xlarge|xxlarge)
+ * - size (Small|Medium|Large|Extra Large|XX Large|TripleExtraLarge) → size (small|medium|large|xlarge|xxlarge|xxxlarge)
  * - state (default|active|disabled|link) → selected, disabled, isLink props
  * - showIcon → icon prop (pass ReactNode)
  * - showSupportingText → secondaryText prop (pass ReactNode)
@@ -4841,9 +4927,10 @@ const StyledListItemButton$1 = styles.styled(ListItemButton, {
  */
 const NeoListItem = ({ size = 'medium', primaryText, secondaryText, badge, icon, isLink = false, trailingElement, component, ...props }) => {
     // Determine if secondary text should be shown based on size
-    const showSecondaryText = secondaryText && (size === 'large' || size === 'xlarge' || size === 'xxlarge');
-    // Determine if badge should be shown (only for xxlarge)
-    const showBadge = badge && size === 'xxlarge';
+    const showSecondaryText = secondaryText &&
+        (size === 'large' || size === 'xlarge' || size === 'xxlarge' || size === 'xxxlarge');
+    // Determine if badge should be shown (for xxlarge/xxxlarge)
+    const showBadge = badge && (size === 'xxlarge' || size === 'xxxlarge');
     // Prepare primary text with badge if needed
     const primaryContent = showBadge ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [primaryText, ' ', jsxRuntime.jsx(Typography, { component: "span", className: "list-item-badge", children: badge })] })) : (primaryText);
     return (jsxRuntime.jsxs(StyledListItemButton$1, { size: size, isLink: isLink, hasSecondaryText: !!showSecondaryText, ...(component && { component }), ...props, children: [icon && jsxRuntime.jsx(ListItemIcon, { children: icon }), jsxRuntime.jsx(ListItemText, { primary: primaryContent, secondary: showSecondaryText ? secondaryText : undefined, sx: { minWidth: 0, flex: 1 }, slotProps: {
@@ -4982,39 +5069,46 @@ const NeoListItemButton = ({ children, selected = false, disabled = false, ...pr
 };
 NeoListItemButton.displayName = 'NeoListItemButton';
 
+const StyledMenu = styles.styled(Menu)(({ theme }) => ({
+    [`& .${Paper.paperClasses.root}`]: {
+        backgroundColor: neoDesign.semanticColors.surfaces.white,
+        borderRadius: neoDesign.borderRadius.s,
+        border: `1px solid ${neoDesign.semanticColors.border.primary}`,
+        boxShadow: `${neoDesign.shadows.dropdown.x}px ${neoDesign.shadows.dropdown.y}px ${neoDesign.shadows.dropdown.blur}px ${neoDesign.shadows.dropdown.spread}px ${neoDesign.shadows.dropdown.shadow}`,
+        minWidth: 200,
+        marginTop: theme.spacing(1),
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+    },
+    [`& .${List.listClasses.root}`]: {
+        padding: 0,
+    },
+}));
 /**
- * @deprecated Use `NeoCard` with `size="small"` instead.
+ * NeoMenu - Menu component based on MUI Menu
  *
- * @example
- * ```tsx
- * // Before
- * <NeoMarketplaceCard logo={...} title="Java" ... />
- *
- * // After
- * <NeoCard size="small" logo={...} title="Java" ... />
- * ```
- */
-const NeoMarketplaceCard = (props) => {
-    return jsxRuntime.jsx(NeoCard, { size: "small", ...props });
-};
-NeoMarketplaceCard.displayName = 'NeoMarketplaceCard';
-
-/**
- * @deprecated Use `NeoCard` with `size="large"` instead.
+ * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=11141-4980
  *
  * @example
  * ```tsx
- * // Before
- * <NeoMarketplaceLargeCard cardTheme="light" ... />
+ * const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+ * const open = Boolean(anchorEl);
  *
- * // After
- * <NeoCard size="large" cardTheme="light" ... />
+ * <Button onClick={(e) => setAnchorEl(e.currentTarget)}>Open Menu</Button>
+ * <NeoMenu
+ *   open={open}
+ *   anchorEl={anchorEl}
+ *   onClose={() => setAnchorEl(null)}
+ * >
+ *   <NeoMenuItem icon={<Icon />} shortcut="⌘+P">View profile</NeoMenuItem>
+ *   <NeoMenuItem>Settings</NeoMenuItem>
+ * </NeoMenu>
  * ```
  */
-const NeoMarketplaceLargeCard = (props) => {
-    return jsxRuntime.jsx(NeoCard, { size: "large", ...props });
+const NeoMenu = ({ children, ...props }) => {
+    return jsxRuntime.jsx(StyledMenu, { ...props, children: children });
 };
-NeoMarketplaceLargeCard.displayName = 'NeoMarketplaceLargeCard';
+NeoMenu.displayName = 'NeoMenu';
 
 // ============================================================================
 // NeoModal - Main Dialog Container
@@ -5326,9 +5420,9 @@ const TagPill = styles.styled('span')(({ theme }) => ({
  *
  * @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 }) => {
+function 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';
 
 /**
@@ -5984,127 +6078,6 @@ const NeoSkeleton = ({ colorTheme = 'light', position = 'start', ...props }) =>
 };
 NeoSkeleton.displayName = 'NeoSkeleton';
 
-/**
- * Styled Alert component with custom severity and variant styling
- * Uses Custom Variants Pattern to add 'neutral' and 'info' severities
- */
-const StyledAlert$1 = styles.styled(Alert, {
-    shouldForwardProp: prop => prop !== 'severity' && prop !== 'variant',
-})(({ theme, severity = 'success', variant = 'outlined' }) => {
-    // Color mapping for different severities
-    const colorMap = {
-        success: {
-            light: neoDesign.semanticColors.status.success.light,
-            medium: neoDesign.semanticColors.status.success.default,
-        },
-        error: {
-            light: neoDesign.semanticColors.status.error.light,
-            medium: neoDesign.semanticColors.status.error.default,
-        },
-        neutral: {
-            light: neoDesign.semanticColors.status.neutral.light,
-            medium: neoDesign.semanticColors.status.neutral.default,
-        },
-        info: {
-            light: neoDesign.semanticColors.status.info.light,
-            medium: neoDesign.semanticColors.status.info.default,
-        },
-    };
-    const severityColors = colorMap[severity];
-    // Variant-specific styles based on Phase 1.1 analysis
-    const variantStyles = (() => {
-        if (variant === 'filled') {
-            // Dark mode: solid background with white text
-            return {
-                backgroundColor: severityColors.medium,
-                border: 'none',
-                color: neoDesign.semanticColors.typography.tooltip,
-                padding: theme.spacing(0.75, 3),
-                boxShadow: `0px 1px 3px ${neoDesign.semanticColors.surfaces.shadowNeutral}1a`, // 1a = 10% opacity
-                [`& .${Alert.alertClasses.icon}`]: {
-                    color: neoDesign.semanticColors.typography.tooltip,
-                },
-                [`& .${Alert.alertClasses.message}`]: {
-                    color: neoDesign.semanticColors.typography.tooltip,
-                },
-            };
-        }
-        // Light mode: light background with border
-        return {
-            backgroundColor: severityColors.light,
-            border: `1px solid ${severityColors.medium}`,
-            color: neoDesign.colors.grey[800],
-            padding: theme.spacing(0.125, 2),
-            [`& .${Alert.alertClasses.icon}`]: {
-                color: severityColors.medium,
-            },
-            [`& .${Alert.alertClasses.message}`]: {
-                color: neoDesign.colors.grey[800],
-            },
-        };
-    })();
-    return {
-        height: neoDesign.spacing.spacing_8,
-        width: '100%',
-        borderRadius: neoDesign.borderRadius.xS,
-        alignItems: 'center',
-        fontFamily: neoDesign.typography.fontFamily.body,
-        fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.default),
-        fontWeight: neoDesign.typography.fontWeight.medium,
-        lineHeight: 1.5,
-        ...variantStyles,
-        // Supporting text styling
-        [`& .${Alert.alertClasses.message} > *:not(:first-child)`]: {
-            fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
-            fontWeight: neoDesign.typography.fontWeight.regular,
-            color: variant === 'filled'
-                ? neoDesign.semanticColors.typography.tooltip
-                : neoDesign.semanticColors.typography.bodySecondary,
-            lineHeight: 1.4,
-            marginTop: theme.spacing(0.25),
-        },
-    };
-});
-/**
- * NeoStatusBanner - Status banner component for displaying system status messages
- *
- * 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|Info|Offline) → severity ('success'|'error'|'info'|'neutral')
- * - Mode (Light|Dark) → variant ('outlined'|'filled')
- *
- * Design Tokens Used:
- * - status.success.light, status.success.default
- * - status.error.light, status.error.default
- * - status.neutral.light, status.neutral.default
- * - status.info.light, status.info.default
- * - typography.tooltip, typography.bodySecondary
- * - grey[800]
- * - fontSize.default, fontSize.sm
- * - fontWeight.medium, fontWeight.regular
- * - fontFamily.body
- * - surfaces.shadowNeutral
- */
-const NeoStatusBanner = ({ severity = 'success', variant = 'outlined', icon, children, ...props }) => {
-    // Icon mapping for different severities
-    const iconMap = {
-        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
-    // biome-ignore lint/suspicious/noExplicitAny: Custom props pattern requires any cast
-    const StyledAlertAny = StyledAlert$1;
-    return (jsxRuntime.jsx(StyledAlertAny, { ...props, severity: severity, variant: variant, icon: icon ?? defaultIcon, children: children }));
-};
-NeoStatusBanner.displayName = 'NeoStatusBanner';
-
 /**
  * NeoTabs - Tabs container component based on MUI Tabs
  *
@@ -6139,7 +6112,20 @@ const StyledTab = styles.styled(MuiTab)(({ theme }) => ({
         color: neoDesign.semanticColors.typography.tab.active,
         fontWeight: neoDesign.typography.fontWeight.semiBold,
     },
+    '&:hover': {
+        backgroundColor: neoDesign.semanticColors.buttons.secondary.hoverBackground,
+        [`&.${MuiTab.tabClasses.selected}::after`]: {
+            content: '""',
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: 2,
+            backgroundColor: neoDesign.semanticColors.buttons.primary.hover,
+        },
+    },
     [`&.${ButtonBase.buttonBaseClasses.focusVisible}`]: {
+        color: neoDesign.semanticColors.typography.tab.active,
         outline: `2px solid ${neoDesign.semanticColors.border.focus}`,
         outlineOffset: -2,
     },
@@ -6147,6 +6133,21 @@ const StyledTab = styles.styled(MuiTab)(({ theme }) => ({
         color: neoDesign.semanticColors.typography.button.disabled,
         cursor: 'not-allowed',
         pointerEvents: 'auto',
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
+        [`&.${MuiTab.tabClasses.selected}`]: {
+            color: neoDesign.semanticColors.typography.button.disabled,
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: 2,
+                backgroundColor: neoDesign.semanticColors.buttons.tertiary.disabled,
+            },
+        },
     },
 }));
 const TabLabelContainer = styles.styled('span')(({ theme }) => ({
@@ -6161,10 +6162,7 @@ const TabLabelContainer = styles.styled('span')(({ theme }) => ({
  *
  * Figma Props Mapping:
  * - Current=True/False → Controlled by parent NeoTabs value
- * - State=Default → default styling
- * - State=Hover → CSS :hover
- * - State=Focus → CSS :focus-visible
- * - Tag count → count prop (renders NeoTag)
+ * - Show tag → count prop (renders NeoTag)
  * - Text label → label prop
  */
 const NeoTab = ({ label, count, ...props }) => {
@@ -6173,18 +6171,37 @@ const NeoTab = ({ label, count, ...props }) => {
 };
 NeoTab.displayName = 'NeoTab';
 
+const intentColors = {
+    info: neoDesign.semanticColors.status.info,
+    success: neoDesign.semanticColors.status.success,
+    error: neoDesign.semanticColors.status.error,
+    warning: neoDesign.semanticColors.status.warning,
+    neutral: neoDesign.semanticColors.status.neutral,
+};
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert = styles.styled(Alert, {
-    shouldForwardProp: prop => prop !== 'variant',
-})(({ theme, variant = 'default' }) => {
-    // Base styles
-    const baseStyles = {
+    shouldForwardProp: prop => prop !== 'intent' && prop !== 'toastType',
+})(({ theme, intent = 'neutral', toastType = 'outlined' }) => {
+    const palette = intentColors[intent];
+    const typeStyles = toastType === 'filled'
+        ? {
+            backgroundColor: palette.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+            border: `1px solid ${palette.dark}`,
+        }
+        : {
+            backgroundColor: palette.light,
+            color: neoDesign.colors.grey['800'],
+            border: `1px solid ${palette.default}`,
+        };
+    return {
         padding: neoDesign.spacing.spacing_2,
         borderRadius: neoDesign.borderRadius.s,
         gap: neoDesign.spacing.spacing_4,
         alignItems: 'flex-start',
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
         lineHeight: 1.4,
+        ...typeStyles,
         [`& .${Alert.alertClasses.icon}`]: {
             display: 'none',
         },
@@ -6200,76 +6217,31 @@ const StyledAlert = styles.styled(Alert, {
             marginRight: 0,
         },
     };
-    // Variant-specific styles
-    const variantStyles = {
-        default: {
-            backgroundColor: neoDesign.semanticColors.surfaces.snackbarDarkMode,
-            color: neoDesign.colors.grey['800'],
-            border: `1px solid ${neoDesign.semanticColors.border.primary}`,
-        },
-        dark: {
-            backgroundColor: neoDesign.semanticColors.surfaces.snackbarLightMode,
-            color: neoDesign.semanticColors.surfaces.white,
-            border: `1px solid ${neoDesign.semanticColors.surfaces.snackbarLightMode}`,
-        },
-        brand: {
-            backgroundColor: neoDesign.semanticColors.surfaces.snackbarBrand,
-            color: neoDesign.semanticColors.surfaces.white,
-            border: `1px solid ${neoDesign.semanticColors.surfaces.snackbarBrand}`,
-        },
-        error: {
-            backgroundColor: neoDesign.semanticColors.status.error.light,
-            color: neoDesign.semanticColors.status.error.dark,
-            border: `1px solid ${neoDesign.semanticColors.status.error.default}`,
-        },
-        success: {
-            backgroundColor: neoDesign.semanticColors.status.success.light,
-            color: neoDesign.semanticColors.status.success.dark,
-            border: `1px solid ${neoDesign.semanticColors.status.success.default}`,
-        },
-        info: {
-            backgroundColor: neoDesign.semanticColors.status.info.light,
-            color: neoDesign.semanticColors.status.info.dark,
-            border: `1px solid ${neoDesign.semanticColors.status.info.default}`,
-        },
-    };
-    return {
-        ...baseStyles,
-        ...variantStyles[variant],
-    };
 });
-const ToastTitle = styles.styled('p')(({ theme, variant = 'default' }) => {
-    const colorMap = {
-        default: neoDesign.colors.grey['700'],
-        dark: neoDesign.semanticColors.surfaces.white,
-        brand: neoDesign.semanticColors.surfaces.white,
-        error: neoDesign.semanticColors.status.error.dark,
-        success: neoDesign.semanticColors.status.success.dark,
-        info: neoDesign.semanticColors.status.info.dark,
-    };
+const ToastTitle = styles.styled('p')(({ theme, intent = 'neutral', toastType = 'outlined' }) => {
+    const palette = intentColors[intent];
+    const color = toastType === 'filled' ? neoDesign.semanticColors.surfaces.white : palette.dark;
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
         fontWeight: neoDesign.typography.fontWeight.semiBold,
         lineHeight: 1.4,
-        color: colorMap[variant],
+        color,
     };
 });
-const ToastMessage = styles.styled('p')(({ theme, variant = 'default' }) => {
-    const colorMap = {
-        default: neoDesign.semanticColors.typography.bodySecondary,
-        dark: neoDesign.colors.grey['200'],
-        brand: neoDesign.colors.grey['200'],
-        error: neoDesign.semanticColors.status.error.dark,
-        success: neoDesign.semanticColors.status.success.dark,
-        info: neoDesign.semanticColors.status.info.dark,
-    };
+const ToastMessage = styles.styled('p')(({ theme, intent = 'neutral', toastType = 'outlined' }) => {
+    const palette = intentColors[intent];
+    const color = toastType === 'filled'
+        ? neoDesign.colors.grey['200']
+        : intent === 'neutral'
+            ? neoDesign.semanticColors.typography.bodySecondary
+            : palette.dark;
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
         fontWeight: neoDesign.typography.fontWeight.regular,
         lineHeight: 1.4,
-        color: colorMap[variant],
+        color,
     };
 });
 const ToastActions = styles.styled(Stack)({
@@ -6278,30 +6250,20 @@ const ToastActions = styles.styled(Stack)({
     justifyContent: 'flex-start',
 });
 const ToastButton = styles.styled(Button, {
-    shouldForwardProp: prop => prop !== 'toastVariant' && prop !== 'primary',
-})(({ toastVariant = 'default', primary }) => {
+    shouldForwardProp: prop => prop !== 'toastIntent' && prop !== 'toastType' && prop !== 'primary',
+})(({ toastIntent = 'neutral', toastType = 'outlined', primary }) => {
+    const palette = intentColors[toastIntent];
     const getColor = () => {
+        if (toastType === 'filled') {
+            return primary ? neoDesign.colors.digitalBlue['200'] : neoDesign.semanticColors.surfaces.white;
+        }
         if (primary) {
-            if (toastVariant === 'dark' || toastVariant === 'brand') {
-                return neoDesign.colors.digitalBlue['200'];
-            }
             return neoDesign.semanticColors.typography.link.primary;
         }
-        // Non-primary button colors
-        if (toastVariant === 'dark' || toastVariant === 'brand') {
-            return neoDesign.semanticColors.surfaces.white;
-        }
-        if (toastVariant === 'error') {
-            return neoDesign.semanticColors.status.error.dark;
-        }
-        if (toastVariant === 'success') {
-            return neoDesign.semanticColors.status.success.dark;
+        if (toastIntent === 'neutral') {
+            return neoDesign.semanticColors.icons.placeholder;
         }
-        if (toastVariant === 'info') {
-            return neoDesign.semanticColors.status.info.dark;
-        }
-        // default variant uses icon placeholder color
-        return neoDesign.semanticColors.icons.placeholder;
+        return palette.dark;
     };
     return {
         padding: 0,
@@ -6321,22 +6283,17 @@ const ToastButton = styles.styled(Button, {
  * NeoToast - Notification/Toast component based on MUI Alert
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4122-37223
- *
- * Figma Props Mapping:
- * - type (Light mode|Dark mode|Brand color|Error|Success|Info) → variant (default|dark|brand|error|success|info)
- * - header → title (string)
- * - supportingText → message (string)
- * - xCloseButton → showClose (boolean)
- * - actions → actions (ReactNode)
- */
-const NeoToast = ({ variant = 'default', title, message, showClose = true, actions, onClose, ...props }) => {
-    return (jsxRuntime.jsxs(StyledAlert, { ...props, variant: variant, action: showClose ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: neoDesign.semanticColors.icons.placeholder }, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${neoDesign.spacing.spacing_1}px`, width: '100%' }, children: [title && jsxRuntime.jsx(ToastTitle, { variant: variant, children: title }), message && jsxRuntime.jsx(ToastMessage, { variant: variant, children: message })] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] }));
+ */
+const NeoToast = ({ intent = 'neutral', type = 'outlined', title, message, showClose = false, actions, onClose, ...props }) => {
+    const palette = intentColors[intent];
+    const closeIconColor = type === 'filled' ? neoDesign.semanticColors.surfaces.white : palette.default;
+    return (jsxRuntime.jsxs(StyledAlert, { ...props, intent: intent, toastType: type, action: showClose ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: closeIconColor }, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${neoDesign.spacing.spacing_1}px`, width: '100%' }, children: [title && jsxRuntime.jsx(ToastTitle, { intent: intent, toastType: type, children: title }), message && jsxRuntime.jsx(ToastMessage, { intent: intent, toastType: type, children: message })] }), actions && jsxRuntime.jsx(ToastActions, { direction: "row", children: actions })] }));
 };
 /**
  * Helper component for creating toast action buttons with proper styling
  */
-const NeoToastButton = ({ primary, variant = 'default', children, ...props }) => {
-    return (jsxRuntime.jsx(ToastButton, { variant: "text", toastVariant: variant, primary: primary, ...props, children: children }));
+const NeoToastButton = ({ primary, intent = 'neutral', type = 'outlined', children, ...props }) => {
+    return (jsxRuntime.jsx(ToastButton, { variant: "text", toastIntent: intent, toastType: type, primary: primary, ...props, children: children }));
 };
 NeoToast.displayName = 'NeoToast';
 NeoToastButton.displayName = 'NeoToastButton';
@@ -6437,7 +6394,7 @@ const StyledSwitch = styles.styled(Switch, {
         [`& .${Switch.switchClasses.thumb}`]: {
             width: config.thumbSize,
             height: config.thumbSize,
-            boxShadow: `${neoDesign.shadows.neutralSmall.x}px ${neoDesign.shadows.neutralSmall.y}px ${neoDesign.shadows.neutralSmall.blur}px ${neoDesign.shadows.neutralSmall.spread}px ${neoDesign.shadows.neutralSmall.shadow}`,
+            boxShadow: `${neoDesign.shadows.neutral.small.x}px ${neoDesign.shadows.neutral.small.y}px ${neoDesign.shadows.neutral.small.blur}px ${neoDesign.shadows.neutral.small.spread}px ${neoDesign.shadows.neutral.small.shadow}`,
             transition: theme.transitions.create(['width'], {
                 duration: theme.transitions.duration.shortest,
             }),
@@ -6581,7 +6538,7 @@ const variantConfig = {
  */
 const StyledTooltip = styles.styled(Tooltip, {
     shouldForwardProp: prop => prop !== 'variant' && prop !== 'description',
-})(({ theme, variant = 'light', description }) => {
+})(({ variant = 'light', description }) => {
     const hasDescription = Boolean(description);
     const variantStyles = variantConfig[variant];
     return {
@@ -6589,24 +6546,21 @@ const StyledTooltip = styles.styled(Tooltip, {
         [`& .${Tooltip.tooltipClasses.tooltip}`]: {
             backgroundColor: variantStyles.backgroundColor,
             color: variantStyles.color,
-            fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.xs), // 12px
-            fontWeight: hasDescription ? neoDesign.typography.fontWeight.medium : neoDesign.typography.fontWeight.medium,
-            lineHeight: hasDescription ? 1.5 : 1, // 18px for description, tight for simple
-            borderRadius: hasDescription ? theme.spacing(1) : theme.spacing(0.5), // 8px : 4px
-            padding: hasDescription
-                ? theme.spacing(1.5) // 12px all sides
-                : theme.spacing(0, 1), // 0 vertical, 8px horizontal
+            fontSize: neoDesign.typography.fontSize.xs,
+            fontWeight: neoDesign.typography.fontWeight.medium,
+            lineHeight: hasDescription ? 1.5 : 1,
+            borderRadius: hasDescription ? neoDesign.borderRadius.s : neoDesign.borderRadius.xS,
+            padding: hasDescription ? neoDesign.spacing.spacing_1_1_2 : `0 ${neoDesign.spacing.spacing_1}px`,
             ...(hasDescription && {
                 maxWidth: 296,
             }),
             ...(!hasDescription && {
-                height: 26,
+                height: neoDesign.spacing.spacing_3_1_4,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
             }),
-            // Apply shadow
-            boxShadow: `${neoDesign.shadows.neutralMedium.x}px ${neoDesign.shadows.neutralMedium.y}px ${neoDesign.shadows.neutralMedium.blur}px ${neoDesign.shadows.neutralMedium.spread}px ${neoDesign.shadows.neutralMedium.shadow}`,
+            boxShadow: `${neoDesign.shadows.neutral.medium.x}px ${neoDesign.shadows.neutral.medium.y}px ${neoDesign.shadows.neutral.medium.blur}px ${neoDesign.shadows.neutral.medium.spread}px ${neoDesign.shadows.neutral.medium.shadow}`,
         },
         // Style the arrow
         [`& .${Tooltip.tooltipClasses.arrow}`]: {
@@ -6623,8 +6577,8 @@ const StyledTooltip = styles.styled(Tooltip, {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4091-26557&t=Bo58EpFmg6ILJtmv-11
  *
  * Figma Props Mapping:
- * - Type (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
- * - Arrow → arrow (boolean) + placement (top/bottom/left/right/etc)
+ * - Theme (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
+ * - Placement → arrow (boolean) + placement (top/bottom/left/right/etc)
  * - Supporting text (True|False) → description (string|undefined)
  * - text → title (string, literal content)
  *
@@ -6850,6 +6804,7 @@ const version = '0.0.0-development';
 exports.CIRCLE_RADIUS = CIRCLE_RADIUS;
 exports.NeoActivityHeader = NeoActivityHeader;
 exports.NeoActivityIndicatorCell = NeoActivityIndicatorCell;
+exports.NeoAlert = NeoAlert;
 exports.NeoAvatar = NeoAvatar;
 exports.NeoBadge = NeoBadge;
 exports.NeoBanner = NeoBanner;
@@ -6871,15 +6826,15 @@ exports.NeoDataGridFilterPanelDeleteIcon = NeoDataGridFilterPanelDeleteIcon;
 exports.NeoDataGridFilterPanelRemoveAllIcon = NeoDataGridFilterPanelRemoveAllIcon;
 exports.NeoDataGridFiltersButton = NeoDataGridFiltersButton;
 exports.NeoDataGridHeaderLabel = NeoDataGridHeaderLabel;
-exports.NeoDataGridSelect = NeoDropdown;
+exports.NeoDataGridSelect = NeoSelect;
 exports.NeoDatePicker = NeoDatePicker;
 exports.NeoDivider = NeoDivider;
 exports.NeoDot = NeoDot;
 exports.NeoDownloadToast = NeoDownloadToast;
-exports.NeoDropdown = NeoDropdown;
-exports.NeoDropdownMenu = NeoDropdownMenu;
-exports.NeoDropdownMenuItem = NeoDropdownMenuItem;
-exports.NeoDropdownOption = NeoDropdownMenuItem;
+exports.NeoDropdown = NeoSelect;
+exports.NeoDropdownMenu = NeoMenu;
+exports.NeoDropdownMenuItem = NeoMenuItem;
+exports.NeoDropdownOption = NeoMenuItem;
 exports.NeoFilterChip = NeoFilterChip;
 exports.NeoFooter = NeoFooter;
 exports.NeoGeneralAvatar = NeoGeneralAvatar;
@@ -6890,10 +6845,8 @@ exports.NeoInputField = NeoInputField;
 exports.NeoListItem = NeoListItem;
 exports.NeoListItemButton = NeoListItemButton;
 exports.NeoLoadingSpinner = NeoLoadingSpinner;
-exports.NeoMarketplaceCard = NeoMarketplaceCard;
-exports.NeoMarketplaceLargeCard = NeoMarketplaceLargeCard;
-exports.NeoMenu = NeoDropdownMenu;
-exports.NeoMenuItem = NeoDropdownMenuItem;
+exports.NeoMenu = NeoMenu;
+exports.NeoMenuItem = NeoMenuItem;
 exports.NeoModal = NeoModal;
 exports.NeoModalContent = NeoModalContent;
 exports.NeoModalFooter = NeoModalFooter;
@@ -6907,11 +6860,10 @@ exports.NeoProgressbar = NeoProgressbar;
 exports.NeoQuickFilter = NeoQuickFilter;
 exports.NeoRadio = NeoRadio;
 exports.NeoSearchChip = NeoSearchChip;
-exports.NeoSelect = NeoDropdown;
-exports.NeoSelectOption = NeoDropdownMenuItem;
+exports.NeoSelect = NeoSelect;
+exports.NeoSelectOption = NeoMenuItem;
 exports.NeoSkeleton = NeoSkeleton;
 exports.NeoStatusBadgeCell = NeoStatusBadgeCell;
-exports.NeoStatusBanner = NeoStatusBanner;
 exports.NeoTab = NeoTab;
 exports.NeoTabs = NeoTabs;
 exports.NeoTag = NeoTag;
@@ -6928,6 +6880,7 @@ exports.NeoUserAvatarCell = NeoUserAvatarCell;
 exports.SortedAscendingIcon = SortedAscendingIcon;
 exports.SortedDescendingIcon = SortedDescendingIcon;
 exports.UnsortedIcon = UnsortedIcon;
+exports.focusRingStyles = focusRingStyles;
 exports.getDataGridHeaderStyles = getDataGridHeaderStyles;
 exports.neoRowHeights = neoRowHeights;
 exports.version = version;