@moderneinc/neo-styled-components 3.0.0-next.cbf6d5 → 3.0.0-next.ff608c

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,50 @@
+import { type AlertProps } from '@mui/material/Alert';
+import type { ReactNode } from 'react';
+type Intent = 'success' | 'error' | 'warning' | 'offline' | 'info';
+type AlertType = 'outlined' | 'filled';
+export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color'> {
+    /**
+     * The intent/purpose of the alert
+     * @default "success"
+     * @figma Intent
+     */
+    intent?: Intent;
+    /**
+     * Visual type: outlined (light bg) or filled (solid bg)
+     * @default "outlined"
+     * @figma Type
+     */
+    type?: AlertType;
+    /**
+     * The title text displayed in the alert
+     */
+    title: string;
+    /**
+     * Optional supporting description text
+     */
+    description?: string;
+    /**
+     * Custom icon to display (defaults to intent-based icon)
+     */
+    icon?: ReactNode;
+    /**
+     * Optional action element (typically a button) displayed on the right
+     */
+    action?: ReactNode;
+}
+/**
+ * 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
+ */
+export declare const NeoAlert: {
+    ({ intent, type, title, description, icon, action, ...props }: NeoAlertProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/dist/index.d.ts

@@ -362,7 +362,7 @@ declare const NeoBadge: {
     displayName: string;
 };
 
-type Intent = 'info' | 'success' | 'error' | 'warning' | 'neutral';
+type Intent$1 = 'info' | 'success' | 'error' | 'warning' | 'neutral';
 type BannerType = 'outlined' | 'filled';
 interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'color'> {
     /**
@@ -371,7 +371,7 @@ interface NeoBannerProps extends Omit<AlertProps, 'variant' | 'severity' | 'colo
      *
      * @figmaPropMapping Intention (Info|Success|Error|Warning|Neutral) → intent
      */
-    intent?: Intent;
+    intent?: Intent$1;
     /**
      * Visual type: outlined (light bg) or filled (solid bg)
      * @default "outlined"
@@ -2104,57 +2104,51 @@ declare const NeoSkeleton: {
     displayName: string;
 };
 
-/**
- * Props for the NeoStatusBanner component
- */
-interface NeoStatusBannerProps extends Omit<AlertProps, 'severity' | 'variant'> {
+type Intent = 'success' | 'error' | 'warning' | 'offline' | 'info';
+type AlertType = 'outlined' | 'filled';
+interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color'> {
     /**
-     * The severity level of the status banner
+     * The intent/purpose of the alert
      * @default "success"
      * @figma Intent
      */
-    severity?: 'success' | 'error' | 'neutral' | 'info';
+    intent?: Intent;
     /**
-     * The visual variant style
+     * Visual type: outlined (light bg) or filled (solid bg)
      * @default "outlined"
-     * @figma Theme
+     * @figma Type
      */
-    variant?: 'outlined' | 'filled';
+    type?: AlertType;
     /**
-     * The content to display inside the banner
+     * The title text displayed in the alert
      */
-    children?: ReactNode;
+    title: string;
+    /**
+     * Optional supporting description text
+     */
+    description?: string;
     /**
-     * Custom icon to display (defaults to severity-based icon)
+     * Custom icon to display (defaults to intent-based icon)
      */
     icon?: ReactNode;
+    /**
+     * Optional action element (typically a button) displayed on the right
+     */
+    action?: ReactNode;
 }
 /**
- * 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).
+ * 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:
- * - 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
- */
-declare const NeoStatusBanner: {
-    ({ severity, variant, icon, children, ...props }: NeoStatusBannerProps): react_jsx_runtime.JSX.Element;
+ * - Intent (Success|Error|Warning|Offline|Info) → intent
+ * - Type (Outlined|Filled) → type
+ * - Show supporting text → description prop presence
+ * - Show Button → action prop presence
+ */
+declare const NeoAlert: {
+    ({ intent, type, title, description, icon, action, ...props }: NeoAlertProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -2938,5 +2932,5 @@ declare module '@mui/x-data-grid-pro' {
 
 declare const version: string
 
-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, NeoDropdown, NeoDropdownMenu, NeoDropdownMenuItem, NeoDropdownMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, 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, version };
-export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCardLargeProps, NeoCardProps, NeoCardSize, NeoCardSmallProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoDropdownMenuItemProps, NeoDropdownMenuProps, NeoDropdownProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMarketplaceLargeCardProps, NeoDropdownMenuItemProps as NeoMenuItemProps, NeoDropdownMenuProps as NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoDropdownProps as NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusBannerProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
+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, NeoDropdown as NeoDataGridSelect, NeoDatePicker, NeoDivider, NeoDot, NeoDropdown, NeoDropdownMenu, NeoDropdownMenuItem, NeoDropdownMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, 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, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, version };
+export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAlertProps, NeoAvatarProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCardLargeProps, NeoCardProps, NeoCardSize, NeoCardSmallProps, NeoCheckboxProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoDropdownMenuItemProps, NeoDropdownMenuProps, NeoDropdownProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoMarketplaceCardProps, NeoMarketplaceLargeCardProps, NeoDropdownMenuItemProps as NeoMenuItemProps, NeoDropdownMenuProps as NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoDropdownProps as NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoTabProps, NeoTagProps, NeoToastProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };

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';
@@ -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,6 +993,92 @@ const __iconNode = [
 ];
 const X = createLucideIcon("x", __iconNode);
 
+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$1 = {
+    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$1[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 = {
     info: semanticColors.status.info,
     success: semanticColors.status.success,
@@ -974,7 +1087,7 @@ 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];
@@ -1054,7 +1167,7 @@ const NeoBanner = ({ intent = 'info', type = 'outlined', message, messagePositio
         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 }))] })) }));
+    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';
 
@@ -5982,127 +6095,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
  *
@@ -6845,5 +6837,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, 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, NeoTab, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToolbar, NeoTooltip, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, getDataGridHeaderStyles, neoRowHeights, version };
 //# sourceMappingURL=index.esm.js.map