@moderneinc/neo-styled-components 2.6.0-next.ffaf01 → 2.7.0

package/dist/index.js

@@ -690,11 +690,11 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$i = [
+const __iconNode$j = [
   ["path", { d: "M12 5v14", key: "s699le" }],
   ["path", { d: "m19 12-7 7-7-7", key: "1idqje" }]
 ];
-const ArrowDown = createLucideIcon("arrow-down", __iconNode$i);
+const ArrowDown = createLucideIcon("arrow-down", __iconNode$j);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -704,11 +704,11 @@ const ArrowDown = createLucideIcon("arrow-down", __iconNode$i);
  */
 
 
-const __iconNode$h = [
+const __iconNode$i = [
   ["path", { d: "m5 12 7-7 7 7", key: "hav0vg" }],
   ["path", { d: "M12 19V5", key: "x0mq9r" }]
 ];
-const ArrowUp = createLucideIcon("arrow-up", __iconNode$h);
+const ArrowUp = createLucideIcon("arrow-up", __iconNode$i);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -718,7 +718,7 @@ const ArrowUp = createLucideIcon("arrow-up", __iconNode$h);
  */
 
 
-const __iconNode$g = [
+const __iconNode$h = [
   ["path", { d: "M8 2v4", key: "1cmpym" }],
   ["path", { d: "M16 2v4", key: "4m81vk" }],
   ["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
@@ -730,7 +730,7 @@ const __iconNode$g = [
   ["path", { d: "M12 18h.01", key: "mhygvu" }],
   ["path", { d: "M16 18h.01", key: "kzsmim" }]
 ];
-const CalendarDays = createLucideIcon("calendar-days", __iconNode$g);
+const CalendarDays = createLucideIcon("calendar-days", __iconNode$h);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -740,8 +740,8 @@ const CalendarDays = createLucideIcon("calendar-days", __iconNode$g);
  */
 
 
-const __iconNode$f = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
+const __iconNode$g = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$g);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -751,8 +751,8 @@ const ChevronDown = createLucideIcon("chevron-down", __iconNode$f);
  */
 
 
-const __iconNode$e = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
-const ChevronLeft = createLucideIcon("chevron-left", __iconNode$e);
+const __iconNode$f = [["path", { d: "m15 18-6-6 6-6", key: "1wnfg3" }]];
+const ChevronLeft = createLucideIcon("chevron-left", __iconNode$f);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -762,8 +762,8 @@ const ChevronLeft = createLucideIcon("chevron-left", __iconNode$e);
  */
 
 
-const __iconNode$d = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
-const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
+const __iconNode$e = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$e);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -773,8 +773,8 @@ const ChevronRight = createLucideIcon("chevron-right", __iconNode$d);
  */
 
 
-const __iconNode$c = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode$c);
+const __iconNode$d = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("chevron-up", __iconNode$d);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -784,11 +784,11 @@ const ChevronUp = createLucideIcon("chevron-up", __iconNode$c);
  */
 
 
-const __iconNode$b = [
+const __iconNode$c = [
   ["path", { d: "m7 15 5 5 5-5", key: "1hf1tw" }],
   ["path", { d: "m7 9 5-5 5 5", key: "sgt6xg" }]
 ];
-const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$b);
+const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$c);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -798,12 +798,12 @@ const ChevronsUpDown = createLucideIcon("chevrons-up-down", __iconNode$b);
  */
 
 
-const __iconNode$a = [
+const __iconNode$b = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
   ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
 ];
-const CircleAlert = createLucideIcon("circle-alert", __iconNode$a);
+const CircleAlert = createLucideIcon("circle-alert", __iconNode$b);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -813,11 +813,11 @@ const CircleAlert = createLucideIcon("circle-alert", __iconNode$a);
  */
 
 
-const __iconNode$9 = [
+const __iconNode$a = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$9);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$a);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -827,12 +827,12 @@ const CircleCheck = createLucideIcon("circle-check", __iconNode$9);
  */
 
 
-const __iconNode$8 = [
+const __iconNode$9 = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
   ["path", { d: "M12 17h.01", key: "p32p05" }]
 ];
-const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$8);
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$9);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -842,12 +842,12 @@ const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$8
  */
 
 
-const __iconNode$7 = [
+const __iconNode$8 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
   ["path", { d: "M9 3v18", key: "fh3hqa" }],
   ["path", { d: "M15 3v18", key: "14nvp0" }]
 ];
