@moderneinc/neo-styled-components 5.0.0-next.5291ef → 5.0.0-next.6d9b3b

package/dist/Alert/Alert.d.ts

@@ -39,6 +39,12 @@ export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' |
      * Optional action element (typically a button) displayed on the right
      */
     action?: ReactNode;
+    /**
+     * Optional content rendered below the title inside the alert container.
+     * Use for rich content like stack traces or code blocks. When present,
+     * the alert expands to auto height and top-aligns its icon and action.
+     */
+    children?: ReactNode;
 }
 /**
  * NeoAlert - Alert component for displaying contextual status messages
@@ -52,7 +58,7 @@ export interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' |
  * - Show Button → action prop presence
  */
 export declare const NeoAlert: {
-    ({ intent, type, size, title, description, icon, action, ...props }: NeoAlertProps): import("react/jsx-runtime").JSX.Element;
+    ({ intent, type, size, title, description, icon, action, children, ...props }: NeoAlertProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/Breadcrumbs/Breadcrumbs.d.ts

@@ -3,16 +3,6 @@ import type { ElementType, ReactNode } from 'react';
 /**
  * NeoBreadcrumbs - Navigation breadcrumb component
  *
- * Figma Mapping:
- * - Base component uses MuiBreadcrumbs with custom styled Links
- * - Uses chevron separator (ChevronRight from lucide-react)
- * - Typography: 14px Medium (500 weight)
- * - Colors:
- *   - Non-current: semanticColors.typography.bodySecondary (#6b7280)
- *   - Current: semanticColors.buttons.primary.default (#2f42ff)
- *   - Hover: semanticColors.icons.hover (#1f2937) or buttons.tertiary.hover (#1e2ec2)
- * - Focus: 2px outline with buttons.primary.focus
- *
  * @see https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4563-122872
  */
 export interface NeoBreadcrumbsProps {

package/dist/Dot/Dot.d.ts

@@ -1,8 +1,8 @@
-import { type BadgeProps } from '@mui/material/Badge';
+import type { HTMLAttributes, ReactNode } from 'react';
 type DotSize = 'small' | 'medium' | 'large';
 type DotVariant = 'solid' | 'outline';
 type DotColor = 'success' | 'error' | 'warning' | 'info' | 'neutral';
-export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeContent' | 'children'> {
+export interface NeoDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /**
      * The size of the dot
      * @default "medium"
@@ -18,9 +18,16 @@ export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'bad
      * @default "neutral"
      */
     color?: DotColor;
+    /**
+     * Optional icon rendered centered inside the dot. Use to indicate intent within
+     * the dot itself (e.g., a minus icon on a disconnected error dot). SVG children
+     * using `currentColor` inherit a white stroke/fill for contrast against the
+     * colored background, and are scaled to 70% of the dot size.
+     */
+    children?: ReactNode;
 }
 /**
- * NeoDot - Status indicator dot component based on MUI Badge
+ * NeoDot - Status indicator dot.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
  *
@@ -30,7 +37,7 @@ export interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'bad
  * - Color is configurable via color prop (success|error|warning|info|neutral)
  */
 export declare const NeoDot: {
-    ({ size, variant, color, ...props }: NeoDotProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, variant, color, children, ...props }: NeoDotProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/GeneralAvatar/GeneralAvatar.d.ts

@@ -7,12 +7,6 @@ export interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
      * @figma Size
      */
     size?: AvatarSize;
-    /**
-     * Color index for initials background (1-7). Use 0 or omit for image mode.
-     * @default 0
-     * @figma Color Index
-     */
-    colorIndex?: number;
 }
 /**
  * NeoGeneralAvatar - Avatar with image or colored initials display
@@ -20,7 +14,7 @@ export interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
  */
 export declare const NeoGeneralAvatar: {
-    ({ size, colorIndex, children, ...props }: NeoGeneralAvatarProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, alt, children, ...props }: NeoGeneralAvatarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/NavigationAvatar/NavigationAvatar.d.ts

@@ -10,6 +10,6 @@ export interface NeoNavigationAvatarProps extends Omit<NeoGeneralAvatarProps, 's
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
  */
 export declare const NeoNavigationAvatar: {
-    ({ colorIndex, children, ...props }: NeoNavigationAvatarProps): import("react/jsx-runtime").JSX.Element;
+    ({ children, ...props }: NeoNavigationAvatarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/NeoAvatarCell/NeoAvatarCell.d.ts

@@ -5,14 +5,12 @@ type NeoAvatarCellEmpty = NeoAvatarCellBase & {
     empty: true;
     name?: never;
     src?: never;
-    colorIndex?: never;
     label?: never;
 };
 type NeoAvatarCellContent = NeoAvatarCellBase & {
     empty?: false;
     name?: string;
     src?: string;
-    colorIndex?: number;
     label?: string;
 };
 export type NeoAvatarCellProps = NeoAvatarCellEmpty | NeoAvatarCellContent;
@@ -21,7 +19,7 @@ export type NeoAvatarCellProps = NeoAvatarCellEmpty | NeoAvatarCellContent;
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=13425-1725
  */
 export declare const NeoAvatarCell: {
-    ({ name, src, colorIndex, label, disabled, empty, }: NeoAvatarCellProps): import("react/jsx-runtime").JSX.Element;
+    ({ name, src, label, disabled, empty, }: NeoAvatarCellProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/index.d.ts

@@ -16,7 +16,6 @@ import * as _mui_material_styles from '@mui/material/styles';
 import { SxProps, Theme, Breakpoint } from '@mui/material/styles';
 import { DividerProps } from '@mui/material/Divider';
 import { PaperProps } from '@mui/material/Paper';
-import { BadgeProps } from '@mui/material/Badge';
 import { AvatarProps } from '@mui/material/Avatar';
 import { InputBaseProps } from '@mui/material/InputBase';
 import { MenuProps } from '@mui/material/Menu';
@@ -26,7 +25,7 @@ import { BoxProps } from '@mui/material/Box';
 import { LinearProgressProps } from '@mui/material/LinearProgress';
 import { RadioProps } from '@mui/material/Radio';
 import * as _mui_system from '@mui/system';
-import { SelectProps } from '@mui/material/Select';
+import { SelectProps, SelectChangeEvent } from '@mui/material/Select';
 import { SkeletonProps } from '@mui/material/Skeleton';
 import { TableProps } from '@mui/material/Table';
 import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
@@ -390,16 +389,6 @@ declare const NeoBanner: {
 /**
  * NeoBreadcrumbs - Navigation breadcrumb component
  *
- * Figma Mapping:
- * - Base component uses MuiBreadcrumbs with custom styled Links
- * - Uses chevron separator (ChevronRight from lucide-react)
- * - Typography: 14px Medium (500 weight)
- * - Colors:
- *   - Non-current: semanticColors.typography.bodySecondary (#6b7280)
- *   - Current: semanticColors.buttons.primary.default (#2f42ff)
- *   - Hover: semanticColors.icons.hover (#1f2937) or buttons.tertiary.hover (#1e2ec2)
- * - Focus: 2px outline with buttons.primary.focus
- *
  * @see https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4563-122872
  */
 interface NeoBreadcrumbsProps {
@@ -1083,14 +1072,12 @@ type NeoAvatarCellEmpty = NeoAvatarCellBase & {
     empty: true;
     name?: never;
     src?: never;
-    colorIndex?: never;
     label?: never;
 };
 type NeoAvatarCellContent = NeoAvatarCellBase & {
     empty?: false;
     name?: string;
     src?: string;
-    colorIndex?: number;
     label?: string;
 };
 type NeoAvatarCellProps = NeoAvatarCellEmpty | NeoAvatarCellContent;
@@ -1099,7 +1086,7 @@ type NeoAvatarCellProps = NeoAvatarCellEmpty | NeoAvatarCellContent;
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=13425-1725
  */
 declare const NeoAvatarCell: {
-    ({ name, src, colorIndex, label, disabled, empty, }: NeoAvatarCellProps): react_jsx_runtime.JSX.Element;
+    ({ name, src, label, disabled, empty, }: NeoAvatarCellProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1424,7 +1411,7 @@ declare const NeoDownloadToast: {
 type DotSize = 'small' | 'medium' | 'large';
 type DotVariant = 'solid' | 'outline';
 type DotColor = 'success' | 'error' | 'warning' | 'info' | 'neutral';
-interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeContent' | 'children'> {
+interface NeoDotProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
     /**
      * The size of the dot
      * @default "medium"
@@ -1440,9 +1427,16 @@ interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeConte
      * @default "neutral"
      */
     color?: DotColor;
+    /**
+     * Optional icon rendered centered inside the dot. Use to indicate intent within
+     * the dot itself (e.g., a minus icon on a disconnected error dot). SVG children
+     * using `currentColor` inherit a white stroke/fill for contrast against the
+     * colored background, and are scaled to 70% of the dot size.
+     */
+    children?: ReactNode;
 }
 /**
- * NeoDot - Status indicator dot component based on MUI Badge
+ * NeoDot - Status indicator dot.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
  *
@@ -1452,7 +1446,7 @@ interface NeoDotProps extends Omit<BadgeProps, 'variant' | 'color' | 'badgeConte
  * - Color is configurable via color prop (success|error|warning|info|neutral)
  */
 declare const NeoDot: {
-    ({ size, variant, color, ...props }: NeoDotProps): react_jsx_runtime.JSX.Element;
+    ({ size, variant, color, children, ...props }: NeoDotProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1506,12 +1500,6 @@ interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
      * @figma Size
      */
     size?: AvatarSize;
-    /**
-     * Color index for initials background (1-7). Use 0 or omit for image mode.
-     * @default 0
-     * @figma Color Index
-     */
-    colorIndex?: number;
 }
 /**
  * NeoGeneralAvatar - Avatar with image or colored initials display
@@ -1519,7 +1507,7 @@ interface NeoGeneralAvatarProps extends Omit<AvatarProps, 'variant'> {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
  */
 declare const NeoGeneralAvatar: {
-    ({ size, colorIndex, children, ...props }: NeoGeneralAvatarProps): react_jsx_runtime.JSX.Element;
+    ({ size, alt, children, ...props }: NeoGeneralAvatarProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -1852,7 +1840,7 @@ interface NeoNavigationAvatarProps extends Omit<NeoGeneralAvatarProps, 'size'> {
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
  */
 declare const NeoNavigationAvatar: {
-    ({ colorIndex, children, ...props }: NeoNavigationAvatarProps): react_jsx_runtime.JSX.Element;
+    ({ children, ...props }: NeoNavigationAvatarProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -2370,6 +2358,8 @@ declare const NeoSelectField: {
     displayName: string;
 };
 
+type NeoSelectFieldChangeEvent<T = unknown> = SelectChangeEvent<T>;
+
 /**
  * NeoSideNav
  *
@@ -2452,6 +2442,12 @@ interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color
      * Optional action element (typically a button) displayed on the right
      */
     action?: ReactNode;
+    /**
+     * Optional content rendered below the title inside the alert container.
+     * Use for rich content like stack traces or code blocks. When present,
+     * the alert expands to auto height and top-aligns its icon and action.
+     */
+    children?: ReactNode;
 }
 /**
  * NeoAlert - Alert component for displaying contextual status messages
@@ -2465,7 +2461,7 @@ interface NeoAlertProps extends Omit<AlertProps, 'severity' | 'variant' | 'color
  * - Show Button → action prop presence
  */
 declare const NeoAlert: {
-    ({ intent, type, size, title, description, icon, action, ...props }: NeoAlertProps): react_jsx_runtime.JSX.Element;
+    ({ intent, type, size, title, description, icon, action, children, ...props }: NeoAlertProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -3360,4 +3356,4 @@ declare module '@mui/x-data-grid-pro' {
 declare const version: string
 
 export { ActivityScene, CIRCLE_RADIUS, NeoActionsCell, NeoActivityHeader, NeoActivityIndicatorCell, NeoAlert, NeoAvatarCell, NeoBadge, NeoBanner, NeoBreadcrumbLink, NeoBreadcrumbs, NeoButton, NeoButtonTab, NeoButtonTabGroup, NeoCard, NeoCheckbox, NeoCheckboxWithText, NeoCodeSnippet, NeoDataGrid, NeoDataGridCellContent, NeoDataGridColumnsButton, NeoDataGridColumnsPanel, NeoDataGridFilterPanel, NeoDataGridFilterPanelAddIcon, NeoDataGridFilterPanelDeleteIcon, NeoDataGridFilterPanelRemoveAllIcon, NeoDataGridFiltersButton, NeoDataGridHeaderLabel, NeoSelect as NeoDataGridSelect, NeoDatePicker, NeoDatePickerListItem, NeoDatePickerMenu, NeoDivider, NeoDot, NeoDownloadToast, NeoSelect as NeoDropdown, NeoMenu as NeoDropdownMenu, NeoMenuItem as NeoDropdownMenuItem, NeoMenuItem as NeoDropdownOption, NeoFilterChip, NeoFooter, NeoGeneralAvatar, NeoIconButton, NeoIconCell, NeoInfiniteScrollGrid, NeoInputField, NeoListItem, NeoListItemButton, NeoLoadingSpinner, NeoLogoCell, NeoMenu, NeoMenuItem, NeoModal, NeoModalContent, NeoModalFooter, NeoModalHeader, NeoMultiBadgesCell, NeoNavigationAvatar, NeoNavigationItem, NeoPageContent, NeoPaginatedGrid, NeoProgressCell, NeoProgressbar, NeoQuickFilter, NeoRadio, NeoRadioButtonWithText, NeoSearchChip, NeoSelect, NeoSelectField, NeoMenuItem as NeoSelectOption, NeoSideNav, NeoSkeleton, NeoStatusBadgeCell, NeoStatusCell, NeoTab, NeoTabPanel, NeoTable, NeoTabs, NeoTag, NeoToast, NeoToastButton, NeoToggle, NeoToggleButton, NeoToggleButtonGroup, NeoToggleButtonWithText, NeoToolbar, NeoTooltip, NeoTopNav, NeoTourModal, NeoTreeItem, NeoTreeView, StyledToggleButton as NeoTypologyButton, NeoTypologyControl, NeoUserAvatarCell, SortedAscendingIcon, SortedDescendingIcon, UnsortedIcon, focusRingStyles, getDataGridHeaderStyles, getDataGridRowStyles, version };
-export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActionsCellProps, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAlertProps, NeoAvatarCellProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCardLargeProps, NeoCardProps, NeoCardSize, NeoCardSmallProps, NeoCheckboxProps, NeoCheckboxWithTextProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoDownloadToastProps, NeoMenuItemProps as NeoDropdownMenuItemProps, NeoMenuProps as NeoDropdownMenuProps, NeoSelectProps as NeoDropdownProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoIconCellProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoLogoCellProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressCellProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectFieldOption, NeoSelectFieldProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusCellProps, NeoStatusCellVariant, NeoTabPanelProps, NeoTabProps, NeoTableColumn, NeoTableProps, NeoTagProps, NeoToastProps, NeoToggleButtonGroupProps, NeoToggleButtonProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };
+export type { ActivityColor, ActivityEvent, ActivityHeaderSize, BreadcrumbItem, DataGridSize, NeoActionsCellProps, NeoActivityHeaderProps, NeoActivityIndicatorCellProps, NeoAlertProps, NeoAvatarCellProps, NeoBadgeProps, NeoBannerProps, NeoBreadcrumbLinkProps, NeoBreadcrumbsProps, NeoButtonProps, NeoButtonTabGroupProps, NeoButtonTabProps, NeoCardLargeProps, NeoCardProps, NeoCardSize, NeoCardSmallProps, NeoCheckboxProps, NeoCheckboxWithTextProps, NeoCodeSnippetProps, NeoDataGridCellContentProps, NeoDataGridHeaderLabelProps, NeoDataGridProps, NeoDatePickerProps, NeoDividerProps, NeoDotProps, NeoDownloadToastProps, NeoMenuItemProps as NeoDropdownMenuItemProps, NeoMenuProps as NeoDropdownMenuProps, NeoSelectProps as NeoDropdownProps, NeoFilterChipProps, NeoFooterProps, NeoGeneralAvatarProps, NeoIconButtonProps, NeoIconCellProps, NeoInfiniteScrollGridProps, NeoInputFieldProps, NeoListItemButtonProps, NeoListItemProps, NeoLoadingSpinnerProps, NeoLogoCellProps, NeoMenuItemProps, NeoMenuProps, NeoModalContentProps, NeoModalFooterProps, NeoModalHeaderProps, NeoModalProps, NeoMultiBadgesCellProps, NeoNavigationAvatarProps, NeoNavigationItemProps, NeoPageContentProps, NeoPaginatedGridProps, NeoProgressCellProps, NeoProgressbarProps, NeoQuickFilterProps, NeoRadioProps, NeoSearchChipProps, NeoSelectFieldChangeEvent, NeoSelectFieldOption, NeoSelectFieldProps, NeoSelectProps, NeoSkeletonProps, NeoStatusBadgeCellProps, NeoStatusCellProps, NeoStatusCellVariant, NeoTabPanelProps, NeoTabProps, NeoTableColumn, NeoTableProps, NeoTagProps, NeoToastProps, NeoToggleButtonGroupProps, NeoToggleButtonProps, NeoToggleProps, NeoToolbarProps, NeoTooltipProps, NeoTreeItemData, NeoTreeItemProps, NeoTreeViewProps, NeoTypologyControlProps, NeoUserAvatarCellProps };

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { semanticColors, spacing, typography, borderRadius, colors, shadows } from '@moderneinc/neo-design';
+import { semanticColors, spacing, typography, borderRadius, shadows, colors } from '@moderneinc/neo-design';
 import Box from '@mui/material/Box';
 import { styled, alpha } from '@mui/material/styles';
 import Chip, { chipClasses } from '@mui/material/Chip';
@@ -36,7 +36,6 @@ import { pickersCalendarHeaderClasses } from '@mui/x-date-pickers/PickersCalenda
 import { PickersShortcuts } from '@mui/x-date-pickers/PickersShortcuts';
 import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
 import { dateRangePickerDayClasses } from '@mui/x-date-pickers-pro/DateRangePickerDay';
-import Badge, { badgeClasses } from '@mui/material/Badge';
 import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress';
 import Paper, { paperClasses } from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
@@ -144,18 +143,21 @@ const NeoBadge = ({ size = 'medium', variant = 'filled', ...props }) => {
 };
 NeoBadge.displayName = 'NeoBadge';
 
+const djb2Hash = (str) => {
+    let hash = 5381;
+    for (let i = 0; i < str.length; i++) {
+        hash = (hash * 33) ^ str.charCodeAt(i);
+    }
+    return hash >>> 0;
+};
 /**
- * Shared color palette for avatar components (GeneralAvatar, NavigationAvatar).
- * Maps color index (1-7) to background color token pairs.
+ * Deterministically derives an HSL background color from a string seed.
+ * Produces pastel colors matching the aesthetic of the status.avatar.initials
+ * semantic tokens (fixed 80% saturation, 90% lightness; only hue varies).
  */
-const avatarColorPalette = {
-    1: { bg: colors.digitalBlue[100] },
-    2: { bg: colors.digitalGreen[100] },
-    3: { bg: colors.gold[100] },
-    4: { bg: colors.red[100] },
-    5: { bg: colors.violet[100] },
-    6: { bg: colors.tealGreen[100] },
-    7: { bg: colors.orange[100] },
+const avatarColorFromSeed = (seed) => {
+    const hue = seed ? djb2Hash(seed) % 360 : 235;
+    return `hsl(${hue}, 80%, 90%)`;
 };
 
 /**
@@ -170,14 +172,13 @@ const focusRingStyles = {
 };
 
 const sizeConfig$1 = {
-    small: { width: spacing.spacing_4, height: spacing.spacing_4, fontSize: typography.fontSize.xs },
+    small: { width: spacing.spacing_4, height: spacing.spacing_4, fontSize: typography.fontSize.sm },
     medium: { width: spacing.spacing_5, height: spacing.spacing_5, fontSize: typography.fontSize.sm },
 };
 const StyledAvatar = styled(MuiAvatar, {
-    shouldForwardProp: prop => prop !== 'avatarSize' && prop !== 'colorIndex',
-})(({ theme, avatarSize, colorIndex }) => {
+    shouldForwardProp: prop => prop !== 'avatarSize' && prop !== 'backgroundColor',
+})(({ theme, avatarSize, backgroundColor }) => {
     const size = sizeConfig$1[avatarSize];
-    const palette = avatarColorPalette[colorIndex];
     return {
         boxSizing: 'border-box',
         width: size.width,
@@ -187,7 +188,7 @@ const StyledAvatar = styled(MuiAvatar, {
         fontWeight: typography.fontWeight.regular,
         lineHeight: 1,
         color: semanticColors.typography.body,
-        backgroundColor: palette ? palette.bg : undefined,
+        backgroundColor,
         border: `1px solid ${semanticColors.border.primary}`,
         '&:focus-visible': {
             ...focusRingStyles,
@@ -200,8 +201,9 @@ const StyledAvatar = styled(MuiAvatar, {
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=9600-185
  */
-const NeoGeneralAvatar = ({ size = 'medium', colorIndex = 0, children, ...props }) => {
-    return (jsx(StyledAvatar, { avatarSize: size, colorIndex: colorIndex, ...props, children: children }));
+const NeoGeneralAvatar = ({ size = 'medium', alt, children, ...props }) => {
+    const backgroundColor = avatarColorFromSeed(alt);
+    return (jsx(StyledAvatar, { avatarSize: size, backgroundColor: backgroundColor, alt: alt, ...props, children: children }));
 };
 NeoGeneralAvatar.displayName = 'NeoGeneralAvatar';
 
@@ -912,8 +914,8 @@ const intentColors$2 = {
 };
 // 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' && prop !== 'alertSize',
-})(({ theme, intent = 'success', alertType = 'outlined', alertSize = 'default' }) => {
+    shouldForwardProp: prop => prop !== 'intent' && prop !== 'alertType' && prop !== 'alertSize' && prop !== 'hasChildren',
+})(({ theme, intent = 'success', alertType = 'outlined', alertSize = 'default', hasChildren = false, }) => {
     const palette = intentColors$2[intent];
     const isFilled = alertType === 'filled';
     const isCompact = alertSize === 'compact';
@@ -922,15 +924,19 @@ const StyledAlert$2 = styled(Alert, {
         ? semanticColors.typography.tooltip
         : semanticColors.typography.body;
     return {
-        ...(isCompact ? { minHeight: spacing.spacing_5 } : { height: spacing.spacing_8 }),
+        ...(isCompact
+            ? { minHeight: spacing.spacing_5 }
+            : hasChildren
+                ? { minHeight: spacing.spacing_8, height: 'auto' }
+                : { height: spacing.spacing_8 }),
         width: '100%',
         borderRadius: borderRadius.xS,
-        alignItems: 'center',
+        alignItems: hasChildren ? 'flex-start' : 'center',
         fontFamily: typography.fontFamily.body,
         fontSize: theme.typography.pxToRem(typography.fontSize.default),
         fontWeight: typography.fontWeight.semiBold,
         lineHeight: 1.5,
-        padding: theme.spacing(0, 2),
+        padding: hasChildren ? theme.spacing(1.5, 2) : 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,
@@ -947,7 +953,7 @@ const StyledAlert$2 = styled(Alert, {
             flex: 1,
             display: 'flex',
             flexDirection: 'column',
-            justifyContent: 'center',
+            justifyContent: hasChildren ? 'flex-start' : 'center',
             '& span:last-child': {
                 fontSize: theme.typography.pxToRem(typography.fontSize.sm),
                 fontWeight: typography.fontWeight.medium,
@@ -985,9 +991,9 @@ const iconMap = {
  * - Show supporting text → description prop presence
  * - Show Button → action prop presence
  */
-const NeoAlert = ({ intent = 'success', type = 'outlined', size = 'default', title, description, icon, action, ...props }) => {
+const NeoAlert = ({ intent = 'success', type = 'outlined', size = 'default', title, description, icon, action, children, ...props }) => {
     const defaultIcon = iconMap[intent];
-    return (jsxs(StyledAlert$2, { ...props, intent: intent, alertType: type, alertSize: size, icon: icon ?? defaultIcon, action: action, children: [jsx("span", { children: title }), description && jsx("span", { children: description })] }));
+    return (jsxs(StyledAlert$2, { ...props, intent: intent, alertType: type, alertSize: size, hasChildren: Boolean(children), icon: icon ?? defaultIcon, action: action, children: [jsx("span", { children: title }), description && jsx("span", { children: description }), children] }));
 };
 NeoAlert.displayName = 'NeoAlert';
 
@@ -1099,12 +1105,12 @@ const StyledBreadcrumbLink = styled(Link, {
     fontWeight: typography.fontWeight.medium,
     lineHeight: 1,
     textDecoration: 'none',
-    color: current ? semanticColors.buttons.primary.default : semanticColors.typography.bodySecondary,
+    color: current ? semanticColors.typography.bodySecondary : semanticColors.typography.link.primary,
     cursor: current ? 'default' : 'pointer',
     borderRadius: borderRadius.xS,
     transition: 'color 0.2s ease-in-out',
     '&:hover': {
-        color: current ? semanticColors.buttons.tertiary.hover : semanticColors.icons.hover,
+        color: current ? semanticColors.icons.hover : semanticColors.buttons.tertiary.hover,
     },
     '&:focus-visible': {
         outline: `2px solid ${semanticColors.border.focus}`,
@@ -2823,9 +2829,11 @@ const StyledChip$2 = styled(Chip)(({ theme, size, variant, color }) => ({
     fontSize: theme.typography.pxToRem(typography.fontSize.xs),
     lineHeight: 1,
     fontWeight: typography.fontWeight.medium,
+    overflow: 'visible',
     ...(size && sizeStyles$1[size]),
     [`& .${chipClasses.label}`]: {
         padding: 0,
+        overflow: 'visible',
     },
     ...(variant === 'outlined' &&
         color &&
@@ -3784,26 +3792,34 @@ const sizeMap = {
     medium: 10,
     large: 12,
 };
-const StyledBadge = styled(Badge)(({ ownerState }) => {
+const StyledDot = styled('span', {
+    shouldForwardProp: prop => prop !== 'ownerState',
+})(({ ownerState }) => {
     const size = sizeMap[ownerState.size];
-    const color = semanticColors.status[ownerState.color].default;
+    const palette = semanticColors.status[ownerState.color];
     return {
-        [`& .${badgeClasses.badge}`]: {
-            width: size,
-            height: size,
-            minWidth: size,
-            borderRadius: ownerState.variant === 'solid' ? '50%' : 0,
-            padding: 0,
-            backgroundColor: ownerState.variant === 'solid' ? color : 'transparent',
-            // Remove default badge positioning - make it standalone
-            position: 'static',
-            transform: 'none',
-            overflow: 'visible',
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: size,
+        height: size,
+        minWidth: size,
+        borderRadius: '50%',
+        flexShrink: 0,
+        boxSizing: 'border-box',
+        backgroundColor: palette.default,
+        color: semanticColors.typography.tooltip,
+        ...(ownerState.variant === 'outline' && {
+            border: `3px solid ${palette.light}`,
+        }),
+        '& > svg': {
+            width: '70%',
+            height: '70%',
         },
     };
 });
 /**
- * NeoDot - Status indicator dot component based on MUI Badge
+ * NeoDot - Status indicator dot.
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC/Neo---Moderne-Design-system---2025?node-id=4163-3577
  *
@@ -3812,26 +3828,8 @@ const StyledBadge = styled(Badge)(({ ownerState }) => {
  * - outline (False|True) → variant prop (solid|outline)
  * - Color is configurable via color prop (success|error|warning|info|neutral)
  */
-const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', ...props }) => {
-    const dotSize = sizeMap[size];
-    const mediumColor = semanticColors.status[color].default;
-    const lightColor = semanticColors.status[color].light;
-    // For outline variant, use SVG for precise control
-    const renderDot = () => {
-        if (variant === 'outline') {
-            // SVG approach: outer circle with light fill, inner circle with medium fill
-            // Stroke width of ~3px creates the ring effect
-            const strokeWidth = 3;
-            const radius = dotSize / 2;
-            const innerRadius = radius - strokeWidth;
-            return (jsxs("svg", { width: dotSize, height: dotSize, viewBox: `0 0 ${dotSize} ${dotSize}`, style: {
-                    display: 'block',
-                    borderRadius: '50%',
-                }, role: "img", "aria-label": `${color} status indicator`, children: [jsx("title", { children: `${color} status indicator` }), jsx("circle", { cx: radius, cy: radius, r: radius, fill: lightColor }), jsx("circle", { cx: radius, cy: radius, r: innerRadius, fill: mediumColor })] }));
-        }
-        return jsx("span", { style: { display: 'inline-block', width: 0, height: 0 } });
-    };
-    return (jsx(StyledBadge, { ...props, ownerState: { size, variant, color }, variant: "dot", children: renderDot() }));
+const NeoDot = ({ size = 'medium', variant = 'solid', color = 'neutral', children, ...props }) => {
+    return (jsx(StyledDot, { ...props, ownerState: { size, variant, color }, role: "img", "aria-label": props['aria-label'] ?? `${color} status indicator`, children: children }));
 };
 NeoDot.displayName = 'NeoDot';
 
@@ -5203,9 +5201,8 @@ NeoModalFooter.displayName = 'NeoModalFooter';
 const NavigationAvatarContainer = styled('div')({
     display: 'flex',
     boxSizing: 'border-box',
-    width: spacing.spacing_5,
-    height: spacing.spacing_5,
     padding: spacing.spacing_1_2,
+    aspectRatio: '1 / 1',
     justifyContent: 'center',
     alignItems: 'center',
     borderRadius: '50%',
@@ -5223,8 +5220,8 @@ const NavigationAvatarContainer = styled('div')({
  *
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=11325-102
  */
-const NeoNavigationAvatar = ({ colorIndex = 0, children, ...props }) => {
-    return (jsx(NavigationAvatarContainer, { children: jsx(NeoGeneralAvatar, { size: "small", colorIndex: colorIndex, ...props, children: children }) }));
+const NeoNavigationAvatar = ({ children, ...props }) => {
+    return (jsx(NavigationAvatarContainer, { children: jsx(NeoGeneralAvatar, { size: "small", ...props, children: children }) }));
 };
 NeoNavigationAvatar.displayName = 'NeoNavigationAvatar';
 
@@ -5346,11 +5343,11 @@ const LabelText = styled('span', {
  * NeoAvatarCell — DataGrid cell displaying a user avatar with optional label.
  * @figma https://www.figma.com/design/fQTkGSFbYyE7LiHuQJsENC?node-id=13425-1725
  */
-const NeoAvatarCell = ({ name, src, colorIndex = 0, label, disabled = false, empty = false, }) => {
+const NeoAvatarCell = ({ name, src, label, disabled = false, empty = false, }) => {
     if (empty) {
         return jsx(StyledCell$1, { disabled: disabled });
     }
-    return (jsxs(StyledCell$1, { disabled: disabled, children: [jsx(NeoGeneralAvatar, { size: "small", src: src, alt: name, colorIndex: colorIndex, children: !src && name ? name.charAt(0).toUpperCase() : undefined }), label && jsx(LabelText, { disabled: disabled, children: label })] }));
+    return (jsxs(StyledCell$1, { disabled: disabled, children: [jsx(NeoGeneralAvatar, { size: "small", src: src, alt: name, children: !src && name ? name.charAt(0).toUpperCase() : undefined }), label && jsx(LabelText, { disabled: disabled, children: label })] }));
 };
 NeoAvatarCell.displayName = 'NeoAvatarCell';
 
@@ -5710,7 +5707,7 @@ function NeoPageContent({ pageTitle, subtitle, breadcrumbs, action, sticky = fal
         // Also try to scroll window in case component is in a different context
         window.scrollTo({ top: 0, behavior: 'smooth' });
     };
-    const headerContent = (jsxs(Stack, { ref: headerRef, sx: { flexShrink: 0, gap: '0.5rem' }, children: [breadcrumbs && breadcrumbs.items.length > 0 && (jsx(NeoBreadcrumbs, { children: breadcrumbs.items.map((item, index) => (jsx(NeoBreadcrumbLink, { href: item.href, component: item.href && breadcrumbs.linkComponent ? breadcrumbs.linkComponent : undefined, current: index === breadcrumbs.items.length - 1, children: item.label }, item.href ?? index))) })), jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { gap: '1rem' }, children: [jsxs(Stack, { sx: { gap: '0.5rem', flexGrow: 1 }, children: [jsx(PageTitle, { children: pageTitle }), subtitle &&
+    const headerContent = (jsxs(Stack, { ref: headerRef, sx: { flexShrink: 0, gap: '0.5rem' }, children: [breadcrumbs && breadcrumbs.items.length > 0 && (jsx(NeoBreadcrumbs, { children: breadcrumbs.items.map((item, index) => (jsx(NeoBreadcrumbLink, { href: item.href, component: item.href && breadcrumbs.linkComponent ? breadcrumbs.linkComponent : undefined, current: index === breadcrumbs.items.length - 1, children: item.label }, item.href ?? index))) })), jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "flex-start", sx: { gap: '1rem' }, children: [jsxs(Stack, { sx: { gap: '0.5rem', flexGrow: 1 }, children: [typeof pageTitle === 'string' ? jsx(PageTitle, { children: pageTitle }) : pageTitle, subtitle &&
                                 (typeof subtitle === 'string' ? (jsx(Subtitle, { variant: "caption", children: subtitle })) : (subtitle))] }), action] })] }));
     const content = isLoading ? (jsx(Box, { sx: {
             display: 'flex',