@moderneinc/neo-styled-components 3.0.0 → 4.0.0-next.3cddda

package/dist/index.esm.js

@@ -6,11 +6,11 @@ import Avatar from '@mui/material/Avatar';
 import Chip, { chipClasses } from '@mui/material/Chip';
 import SvgIcon, { svgIconClasses } from '@mui/material/SvgIcon';
 import Alert, { alertClasses } from '@mui/material/Alert';
-import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
+import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
 import React, { forwardRef, createElement, useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import IconButton, { iconButtonClasses } from '@mui/material/IconButton';
 import Breadcrumbs, { breadcrumbsClasses } from '@mui/material/Breadcrumbs';
 import Link from '@mui/material/Link';
-import ButtonBase, { buttonBaseClasses } from '@mui/material/ButtonBase';
 import CircularProgress from '@mui/material/CircularProgress';
 import MuiToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton';
 import MuiToggleButtonGroup, { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
@@ -40,14 +40,14 @@ import Badge, { badgeClasses } from '@mui/material/Badge';
 import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
 import Paper, { paperClasses } from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
-import { listClasses } from '@mui/material/List';
-import Menu from '@mui/material/Menu';
 import FormControl from '@mui/material/FormControl';
 import FormHelperText, { formHelperTextClasses } from '@mui/material/FormHelperText';
 import ListItemButton, { listItemButtonClasses } from '@mui/material/ListItemButton';
 import ListItemIcon, { listItemIconClasses } from '@mui/material/ListItemIcon';
 import ListItemText, { listItemTextClasses } from '@mui/material/ListItemText';
 import Typography from '@mui/material/Typography';
+import { listClasses } from '@mui/material/List';
+import Menu from '@mui/material/Menu';
 import Dialog, { dialogClasses } from '@mui/material/Dialog';
 import DialogActions, { dialogActionsClasses } from '@mui/material/DialogActions';
 import DialogContent, { dialogContentClasses } from '@mui/material/DialogContent';
@@ -136,7 +136,7 @@ const AvatarContainer = styled(Box)(({ size = 'medium' }) => ({
         alignItems: 'center',
         justifyContent: 'center',
         overflow: 'hidden',
-        boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
+        boxShadow: `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`,
     }),
     '&:focus-within': {
         ...focusRingStyles,
@@ -688,11 +688,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
@@ -702,11 +702,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
@@ -812,10 +833,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
@@ -856,26 +877,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
@@ -885,8 +891,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
@@ -896,11 +902,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
@@ -910,11 +916,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
@@ -924,14 +930,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
@@ -966,7 +993,93 @@ const __iconNode = [
 ];
 const X = createLucideIcon("x", __iconNode);
 
-const intentColors = {
+const neutralSmallShadow = `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`;
+const intentColors$2 = {
+    success: semanticColors.status.success,
+    error: semanticColors.status.error,
+    warning: semanticColors.status.warning,
+    offline: semanticColors.status.neutral,
+    info: semanticColors.status.info,
+};
+// biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
+const StyledAlert$2 = 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 ? semanticColors.typography.tooltip : palette.default;
+    const messageColor = isFilled ? semanticColors.typography.tooltip : semanticColors.typography.body;
+    return {
+        height: spacing.spacing_8,
+        width: '100%',
+        borderRadius: borderRadius.xS,
+        alignItems: 'center',
+        fontFamily: typography.fontFamily.body,
+        fontSize: theme.typography.pxToRem(typography.fontSize.default),
+        fontWeight: 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 ? semanticColors.typography.tooltip : semanticColors.typography.body,
+        boxShadow: isFilled ? neutralSmallShadow : undefined,
+        [`& .${alertClasses.icon}`]: {
+            color: iconColor,
+            padding: 0,
+            opacity: 1,
+            marginRight: spacing.spacing_1_1_2,
+        },
+        [`& .${alertClasses.message}`]: {
+            color: messageColor,
+            padding: 0,
+            flex: 1,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            '& span:last-child': {
+                fontSize: theme.typography.pxToRem(typography.fontSize.sm),
+                fontWeight: typography.fontWeight.medium,
+                color: isFilled
+                    ? semanticColors.typography.tooltip
+                    : semanticColors.typography.bodySecondary,
+                lineHeight: 1.4,
+            },
+        },
+        [`& .${alertClasses.action}`]: {
+            padding: 0,
+            marginRight: 0,
+            ...(isFilled && {
+                color: semanticColors.typography.tooltip,
+                [`& .${buttonBaseClasses.root}`]: { color: 'inherit' },
+            }),
+        },
+    };
+});
+const iconMap = {
+    success: jsx(CircleCheckBig, { size: 24 }),
+    error: jsx(CircleAlert, { size: 24 }),
+    warning: jsx(TriangleAlert, { size: 24 }),
+    offline: jsx(WifiOff, { size: 24 }),
+    info: 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 (jsxs(StyledAlert$2, { ...props, intent: intent, alertType: type, icon: icon ?? defaultIcon, action: action, children: [jsx("span", { children: title }), description && jsx("span", { children: description })] }));
+};
+NeoAlert.displayName = 'NeoAlert';
+
+const intentColors$1 = {
     info: semanticColors.status.info,
     success: semanticColors.status.success,
     error: semanticColors.status.error,
@@ -974,10 +1087,10 @@ const intentColors = {
     neutral: semanticColors.status.neutral,
 };
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
-const StyledAlert$2 = styled(Alert, {
+const StyledAlert$1 = 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,
@@ -998,7 +1111,7 @@ const StyledAlert$2 = styled(Alert, {
         alignItems: 'center',
         justifyContent: messagePosition === 'center' ? 'center' : 'flex-start',
         ...(messagePosition === 'center' && { position: 'relative' }),
-        boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
+        boxShadow: `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`,
         fontSize: typography.fontSize.default,
         fontWeight: typography.fontWeight.medium,
         lineHeight: 1.5,
@@ -1053,8 +1166,8 @@ const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePositio
     if (dismissed) {
         return null;
     }
-    const closeIconColor = type === 'filled' ? semanticColors.surfaces.white : intentColors[intent].default;
-    return (jsx(StyledAlert$2, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton$1, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
+    const closeIconColor = type === 'filled' ? semanticColors.surfaces.white : intentColors$1[intent].default;
+    return (jsx(StyledAlert$1, { ...props, intent: intent, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsx(StyledIconButton$1, { size: "small", onClick: handleClose, closeIconColor: closeIconColor, children: jsx(X, { size: 24 }) })) : undefined, children: messagePosition === 'center' ? (jsxs(Fragment, { children: [icon, jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxs(Fragment, { children: [jsx("span", { children: message }), linkText && (jsx(LinkText, { bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 NeoBanner.displayName = 'NeoBanner';
 
@@ -2218,32 +2331,32 @@ const Shortcut = styled('span')(({ theme }) => ({
     backgroundColor: 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 (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 })] }) }));
 };
-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) => (jsx(ChevronDown, { ...props, size: spacing.spacing_2_1_2, color: semanticColors.typography.input.default, style: { ...props.style } }));
@@ -2283,22 +2396,22 @@ const StyledSelect = 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 (jsx(StyledSelect, { ...props, IconComponent: ChevronDownIcon, variant: "standard", MenuProps: {
             ...props.MenuProps,
             PaperProps: {
@@ -2313,7 +2426,7 @@ const NeoDropdown = (props) => {
             },
         } }));
 };
-NeoDropdown.displayName = 'NeoDropdown';
+NeoSelect.displayName = 'NeoSelect';
 
 /**
  * Icon components for DataGrid filter panel slots
@@ -2774,37 +2887,37 @@ const outlinedColorStyles = {
     default: {
         backgroundColor: semanticColors.status.neutral.light,
         color: semanticColors.status.neutral.dark,
-        borderColor: colors.grey[200],
+        borderColor: semanticColors.status.neutral.transparent,
     },
     error: {
         backgroundColor: semanticColors.status.error.light,
         color: semanticColors.status.error.dark,
-        borderColor: colors.red[100],
+        borderColor: semanticColors.status.error.transparent,
     },
     warning: {
         backgroundColor: semanticColors.status.warning.light,
         color: semanticColors.status.warning.dark,
-        borderColor: colors.orange[100],
+        borderColor: semanticColors.status.warning.transparent,
     },
     success: {
         backgroundColor: semanticColors.status.success.light,
         color: semanticColors.status.success.dark,
-        borderColor: 'rgba(94, 196, 111, 0.24)',
+        borderColor: semanticColors.status.success.transparent,
     },
     info: {
         backgroundColor: semanticColors.status.info.light,
         color: semanticColors.status.info.dark,
-        borderColor: colors.digitalBlue[100],
+        borderColor: semanticColors.status.info.transparent,
     },
     violet: {
-        backgroundColor: `${colors.violet[100]}66`, // rgba(235,213,241,0.4)
+        backgroundColor: 'rgba(235, 213, 241, 0.4)',
         color: colors.violet[600],
-        borderColor: colors.violet[100],
+        borderColor: colors.violet[200],
     },
     beta: {
-        backgroundColor: colors.digitalBlue[100],
+        backgroundColor: colors.digitalBlue[50],
         color: colors.digitalBlue[400],
-        borderColor: colors.digitalBlue[100],
+        borderColor: colors.digitalBlue[200],
     },
 };
 const filledColorStyles = {
@@ -2842,13 +2955,13 @@ const StyledChip$1 = 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 jsx(StyledChip$1, { size: size, variant: variant, ...props });
+function NeoTag({ size = 'small', variant = 'outlined', intent = 'default', ...props }) {
+    return jsx(StyledChip$1, { size: size, variant: variant, color: intent, ...props });
 }
 NeoTag.displayName = 'NeoTag';
 
@@ -3630,11 +3743,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
@@ -3734,11 +3846,11 @@ const StyledDivider = 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>
@@ -3887,47 +3999,6 @@ const NeoDownloadToast = ({ title, fileName, progress, showClose = true, showPau
 };
 NeoDownloadToast.displayName = 'NeoDownloadToast';
 
-const StyledMenu = styled(Menu)(({ theme }) => ({
-    [`& .${paperClasses.root}`]: {
-        backgroundColor: semanticColors.surfaces.white,
-        borderRadius: borderRadius.s,
-        border: `1px solid ${semanticColors.border.primary}`,
-        boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
-        minWidth: 200,
-        marginTop: theme.spacing(1),
-        paddingTop: theme.spacing(1),
-        paddingBottom: theme.spacing(1),
-    },
-    [`& .${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 jsx(StyledMenu, { ...props, children: children });
-};
-NeoDropdownMenu.displayName = 'NeoDropdownMenu';
-
 const filterChipOnlyProps = ['selected', 'expanded', 'selectedLabel', 'count', 'onClear'];
 const StyledChip = styled(Chip, {
     shouldForwardProp: prop => !filterChipOnlyProps.includes(prop),
@@ -4071,11 +4142,11 @@ const StyledFooter = styled(Box, {
     '&::before': {
         content: showShadow ? '""' : 'none',
         position: 'absolute',
-        top: `-${shadows.neutralRegular.blur}px`, // -4px
+        top: `-${shadows.neutral.regular.blur}px`, // -4px
         left: 0,
         right: 0,
-        height: `${shadows.neutralRegular.blur}px`, // 4px
-        background: `linear-gradient(to top, ${shadows.neutralRegular.shadow}, transparent)`, // rgba(31, 41, 55, 0.1)
+        height: `${shadows.neutral.regular.blur}px`, // 4px
+        background: `linear-gradient(to top, ${shadows.neutral.regular.shadow}, transparent)`, // rgba(31, 41, 55, 0.1)
         pointerEvents: 'none',
     },
     [theme.breakpoints.down('sm')]: {
@@ -4665,6 +4736,19 @@ const sizeConfig = {
         badgeFontSize: typography.fontSize.xs,
         lineHeight: 1.5,
     },
+    xxxlarge: {
+        height: spacing.spacing_10,
+        paddingTop: 1,
+        paddingRight: spacing.spacing_3_4,
+        paddingBottom: 1,
+        paddingLeft: spacing.spacing_3_4,
+        gap: spacing.spacing_2,
+        iconSize: spacing.spacing_6,
+        fontSize: typography.fontSize.h5,
+        secondaryFontSize: typography.fontSize.sm,
+        badgeFontSize: typography.fontSize.xs,
+        lineHeight: 1.5,
+    },
 };
 const StyledListItemButton$1 = styled(ListItemButton, {
     shouldForwardProp: prop => prop !== 'size' &&
@@ -4709,7 +4793,7 @@ const StyledListItemButton$1 = styled(ListItemButton, {
         '& .list-item-primary': {
             fontSize: theme.typography.pxToRem(config.fontSize),
             lineHeight: config.lineHeight,
-            fontWeight: isLink && size === 'xxlarge'
+            fontWeight: isLink && (size === 'xxlarge' || size === 'xxxlarge')
                 ? typography.fontWeight.semiBold
                 : size === 'small' || size === 'medium'
                     ? typography.fontWeight.regular
@@ -4720,18 +4804,20 @@ const StyledListItemButton$1 = 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: typography.fontWeight.regular,
             color: semanticColors.typography.bodySecondary,
@@ -4809,14 +4895,14 @@ const StyledListItemButton$1 = 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)
@@ -4839,9 +4925,10 @@ const StyledListItemButton$1 = 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 ? (jsxs(Fragment, { children: [primaryText, ' ', jsx(Typography, { component: "span", className: "list-item-badge", children: badge })] })) : (primaryText);
     return (jsxs(StyledListItemButton$1, { size: size, isLink: isLink, hasSecondaryText: !!showSecondaryText, ...(component && { component }), ...props, children: [icon && jsx(ListItemIcon, { children: icon }), jsx(ListItemText, { primary: primaryContent, secondary: showSecondaryText ? secondaryText : undefined, sx: { minWidth: 0, flex: 1 }, slotProps: {
@@ -4980,39 +5067,46 @@ const NeoListItemButton = ({ children, selected = false, disabled = false, ...pr
 };
 NeoListItemButton.displayName = 'NeoListItemButton';
 
+const StyledMenu = styled(Menu)(({ theme }) => ({
+    [`& .${paperClasses.root}`]: {
+        backgroundColor: semanticColors.surfaces.white,
+        borderRadius: borderRadius.s,
+        border: `1px solid ${semanticColors.border.primary}`,
+        boxShadow: `${shadows.dropdown.x}px ${shadows.dropdown.y}px ${shadows.dropdown.blur}px ${shadows.dropdown.spread}px ${shadows.dropdown.shadow}`,
+        minWidth: 200,
+        marginTop: theme.spacing(1),
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+    },
+    [`& .${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 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 jsx(NeoCard, { size: "large", ...props });
+const NeoMenu = ({ children, ...props }) => {
+    return jsx(StyledMenu, { ...props, children: children });
 };
-NeoMarketplaceLargeCard.displayName = 'NeoMarketplaceLargeCard';
+NeoMenu.displayName = 'NeoMenu';
 
 // ============================================================================
 // NeoModal - Main Dialog Container
@@ -5324,9 +5418,9 @@ const TagPill = 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 (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';
 
 /**
@@ -5982,127 +6076,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 = styled(Alert, {
-    shouldForwardProp: prop => prop !== 'severity' && prop !== 'variant',
-})(({ theme, severity = 'success', variant = 'outlined' }) => {
-    // Color mapping for different severities
-    const colorMap = {
-        success: {
-            light: semanticColors.status.success.light,
-            medium: semanticColors.status.success.default,
-        },
-        error: {
-            light: semanticColors.status.error.light,
-            medium: semanticColors.status.error.default,
-        },
-        neutral: {
-            light: semanticColors.status.neutral.light,
-            medium: semanticColors.status.neutral.default,
-        },
-        info: {
-            light: semanticColors.status.info.light,
-            medium: 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: semanticColors.typography.tooltip,
-                padding: theme.spacing(0.75, 3),
-                boxShadow: `0px 1px 3px ${semanticColors.surfaces.shadowNeutral}1a`, // 1a = 10% opacity
-                [`& .${alertClasses.icon}`]: {
-                    color: semanticColors.typography.tooltip,
-                },
-                [`& .${alertClasses.message}`]: {
-                    color: semanticColors.typography.tooltip,
-                },
-            };
-        }
-        // Light mode: light background with border
-        return {
-            backgroundColor: severityColors.light,
-            border: `1px solid ${severityColors.medium}`,
-            color: colors.grey[800],
-            padding: theme.spacing(0.125, 2),
-            [`& .${alertClasses.icon}`]: {
-                color: severityColors.medium,
-            },
-            [`& .${alertClasses.message}`]: {
-                color: colors.grey[800],
-            },
-        };
-    })();
-    return {
-        height: spacing.spacing_8,
-        width: '100%',
-        borderRadius: borderRadius.xS,
-        alignItems: 'center',
-        fontFamily: typography.fontFamily.body,
-        fontSize: theme.typography.pxToRem(typography.fontSize.default),
-        fontWeight: typography.fontWeight.medium,
-        lineHeight: 1.5,
-        ...variantStyles,
-        // Supporting text styling
-        [`& .${alertClasses.message} > *:not(:first-child)`]: {
-            fontSize: theme.typography.pxToRem(typography.fontSize.sm),
-            fontWeight: typography.fontWeight.regular,
-            color: variant === 'filled'
-                ? semanticColors.typography.tooltip
-                : 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: 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
-    // biome-ignore lint/suspicious/noExplicitAny: Custom props pattern requires any cast
-    const StyledAlertAny = StyledAlert$1;
-    return (jsx(StyledAlertAny, { ...props, severity: severity, variant: variant, icon: icon ?? defaultIcon, children: children }));
-};
-NeoStatusBanner.displayName = 'NeoStatusBanner';
-
 /**
  * NeoTabs - Tabs container component based on MUI Tabs
  *
@@ -6137,7 +6110,20 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
         color: semanticColors.typography.tab.active,
         fontWeight: typography.fontWeight.semiBold,
     },
+    '&:hover': {
+        backgroundColor: semanticColors.buttons.secondary.hoverBackground,
+        [`&.${tabClasses.selected}::after`]: {
+            content: '""',
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            height: 2,
+            backgroundColor: semanticColors.buttons.primary.hover,
+        },
+    },
     [`&.${buttonBaseClasses.focusVisible}`]: {
+        color: semanticColors.typography.tab.active,
         outline: `2px solid ${semanticColors.border.focus}`,
         outlineOffset: -2,
     },
@@ -6145,6 +6131,21 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
         color: semanticColors.typography.button.disabled,
         cursor: 'not-allowed',
         pointerEvents: 'auto',
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
+        [`&.${tabClasses.selected}`]: {
+            color: semanticColors.typography.button.disabled,
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                bottom: 0,
+                left: 0,
+                right: 0,
+                height: 2,
+                backgroundColor: semanticColors.buttons.tertiary.disabled,
+            },
+        },
     },
 }));
 const TabLabelContainer = styled('span')(({ theme }) => ({
@@ -6159,10 +6160,7 @@ const TabLabelContainer = 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 }) => {
@@ -6171,18 +6169,37 @@ const NeoTab = ({ label, count, ...props }) => {
 };
 NeoTab.displayName = 'NeoTab';
 
+const intentColors = {
+    info: semanticColors.status.info,
+    success: semanticColors.status.success,
+    error: semanticColors.status.error,
+    warning: semanticColors.status.warning,
+    neutral: semanticColors.status.neutral,
+};
 // biome-ignore lint/suspicious/noExplicitAny: Type cast required to override MUI Alert variant type without global augmentation
 const StyledAlert = 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: semanticColors.surfaces.white,
+            border: `1px solid ${palette.dark}`,
+        }
+        : {
+            backgroundColor: palette.light,
+            color: colors.grey['800'],
+            border: `1px solid ${palette.default}`,
+        };
+    return {
         padding: spacing.spacing_2,
         borderRadius: borderRadius.s,
         gap: spacing.spacing_4,
         alignItems: 'flex-start',
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         lineHeight: 1.4,
+        ...typeStyles,
         [`& .${alertClasses.icon}`]: {
             display: 'none',
         },
@@ -6198,76 +6215,31 @@ const StyledAlert = styled(Alert, {
             marginRight: 0,
         },
     };
-    // Variant-specific styles
-    const variantStyles = {
-        default: {
-            backgroundColor: semanticColors.surfaces.snackbarDarkMode,
-            color: colors.grey['800'],
-            border: `1px solid ${semanticColors.border.primary}`,
-        },
-        dark: {
-            backgroundColor: semanticColors.surfaces.snackbarLightMode,
-            color: semanticColors.surfaces.white,
-            border: `1px solid ${semanticColors.surfaces.snackbarLightMode}`,
-        },
-        brand: {
-            backgroundColor: semanticColors.surfaces.snackbarBrand,
-            color: semanticColors.surfaces.white,
-            border: `1px solid ${semanticColors.surfaces.snackbarBrand}`,
-        },
-        error: {
-            backgroundColor: semanticColors.status.error.light,
-            color: semanticColors.status.error.dark,
-            border: `1px solid ${semanticColors.status.error.default}`,
-        },
-        success: {
-            backgroundColor: semanticColors.status.success.light,
-            color: semanticColors.status.success.dark,
-            border: `1px solid ${semanticColors.status.success.default}`,
-        },
-        info: {
-            backgroundColor: semanticColors.status.info.light,
-            color: semanticColors.status.info.dark,
-            border: `1px solid ${semanticColors.status.info.default}`,
-        },
-    };
-    return {
-        ...baseStyles,
-        ...variantStyles[variant],
-    };
 });
-const ToastTitle = styled('p')(({ theme, variant = 'default' }) => {
-    const colorMap = {
-        default: colors.grey['700'],
-        dark: semanticColors.surfaces.white,
-        brand: semanticColors.surfaces.white,
-        error: semanticColors.status.error.dark,
-        success: semanticColors.status.success.dark,
-        info: semanticColors.status.info.dark,
-    };
+const ToastTitle = styled('p')(({ theme, intent = 'neutral', toastType = 'outlined' }) => {
+    const palette = intentColors[intent];
+    const color = toastType === 'filled' ? semanticColors.surfaces.white : palette.dark;
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         fontWeight: typography.fontWeight.semiBold,
         lineHeight: 1.4,
-        color: colorMap[variant],
+        color,
     };
 });
-const ToastMessage = styled('p')(({ theme, variant = 'default' }) => {
-    const colorMap = {
-        default: semanticColors.typography.bodySecondary,
-        dark: colors.grey['200'],
-        brand: colors.grey['200'],
-        error: semanticColors.status.error.dark,
-        success: semanticColors.status.success.dark,
-        info: semanticColors.status.info.dark,
-    };
+const ToastMessage = styled('p')(({ theme, intent = 'neutral', toastType = 'outlined' }) => {
+    const palette = intentColors[intent];
+    const color = toastType === 'filled'
+        ? colors.grey['200']
+        : intent === 'neutral'
+            ? semanticColors.typography.bodySecondary
+            : palette.dark;
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(typography.fontSize.sm),
         fontWeight: typography.fontWeight.regular,
         lineHeight: 1.4,
-        color: colorMap[variant],
+        color,
     };
 });
 const ToastActions = styled(Stack)({
@@ -6276,30 +6248,20 @@ const ToastActions = styled(Stack)({
     justifyContent: 'flex-start',
 });
 const ToastButton = 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 ? colors.digitalBlue['200'] : semanticColors.surfaces.white;
+        }
         if (primary) {
-            if (toastVariant === 'dark' || toastVariant === 'brand') {
-                return colors.digitalBlue['200'];
-            }
             return semanticColors.typography.link.primary;
         }
-        // Non-primary button colors
-        if (toastVariant === 'dark' || toastVariant === 'brand') {
-            return semanticColors.surfaces.white;
-        }
-        if (toastVariant === 'error') {
-            return semanticColors.status.error.dark;
-        }
-        if (toastVariant === 'success') {
-            return semanticColors.status.success.dark;
+        if (toastIntent === 'neutral') {
+            return semanticColors.icons.placeholder;
         }
-        if (toastVariant === 'info') {
-            return semanticColors.status.info.dark;
-        }
-        // default variant uses icon placeholder color
-        return semanticColors.icons.placeholder;
+        return palette.dark;
     };
     return {
         padding: 0,
@@ -6319,22 +6281,17 @@ const ToastButton = 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 (jsxs(StyledAlert, { ...props, variant: variant, action: showClose ? (jsx(IconButton, { size: "small", onClick: onClose, sx: { color: semanticColors.icons.placeholder }, children: jsx(X, { size: 16 }) })) : undefined, children: [jsxs(Stack, { sx: { gap: `${spacing.spacing_1}px`, width: '100%' }, children: [title && jsx(ToastTitle, { variant: variant, children: title }), message && jsx(ToastMessage, { variant: variant, children: message })] }), actions && 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' ? semanticColors.surfaces.white : palette.default;
+    return (jsxs(StyledAlert, { ...props, intent: intent, toastType: type, action: showClose ? (jsx(IconButton, { size: "small", onClick: onClose, sx: { color: closeIconColor }, children: jsx(X, { size: 16 }) })) : undefined, children: [jsxs(Stack, { sx: { gap: `${spacing.spacing_1}px`, width: '100%' }, children: [title && jsx(ToastTitle, { intent: intent, toastType: type, children: title }), message && jsx(ToastMessage, { intent: intent, toastType: type, children: message })] }), actions && jsx(ToastActions, { direction: "row", children: actions })] }));
 };
 /**
  * Helper component for creating toast action buttons with proper styling
  */
-const NeoToastButton = ({ primary, variant = 'default', children, ...props }) => {
-    return (jsx(ToastButton, { variant: "text", toastVariant: variant, primary: primary, ...props, children: children }));
+const NeoToastButton = ({ primary, intent = 'neutral', type = 'outlined', children, ...props }) => {
+    return (jsx(ToastButton, { variant: "text", toastIntent: intent, toastType: type, primary: primary, ...props, children: children }));
 };
 NeoToast.displayName = 'NeoToast';
 NeoToastButton.displayName = 'NeoToastButton';
@@ -6435,7 +6392,7 @@ const StyledSwitch = styled(Switch, {
         [`& .${switchClasses.thumb}`]: {
             width: config.thumbSize,
             height: config.thumbSize,
-            boxShadow: `${shadows.neutralSmall.x}px ${shadows.neutralSmall.y}px ${shadows.neutralSmall.blur}px ${shadows.neutralSmall.spread}px ${shadows.neutralSmall.shadow}`,
+            boxShadow: `${shadows.neutral.small.x}px ${shadows.neutral.small.y}px ${shadows.neutral.small.blur}px ${shadows.neutral.small.spread}px ${shadows.neutral.small.shadow}`,
             transition: theme.transitions.create(['width'], {
                 duration: theme.transitions.duration.shortest,
             }),
@@ -6579,7 +6536,7 @@ const variantConfig = {
  */
 const StyledTooltip = styled(Tooltip, {
     shouldForwardProp: prop => prop !== 'variant' && prop !== 'description',
-})(({ theme, variant = 'light', description }) => {
+})(({ variant = 'light', description }) => {
     const hasDescription = Boolean(description);
     const variantStyles = variantConfig[variant];
     return {
@@ -6587,24 +6544,21 @@ const StyledTooltip = styled(Tooltip, {
         [`& .${tooltipClasses.tooltip}`]: {
             backgroundColor: variantStyles.backgroundColor,
             color: variantStyles.color,
-            fontSize: theme.typography.pxToRem(typography.fontSize.xs), // 12px
-            fontWeight: hasDescription ? typography.fontWeight.medium : 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: typography.fontSize.xs,
+            fontWeight: typography.fontWeight.medium,
+            lineHeight: hasDescription ? 1.5 : 1,
+            borderRadius: hasDescription ? borderRadius.s : borderRadius.xS,
+            padding: hasDescription ? spacing.spacing_1_1_2 : `0 ${spacing.spacing_1}px`,
             ...(hasDescription && {
                 maxWidth: 296,
             }),
             ...(!hasDescription && {
-                height: 26,
+                height: spacing.spacing_3_1_4,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
             }),
-            // Apply shadow
-            boxShadow: `${shadows.neutralMedium.x}px ${shadows.neutralMedium.y}px ${shadows.neutralMedium.blur}px ${shadows.neutralMedium.spread}px ${shadows.neutralMedium.shadow}`,
+            boxShadow: `${shadows.neutral.medium.x}px ${shadows.neutral.medium.y}px ${shadows.neutral.medium.blur}px ${shadows.neutral.medium.spread}px ${shadows.neutral.medium.shadow}`,
         },
         // Style the arrow
         [`& .${tooltipClasses.arrow}`]: {
@@ -6621,8 +6575,8 @@ const StyledTooltip = 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)
  *
@@ -6845,5 +6799,5 @@ NeoTypologyControl.displayName = 'NeoTypologyControl';
 
 const version = '0.0.0-development';
 
-export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoDropdown as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDownloadToast, NeoDropdown, NeoDropdownMenu, NeoDropdownMenuItem, NeoDropdownMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMarketplaceCard, NeoMarketplaceLargeCard, NeoDropdownMenu as NeoMenu, NeoDropdownMenuItem as NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoDropdown as NeoSelect, NeoDropdownMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoStatusBanner, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
+export { ActivityScene, CIRCLE_RADIUS, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert, NeoAvatar, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDownloadToast, NeoSelect as NeoDropdown, NeoMenu as NeoDropdownMenu, NeoMenuItem as NeoDropdownMenuItem, NeoMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconWrapper, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoSearchChip, NeoSelect, NeoMenuItem as NeoSelectOption, NeoSkeleton, NeoStatusBadgeCell, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, neoRowHeights, version };
 //# sourceMappingURL=index.esm.js.map