-const Columns3 = createLucideIcon("columns-3", __iconNode$7);
+const Columns3 = createLucideIcon("columns-3", __iconNode$8);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -857,12 +857,12 @@ const Columns3 = createLucideIcon("columns-3", __iconNode$7);
  */
 
 
-const __iconNode$6 = [
+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$6);
+const Info = createLucideIcon("info", __iconNode$7);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -872,12 +872,12 @@ const Info = createLucideIcon("info", __iconNode$6);
  */
 
 
-const __iconNode$5 = [
+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$5);
+const ListFilter = createLucideIcon("list-filter", __iconNode$6);
 
 /**
  * @license lucide-react v0.577.0 - ISC
@@ -887,11 +887,11 @@ const ListFilter = createLucideIcon("list-filter", __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
@@ -901,11 +901,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
@@ -915,14 +915,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
@@ -959,15 +980,11 @@ const X = createLucideIcon("x", __iconNode);
 
 // 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 !== 'messagePosition' && prop !== 'variant',
-})(({ variant = 'light', messagePosition = 'left' }) => {
-    // Variant-specific styles
-    const variantStyles = {
-        dark: {
-            backgroundColor: neoDesign.semanticColors.surfaces.snackbarBrand,
-            color: neoDesign.semanticColors.surfaces.white,
-        },
-        light: {
+    shouldForwardProp: prop => prop !== 'messagePosition' && prop !== 'variant' && prop !== 'bannerType',
+})(({ variant = 'info', bannerType = 'outlined', messagePosition = 'left' }) => {
+    // Outlined styles (light bg + colored border)
+    const outlinedStyles = {
+        info: {
             backgroundColor: neoDesign.semanticColors.status.info.light,
             color: neoDesign.colors.grey['800'],
         },
@@ -983,6 +1000,50 @@ const StyledAlert$2 = styles.styled(Alert, {
             backgroundColor: neoDesign.semanticColors.status.warning.light,
             color: neoDesign.colors.grey['800'],
         },
+        neutral: {
+            backgroundColor: neoDesign.semanticColors.status.neutral.light,
+            color: neoDesign.colors.grey['800'],
+        },
+    };
+    // Filled styles (solid bg)
+    const filledStyles = {
+        info: {
+            backgroundColor: neoDesign.semanticColors.status.info.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+        },
+        success: {
+            backgroundColor: neoDesign.semanticColors.status.success.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+        },
+        error: {
+            backgroundColor: neoDesign.semanticColors.status.error.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+        },
+        warning: {
+            backgroundColor: neoDesign.semanticColors.status.warning.default,
+            color: neoDesign.semanticColors.typography.warning,
+        },
+        neutral: {
+            backgroundColor: neoDesign.semanticColors.surfaces.snackbarLightMode,
+            color: neoDesign.semanticColors.surfaces.white,
+        },
+    };
+    // Legacy variants (ignore bannerType)
+    const legacyStyles = {
+        dark: {
+            backgroundColor: neoDesign.semanticColors.surfaces.snackbarBrand,
+            color: neoDesign.semanticColors.surfaces.white,
+        },
+        light: {
+            backgroundColor: neoDesign.semanticColors.status.info.light,
+            color: neoDesign.colors.grey['800'],
+        },
+    };
+    const getVariantStyles = () => {
+        if (legacyStyles[variant])
+            return legacyStyles[variant];
+        const styleMap = bannerType === 'filled' ? filledStyles : outlinedStyles;
+        return styleMap[variant] ?? outlinedStyles.info;
     };
     return {
         width: '100%',
@@ -999,7 +1060,7 @@ const StyledAlert$2 = styles.styled(Alert, {
         fontSize: neoDesign.typography.fontSize.default,
         fontWeight: neoDesign.typography.fontWeight.regular,
         lineHeight: 1.5,
-        ...variantStyles[variant],
+        ...getVariantStyles(),
         [`& .${Alert.alertClasses.icon}`]: {
             padding: 0,
             opacity: 1,
@@ -1022,15 +1083,16 @@ const StyledAlert$2 = styles.styled(Alert, {
         },
     };
 });
-const LinkText = styles.styled('span')(({ variant = 'light' }) => {
+const LinkText = styles.styled('span')(({ variant = 'info', bannerType = 'outlined' }) => {
+    const isLegacy = variant === 'dark' || variant === 'light';
+    const isFilled = !isLegacy && bannerType === 'filled';
     const getLinkColor = () => {
-        if (variant === 'dark') {
-            return neoDesign.semanticColors.typography.link.default; // #f9fafb (light gray/white)
+        if (variant === 'dark' || isFilled) {
+            return neoDesign.semanticColors.typography.link.default;
         }
-        if (variant === 'light') {
-            return neoDesign.semanticColors.typography.link.primary; // #2f42ff (blue)
+        if (variant === 'light' || variant === 'info') {
+            return neoDesign.semanticColors.typography.link.primary;
         }
-        // For success, error, warning - use dark body color #1f2937
         return neoDesign.colors.grey['800'];
     };
     return {
@@ -1055,15 +1117,20 @@ const StyledIconButton$1 = styles.styled(IconButton)(({ closeIconColor }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4170-2158
  *
  * Figma Props Mapping:
- * - color (Dark|Light|Success|Error|Warning) → variant (dark|light|success|error|warning)
- * - messagePosition (Left|Center) → messagePosition ("left"|"center")
- * - closeIcon (boolean) → showClose (boolean)
- * - link (boolean) → linkText (string)
- * - {Message} → message (string)
- */
-const NeoBanner = ({ variant = 'light', message, messagePosition = 'left', linkText, showClose = true, icon, onClose, onLinkClick, ...props }) => {
+ * - Intention (Info|Success|Error|Warning|Neutral) → variant (info|success|error|warning|neutral)
+ * - Type (Outlined|Filled) → type ('outlined'|'filled')
+ * - Message Position (Left|Center) → messagePosition ('left'|'center')
+ * - Dismissible (boolean) → showClose (boolean)
+ * - Show Link (boolean) → linkText presence (string when shown)
+ */
+const NeoBanner = ({ variant = 'info', type = 'outlined', message, messagePosition = 'left', linkText, showClose = true, icon, onClose, onLinkClick, ...props }) => {
+    const isLegacy = variant === 'dark' || variant === 'light';
+    const isFilled = !isLegacy && type === 'filled';
     const getCloseIconColor = () => {
-        if (variant === 'dark') {
+        if (isFilled && variant === 'warning') {
+            return neoDesign.semanticColors.typography.warning;
+        }
+        if (variant === 'dark' || isFilled) {
             return neoDesign.semanticColors.surfaces.white;
         }
         if (variant === 'success') {
@@ -1077,7 +1144,7 @@ const NeoBanner = ({ variant = 'light', message, messagePosition = 'left', linkT
         }
         return neoDesign.colors.grey['800'];
     };
-    return (jsxRuntime.jsx(StyledAlert$2, { ...props, variant: variant, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsxRuntime.jsx(StyledIconButton$1, { size: "small", onClick: onClose, closeIconColor: getCloseIconColor(), 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, { variant: variant, onClick: onLinkClick, children: linkText }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { variant: variant, onClick: onLinkClick, children: linkText }))] })) }));
+    return (jsxRuntime.jsx(StyledAlert$2, { ...props, variant: variant, bannerType: type, messagePosition: messagePosition, icon: messagePosition === 'left' ? icon || false : false, action: showClose ? (jsxRuntime.jsx(StyledIconButton$1, { size: "small", onClick: onClose, closeIconColor: getCloseIconColor(), 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, { variant: variant, bannerType: type, onClick: onLinkClick, children: linkText }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { children: message }), linkText && (jsxRuntime.jsx(LinkText, { variant: variant, bannerType: type, onClick: onLinkClick, children: linkText }))] })) }));
 };
 NeoBanner.displayName = 'NeoBanner';
 
