@moderneinc/neo-styled-components 3.0.0 → 4.0.0-next.557dc6

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');
@@ -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,6 +995,92 @@ const __iconNode = [
 ];
 const X = createLucideIcon("x", __iconNode);
 
+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$1 = {
+    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$1[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 = {
     info: neoDesign.semanticColors.status.info,
     success: neoDesign.semanticColors.status.success,
@@ -976,7 +1089,7 @@ 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];
@@ -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,
@@ -1056,7 +1169,7 @@ const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePositio
         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 }))] })) }));
+    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';
 
@@ -4073,11 +4186,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 +4780,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 +4837,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 +4848,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 +4939,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 +4969,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: {
@@ -5326,9 +5455,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 +6113,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 +6147,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 +6168,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 +6197,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 }) => {
@@ -6437,7 +6470,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,
             }),
@@ -6606,7 +6639,7 @@ const StyledTooltip = styles.styled(Tooltip, {
                 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}`]: {
@@ -6850,6 +6883,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;
@@ -6911,7 +6945,6 @@ exports.NeoSelect = NeoDropdown;
 exports.NeoSelectOption = NeoDropdownMenuItem;
 exports.NeoSkeleton = NeoSkeleton;
 exports.NeoStatusBadgeCell = NeoStatusBadgeCell;
-exports.NeoStatusBanner = NeoStatusBanner;
 exports.NeoTab = NeoTab;
 exports.NeoTabs = NeoTabs;
 exports.NeoTag = NeoTag;