@@ -1808,9 +1875,9 @@ const IconWrapper$2 = styles.styled('span')(({ theme, isMultiline }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4187-30353
  *
  * Figma Props Mapping:
- * - Color (Light|Dark) → variant (outlined|filled)
- * - size (Single line|multiline|inline) → size prop + auto-detected multiline
- * - Copy button → endIcon (ReactNode)
+ * - Theme (Dark|Light) → variant (outlined|filled)
+ * - Content (Single|Multi|Inline) → size (small|large|inline)
+ * - Show icon (boolean) → endIcon (ReactNode, unmappable)
  * - Text content → children prop
  */
 const NeoCodeSnippet = ({ variant = 'outlined', size = 'small', endIcon, children, ...props }) => {
@@ -2685,9 +2752,9 @@ 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)
+ * - Size (Small|Medium|Large) → size (small|medium|large)
+ * - Type (Outline|Filled) → variant (outlined|filled)
+ * - Intent (Neutral|Error|Warning|Success|Info|Violet|Beta) → color (default|error|warning|success|info|violet|beta)
  * - Label text → label prop
  */
 const NeoTag = ({ size = 'small', variant = 'outlined', ...props }) => {
@@ -5990,7 +6057,7 @@ NeoSkeleton.displayName = 'NeoSkeleton';
 
 /**
  * Styled Alert component with custom severity and variant styling
- * Uses Custom Variants Pattern to add 'neutral' and 'info' severities
+ * Uses Custom Variants Pattern to add 'neutral', 'info', and 'warning' severities
  */
 const StyledAlert$1 = styles.styled(Alert, {
     shouldForwardProp: prop => prop !== 'severity' && prop !== 'variant',
@@ -6013,27 +6080,35 @@ const StyledAlert$1 = styles.styled(Alert, {
             light: neoDesign.semanticColors.status.info.light,
             medium: neoDesign.semanticColors.status.info.default,
         },
+        warning: {
+            light: neoDesign.semanticColors.status.warning.light,
+            medium: neoDesign.semanticColors.status.warning.default,
+        },
     };
     const severityColors = colorMap[severity];
-    // Variant-specific styles based on Phase 1.1 analysis
+    const isWarningFilled = severity === 'warning' && variant === 'filled';
+    // Variant-specific styles
     const variantStyles = (() => {
         if (variant === 'filled') {
-            // Dark mode: solid background with white text
+            // Warning filled uses dark text for contrast on yellow bg
+            const textColor = isWarningFilled
+                ? neoDesign.semanticColors.typography.warning
+                : neoDesign.semanticColors.typography.tooltip;
             return {
                 backgroundColor: severityColors.medium,
                 border: 'none',
-                color: neoDesign.semanticColors.typography.tooltip,
+                color: textColor,
                 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,
+                    color: textColor,
                 },
                 [`& .${Alert.alertClasses.message}`]: {
-                    color: neoDesign.semanticColors.typography.tooltip,
+                    color: textColor,
                 },
             };
         }
-        // Light mode: light background with border
+        // Outlined: light background with border
         return {
             backgroundColor: severityColors.light,
             border: `1px solid ${severityColors.medium}`,
@@ -6062,7 +6137,9 @@ const StyledAlert$1 = styles.styled(Alert, {
             fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
             fontWeight: neoDesign.typography.fontWeight.regular,
             color: variant === 'filled'
-                ? neoDesign.semanticColors.typography.tooltip
+                ? isWarningFilled
+                    ? neoDesign.semanticColors.typography.warning
+                    : neoDesign.semanticColors.typography.tooltip
                 : neoDesign.semanticColors.typography.bodySecondary,
             lineHeight: 1.4,
             marginTop: theme.spacing(0.25),
@@ -6072,20 +6149,21 @@ const StyledAlert$1 = styles.styled(Alert, {
 /**
  * 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).
+ * Displays status information with different severity levels (success, error, info, neutral, warning)
+ * 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')
+ * - Intent (Success|Error|Info|Offline|Warning) → severity ('success'|'error'|'info'|'neutral'|'warning')
+ * - Type (Outlined|Filled) → 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
+ * - status.warning.light, status.warning.default
  * - typography.tooltip, typography.bodySecondary
  * - grey[800]
  * - fontSize.default, fontSize.sm
@@ -6100,6 +6178,7 @@ const NeoStatusBanner = ({ severity = 'success', variant = 'outlined', icon, chi
         error: jsxRuntime.jsx(CircleAlert, { size: 24 }),
         neutral: jsxRuntime.jsx(WifiOff, { size: 24 }),
         info: jsxRuntime.jsx(Info, { size: 24 }),
+        warning: jsxRuntime.jsx(TriangleAlert, { size: 24 }),
     };
     const defaultIcon = iconMap[severity];
     // Type assertion needed: severity and variant are custom props filtered by shouldForwardProp
@@ -6164,11 +6243,9 @@ const TabLabelContainer = styles.styled('span')(({ theme }) => ({
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=3368-26152
  *
  * 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)
+ * - Selected (True|False) → Controlled by parent NeoTabs value
+ * - State (Default|Hover|Focus|Disabled) → CSS states + disabled prop
+ * - Show tag (boolean) → count prop (renders NeoTag)
  * - Text label → label prop
  */
 const NeoTab = ({ label, count, ...props }) => {
@@ -6179,8 +6256,8 @@ NeoTab.displayName = 'NeoTab';
 
 // 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' && prop !== 'showProgress',
-})(({ theme, variant = 'default' }) => {
+    shouldForwardProp: prop => prop !== 'variant' && prop !== 'toastType' && prop !== 'showProgress',
+})(({ theme, variant = 'default', toastType = 'outlined' }) => {
     // Base styles
     const baseStyles = {
         padding: neoDesign.spacing.spacing_2,
@@ -6204,23 +6281,13 @@ const StyledAlert = styles.styled(Alert, {
             marginRight: 0,
         },
     };
-    // Variant-specific styles
-    const variantStyles = {
+    // Outlined intent styles (light bg + colored border)
+    const outlinedStyles = {
         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,
@@ -6236,51 +6303,135 @@ const StyledAlert = styles.styled(Alert, {
             color: neoDesign.semanticColors.status.info.dark,
             border: `1px solid ${neoDesign.semanticColors.status.info.default}`,
         },
+        warning: {
+            backgroundColor: neoDesign.semanticColors.status.warning.light,
+            color: neoDesign.semanticColors.status.warning.dark,
+            border: `1px solid ${neoDesign.semanticColors.status.warning.default}`,
+        },
+    };
+    // Filled intent styles (solid bg)
+    const filledStyles = {
+        default: {
+            backgroundColor: neoDesign.semanticColors.surfaces.snackbarLightMode,
+            color: neoDesign.semanticColors.surfaces.white,
+            border: `1px solid ${neoDesign.semanticColors.surfaces.snackbarLightMode}`,
+        },
+        error: {
+            backgroundColor: neoDesign.semanticColors.status.error.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+            border: `1px solid ${neoDesign.semanticColors.status.error.dark}`,
+        },
+        success: {
+            backgroundColor: neoDesign.semanticColors.status.success.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+            border: `1px solid ${neoDesign.semanticColors.status.success.dark}`,
+        },
+        info: {
+            backgroundColor: neoDesign.semanticColors.status.info.dark,
+            color: neoDesign.semanticColors.surfaces.white,
+            border: `1px solid ${neoDesign.semanticColors.status.info.dark}`,
+        },
+        warning: {
+            backgroundColor: neoDesign.semanticColors.status.warning.default,
+            color: neoDesign.semanticColors.typography.warning,
+            border: `1px solid ${neoDesign.semanticColors.status.warning.default}`,
+        },
+    };
+    // Legacy variants (ignore toastType)
+    const legacyStyles = {
+        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}`,
+        },
         download: {
             backgroundColor: neoDesign.semanticColors.surfaces.snackbarDarkMode,
             color: neoDesign.colors.grey['800'],
             border: `1px solid ${neoDesign.semanticColors.border.primary}`,
         },
     };
+    const getVariantStyles = () => {
+        if (legacyStyles[variant])
+            return legacyStyles[variant];
+        const styleMap = toastType === 'filled' ? filledStyles : outlinedStyles;
+        return styleMap[variant] ?? outlinedStyles.default;
+    };
     return {
         ...baseStyles,
-        ...variantStyles[variant],
+        ...getVariantStyles(),
     };
 });
-const ToastTitle = styles.styled('p')(({ theme, variant = 'default' }) => {
-    const colorMap = {
+const ToastTitle = styles.styled('p')(({ theme, variant = 'default', toastType = 'outlined' }) => {
+    const outlinedColors = {
         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,
+        warning: neoDesign.semanticColors.status.warning.dark,
+    };
+    const filledColors = {
+        default: neoDesign.semanticColors.surfaces.white,
+        error: neoDesign.semanticColors.surfaces.white,
+        success: neoDesign.semanticColors.surfaces.white,
+        info: neoDesign.semanticColors.surfaces.white,
+        warning: neoDesign.semanticColors.typography.warning,
+    };
+    const legacyColors = {
+        dark: neoDesign.semanticColors.surfaces.white,
+        brand: neoDesign.semanticColors.surfaces.white,
         download: neoDesign.colors.grey['700'],
     };
+    const getColor = () => {
+        if (legacyColors[variant])
+            return legacyColors[variant];
+        const colorMap = toastType === 'filled' ? filledColors : outlinedColors;
+        return colorMap[variant] ?? outlinedColors.default;
+    };
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
         fontWeight: neoDesign.typography.fontWeight.semiBold,
         lineHeight: 1.4,
-        color: colorMap[variant],
+        color: getColor(),
     };
 });
-const ToastMessage = styles.styled('p')(({ theme, variant = 'default' }) => {
-    const colorMap = {
+const ToastMessage = styles.styled('p')(({ theme, variant = 'default', toastType = 'outlined' }) => {
+    const outlinedColors = {
         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,
+        warning: neoDesign.semanticColors.status.warning.dark,
+    };
+    const filledColors = {
+        default: neoDesign.colors.grey['200'],
+        error: neoDesign.semanticColors.surfaces.white,
+        success: neoDesign.semanticColors.surfaces.white,
+        info: neoDesign.semanticColors.surfaces.white,
+        warning: neoDesign.semanticColors.typography.warning,
+    };
+    const legacyColors = {
+        dark: neoDesign.colors.grey['200'],
+        brand: neoDesign.colors.grey['200'],
         download: neoDesign.colors.grey['800'],
     };
+    const getColor = () => {
+        if (legacyColors[variant])
+            return legacyColors[variant];
+        const colorMap = toastType === 'filled' ? filledColors : outlinedColors;
+        return colorMap[variant] ?? outlinedColors.default;
+    };
     return {
         margin: 0,
         fontSize: theme.typography.pxToRem(neoDesign.typography.fontSize.sm),
         fontWeight: neoDesign.typography.fontWeight.regular,
         lineHeight: 1.4,
-        color: colorMap[variant],
+        color: getColor(),
     };
 });
 const ToastActions = styles.styled(Stack)({
@@ -6289,29 +6440,39 @@ 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 !== 'toastVariant' && prop !== 'toastType' && prop !== 'primary',
+})(({ toastVariant = 'default', toastType = 'outlined', primary }) => {
+    const isLegacy = toastVariant === 'dark' || toastVariant === 'brand' || toastVariant === 'download';
+    const isFilled = !isLegacy && toastType === 'filled';
     const getColor = () => {
         if (primary) {
             if (toastVariant === 'dark' || toastVariant === 'brand') {
                 return neoDesign.colors.digitalBlue['200'];
             }
+            if (isFilled) {
+                return toastVariant === 'warning'
+                    ? neoDesign.semanticColors.typography.link.primary
+                    : neoDesign.semanticColors.surfaces.white;
+            }
             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 (isFilled) {
+            return toastVariant === 'warning'
+                ? neoDesign.semanticColors.typography.warning
+                : neoDesign.semanticColors.surfaces.white;
         }
-        if (toastVariant === 'success') {
+        if (toastVariant === 'error')
+            return neoDesign.semanticColors.status.error.dark;
+        if (toastVariant === 'success')
             return neoDesign.semanticColors.status.success.dark;
-        }
-        if (toastVariant === 'info') {
+        if (toastVariant === 'info')
             return neoDesign.semanticColors.status.info.dark;
-        }
-        // default and download variants use icon placeholder color
+        if (toastVariant === 'warning')
+            return neoDesign.semanticColors.status.warning.dark;
         return neoDesign.semanticColors.icons.placeholder;
     };
     return {
@@ -6375,27 +6536,27 @@ const DownloadIconButton = styles.styled(IconButton)({
  * @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|Download) → variant (default|dark|brand|error|success|info|download)
- * - header → title (string)
- * - supportingText → message (string)
- * - xCloseButton → showClose (boolean)
- * - actions → actions (ReactNode)
- * - Progress bar → progress (number 0-100)
- */
-const NeoToast = ({ variant = 'default', title, message, showClose = true, actions, progress, fileName, onClose, ...props }) => {
+ * - Intent (Neutral|Error|Success|Info|Warning) → variant (default|error|success|info|warning)
+ * - Type (Outlined|Filled) → type ('outlined'|'filled')
+ * - Show header → title (string)
+ * - Show supporting text → message (string)
+ * - Show close icon → showClose (boolean)
+ * - Show actions → actions (ReactNode)
+ */
+const NeoToast = ({ variant = 'default', type = 'outlined', title, message, showClose = true, actions, progress, fileName, onClose, ...props }) => {
     const isDownloadVariant = variant === 'download';
-    return (jsxRuntime.jsx(StyledAlert, { ...props, variant: variant, showProgress: isDownloadVariant, action: showClose && !isDownloadVariant ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: neoDesign.semanticColors.icons.placeholder }, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: isDownloadVariant ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: {
+    return (jsxRuntime.jsx(StyledAlert, { ...props, variant: variant, toastType: type, showProgress: isDownloadVariant, action: showClose && !isDownloadVariant ? (jsxRuntime.jsx(IconButton, { size: "small", onClick: onClose, sx: { color: neoDesign.semanticColors.icons.placeholder }, children: jsxRuntime.jsx(X, { size: 16 }) })) : undefined, children: isDownloadVariant ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: {
                         alignItems: 'flex-start',
                         justifyContent: 'space-between',
                         width: '100%',
                         gap: `${neoDesign.spacing.spacing_4}px`,
-                    }, children: [title && jsxRuntime.jsx(ToastTitle, { variant: variant, children: title }), showClose && (jsxRuntime.jsxs(DownloadActions, { direction: "row", children: [jsxRuntime.jsx(DownloadIconButton, { size: "small", children: jsxRuntime.jsx(Stack, { sx: { width: 16, height: 16 } }) }), jsxRuntime.jsx(DownloadIconButton, { size: "small", onClick: onClose, children: jsxRuntime.jsx(X, { size: 16 }) })] }))] }), jsxRuntime.jsxs(ProgressSection, { children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: { alignItems: 'flex-end', justifyContent: 'space-between', width: '100%' }, children: [fileName && jsxRuntime.jsx(FileName, { children: fileName }), progress !== undefined && jsxRuntime.jsxs(ProgressLabel, { children: [progress, "%"] })] }), jsxRuntime.jsx(StyledLinearProgress, { variant: "determinate", value: progress ?? 0 })] })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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 })] })) }));
+                    }, children: [title && (jsxRuntime.jsx(ToastTitle, { variant: variant, toastType: type, children: title })), showClose && (jsxRuntime.jsxs(DownloadActions, { direction: "row", children: [jsxRuntime.jsx(DownloadIconButton, { size: "small", children: jsxRuntime.jsx(Stack, { sx: { width: 16, height: 16 } }) }), jsxRuntime.jsx(DownloadIconButton, { size: "small", onClick: onClose, children: jsxRuntime.jsx(X, { size: 16 }) })] }))] }), jsxRuntime.jsxs(ProgressSection, { children: [jsxRuntime.jsxs(Stack, { direction: "row", sx: { alignItems: 'flex-end', justifyContent: 'space-between', width: '100%' }, children: [fileName && jsxRuntime.jsx(FileName, { children: fileName }), progress !== undefined && jsxRuntime.jsxs(ProgressLabel, { children: [progress, "%"] })] }), jsxRuntime.jsx(StyledLinearProgress, { variant: "determinate", value: progress ?? 0 })] })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Stack, { sx: { gap: `${neoDesign.spacing.spacing_1}px`, width: '100%' }, children: [title && (jsxRuntime.jsx(ToastTitle, { variant: variant, toastType: type, children: title })), message && (jsxRuntime.jsx(ToastMessage, { variant: variant, 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, variant = 'default', type = 'outlined', children, ...props }) => {
+    return (jsxRuntime.jsx(ToastButton, { variant: "text", toastVariant: variant, toastType: type, primary: primary, ...props, children: children }));
 };
 NeoToast.displayName = 'NeoToast';
 NeoToastButton.displayName = 'NeoToastButton';
@@ -6682,10 +6843,10 @@ 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)
- * - Supporting text (True|False) → description (string|undefined)
- * - text → title (string, literal content)
+ * - Theme (Light mode|Dark mode|Brand color) → variant ('light'|'dark'|'brand')
+ * - Placement (None|Bottom left|...|Top center) → arrow (boolean) + placement
+ * - Show description (boolean) → description (string|undefined)
+ * - Text → title (string, literal content)
  *
  * Design Tokens Used:
  * - Light: surfaces.tooltip (#4b5563), typography.tooltip (#ffffff)