import * as react from 'react'; import react__default, { ReactNode, Ref, ReactElement, FormEventHandler, RefObject, ComponentType, CSSProperties, PropsWithChildren } from 'react'; import { AlertProps, BoxProps, SxProps as SxProps$1, Theme as Theme$1, TypographyProps, ContainerProps, GridProps, LinkProps as LinkProps$1, SelectProps as SelectProps$1, ToggleButtonGroupProps, SwitchProps, SliderProps as SliderProps$1, AccordionSummaryProps, ButtonProps, ChipProps, CardProps as CardProps$1, PaperProps, CircularProgressProps, CollapseProps, ButtonBaseProps, CheckboxProps, FormControlLabelProps, FormGroupProps, DialogProps, DialogActionsProps, DialogContentProps, DialogContentTextProps, DialogTitleProps, DividerProps, TableProps, TableBodyProps, TableCellProps, TableHeadProps, TableRowProps, IconButtonProps as IconButtonProps$1, SkeletonProps as SkeletonProps$1, StackProps, TabProps, TabsProps, TextFieldProps, TooltipProps as TooltipProps$1 } from '@mui/material'; export { AlertProps, AlertTitle, BoxProps, ButtonBaseProps, CheckboxProps, ChipProps, CircularProgressProps, CollapseProps, ContainerProps, DialogActionsProps, DialogContentProps, DialogContentTextProps, DialogProps, DialogTitleProps, DividerProps, FormControlLabelProps, FormGroupProps, GridProps, MenuItem, PaperProps, StackProps, SwitchProps, TabProps, TableBodyProps, TableCellProps, TableHeadProps, TableProps, TableRowProps, TabsProps, TextFieldProps, Theme, alpha, useMediaQuery, useTheme } from '@mui/material'; import { SxProps, Theme } from '@mui/material/styles'; import { Components } from 'react-markdown'; import SvgIcon from '@mui/material/SvgIcon'; import { DataGridProps } from '@mui/x-data-grid'; export { DataGridProps, GridColDef, GridColumnVisibilityModel, GridPaginationModel, GridRenderCellParams, GridRowsProp, GridSortModel, GridValueGetter } from '@mui/x-data-grid'; import { SxProps as SxProps$2 } from '@mui/system'; import { LineChartProps } from '@mui/x-charts/LineChart'; export { ChartsReferenceLine, ChartsReferenceLineProps } from '@mui/x-charts/ChartsReferenceLine'; import { BarChartProps } from '@mui/x-charts/BarChart'; import { PieChartProps } from '@mui/x-charts/PieChart'; import { ScatterChartProps } from '@mui/x-charts/ScatterChart'; export { default as nexusLogoNode } from './assets/images/nexus-logo-node.svg'; export { default as nexusLogoFavicon } from './assets/images/nexus-logo-favicon.svg'; export { default as nexusLogoIco } from './assets/images/favicon.ico'; interface DateRangeFilterProps { startDate: Date | undefined; endDate: Date | undefined; onChange: (range: { startDate: Date | undefined; endDate: Date | undefined; }) => void; dataAvailableThrough?: Date; earliestStartDate?: Date; className?: string; } declare const DateRangeFilter: ({ startDate, endDate, onChange, dataAvailableThrough, earliestStartDate, className, }: DateRangeFilterProps) => react.JSX.Element; interface DateRangeValue { from?: Date; to?: Date; } interface DateRangePreset { label: string; days: number; } interface DateRangePickerProps { value: DateRangeValue; onChange: (value: DateRangeValue) => void; presets?: DateRangePreset[]; minDate?: Date; maxDate?: Date; className?: string; emptyLabel?: string; availabilityLabel?: string; } declare const DateRangePicker: ({ value, onChange, presets, minDate, maxDate, className, emptyLabel, availabilityLabel, }: DateRangePickerProps) => react.JSX.Element; /** * Themed inline alert for info / success / warning / error messages. * Accepts all MUI AlertProps — use `severity` to set the variant. */ declare const Alert: (props: AlertProps) => react.JSX.Element; interface ActivitySummary { thinkingSteps: number; kbSearches: number; toolCalls: number; inputTokens: number; outputTokens: number; } interface LatencyMetrics { totalMs: number; ttftMs: number | null; totalSeconds: string; ttftSeconds: string | null; } interface FileArtifact { bucket: string; key: string; downloadLabel?: string; displayName?: string; } interface CodeBlock { language?: string; title?: string; content: string; } interface ChatMessage { id: string; role: "user" | "assistant"; content: string; timestamp: Date; sources?: string[]; isThinking?: boolean; isStreaming?: boolean; rating?: "positive" | "negative" | null; files?: FileArtifact[]; codeBlocks?: CodeBlock[]; /** Trace events attached to a completed assistant message */ traceEvents?: TraceEvent[]; /** Activity summary produced after stream completion */ activitySummary?: ActivitySummary; /** Latency metrics attached after stream completion */ latency?: LatencyMetrics; } interface ParsedActivity { type: "thinking" | "kb" | "tool" | "model"; title: string; text?: string; status?: string; sources?: { source: string; relevance: number; }[]; toolName?: string; inputTokens?: number; outputTokens?: number; } interface TraceEvent { type: "thinking" | "kb" | "tool" | "model"; step?: number; text?: string; status?: string; query?: string; resultsCount?: number; sources?: { source: string; relevance: number; }[]; toolName?: string; input?: Record; output?: string; inputTokens?: number; outputTokens?: number; timestamp?: string; } interface AgentChatWidgetProps { title?: string; subtitle?: string; fabLabel?: string; avatarIcon?: React.ReactNode; placeholder?: string; emptyTitle?: string; emptyDescription?: string; dataSources?: string[]; suggestedPrompts?: string[]; isOpen: boolean; isTyping: boolean; messages: ChatMessage[]; streamingText?: string; liveTraceEvents?: TraceEvent[]; showActivity?: boolean; onOpen: () => void; onClose: () => void; onSend: (message: string) => void; onStop?: () => void; onExpandToFullPage?: () => void; /** hideFab - Pass true to hide the FAB (e.g. when on the full-page chat route). * Consumer computes this: hideFab={pathname === ROUTES.AGENT} */ hideFab?: boolean; /** Anchor corner for the floating widget and FAB. Defaults to 'bottom-right'. */ placement?: "bottom-right" | "bottom-left"; } declare function AgentChatWidget({ title, subtitle, fabLabel, avatarIcon, placeholder, emptyTitle, emptyDescription, dataSources, suggestedPrompts, isOpen, isTyping, messages, streamingText, liveTraceEvents, showActivity, onOpen, onClose, onSend, onStop, onExpandToFullPage, hideFab, placement, }: AgentChatWidgetProps): react.JSX.Element | null; declare const Box: ({ children, ...rest }: BoxProps) => react.JSX.Element; interface ChatHistoryConversation { id: string; title: string; messages?: unknown[]; messageCount?: number; /** When provided, shown as a tooltip on hover — useful for identifying the agent that ran the conversation. */ agentName?: string; } interface ChatHistoryAgent { id: string; name: string; } interface ChatHistoryProps { conversations: ChatHistoryConversation[]; activeConversationId: string | null; onSelectConversation: (id: string) => void; onDeleteConversation?: (id: string) => void | Promise; onNewConversation?: () => void; onClose?: () => void; onSearchChange?: (query: string) => void; agents?: ChatHistoryAgent[]; activeAgentId?: string | null; onSelectAgent?: (id: string) => void; /** aria-label for the nav element. Defaults to "Chat history". */ title?: string; agentsLabel?: string; /** Label shown above conversations. Only rendered when agents are also present. */ sectionLabel?: string; emptyText?: string; newChatTitle?: string; deleteConversationTitle?: string; searchPlaceholder?: string; searchDebounceMs?: number; width?: number | string; sx?: BoxProps["sx"]; formatMessageCount?: (count: number) => string; isCollapsed?: boolean; onToggleCollapse?: () => void; collapsedWidth?: number; } interface AgentChatDialogProps { open: boolean; onClose: () => void; title?: string; subtitle?: string; placeholder?: string; suggestedPrompts?: string[]; showAiChip?: boolean; isTyping: boolean; messages: ChatMessage[]; streamingText?: string; liveTraceEvents?: TraceEvent[]; showActivity?: boolean; onSend: (message: string) => void; onStop?: () => void; onFeedback?: (messageId: string, rating: "positive" | "negative", comment?: string) => void; /** Prompt chips shown directly above the input during an active conversation */ followUpPrompts?: string[]; /** Label shown above the follow-up chips. Defaults to "Suggested follow-ups:" */ followUpLabel?: string; /** Height in px of a sticky/fixed bar above the dialog (e.g. AppBar). The dialog root shifts * down by this amount so the bar remains visible above the overlay. */ topOffset?: number; /** When provided, renders a ChatHistory sidebar on desktop. Pass an empty array to show the sidebar with no conversations. */ conversations?: ChatHistoryConversation[]; activeConversationId?: string | null; onSelectConversation?: (id: string) => void; onDeleteConversation?: (id: string) => void | Promise; onNewConversation?: () => void; agents?: ChatHistoryAgent[]; activeAgentId?: string | null; onSelectAgent?: (id: string) => void; } declare function AgentChatDialog({ open, onClose, title, subtitle, placeholder, suggestedPrompts, showAiChip, isTyping, messages, streamingText, liveTraceEvents, showActivity, onSend, onStop, onFeedback, followUpPrompts, followUpLabel, topOffset, conversations, activeConversationId, onSelectConversation, onDeleteConversation, onNewConversation, agents, activeAgentId, onSelectAgent, }: AgentChatDialogProps): react.JSX.Element; interface FABButtonProps { onOpen: () => void; fabLabel: string; placement?: "bottom-right" | "bottom-left"; } declare const FABButton: ({ onOpen, fabLabel, placement, }: FABButtonProps) => react.JSX.Element; interface AgentChatWindowProps { title?: string; subtitle?: string; showAiChip?: boolean; headerActions?: React.ReactNode; body: React.ReactNode; followUpLabel?: string; followUpPrompts?: string[]; onSelectFollowUp?: (prompt: string) => void; onSend: (message: string) => void; inputDisabled?: boolean; inputPlaceholder?: string; isStreaming?: boolean; onStop?: () => void; inputActions?: React.ReactNode; inputRef?: React.Ref; inputLabel?: string; isEmpty?: boolean; inputSx?: SxProps; sx?: SxProps; } declare const AgentChatWindow: ({ title, subtitle, showAiChip, headerActions, body, followUpLabel, followUpPrompts, onSelectFollowUp, onSend, inputDisabled, inputPlaceholder, isStreaming, onStop, inputActions, inputRef, inputLabel, isEmpty, inputSx, sx, }: AgentChatWindowProps) => react.JSX.Element; interface AgentChatWindowHeaderProps { title?: string; subtitle?: string; showAiChip?: boolean; actions?: React.ReactNode; sx?: SxProps; } declare const AgentChatWindowHeader: ({ title, subtitle, showAiChip, actions, sx, }: AgentChatWindowHeaderProps) => react.JSX.Element; interface ChatInputProps { onSend: (message: string) => void; disabled?: boolean; placeholder?: string; maxRows?: number; sendButtonTitle?: string; isStreaming?: boolean; onStop?: () => void; stopButtonTitle?: string; actions?: React.ReactNode; value?: string; onChange?: (value: string) => void; inputRef?: React.Ref; label?: string; } declare const ChatInput: ({ onSend, disabled, placeholder, maxRows, sendButtonTitle, isStreaming, onStop, stopButtonTitle, actions, value: controlledValue, onChange, inputRef, label, }: ChatInputProps) => react.JSX.Element; declare const ChatHistory: ({ conversations, activeConversationId, onSelectConversation, onDeleteConversation, onNewConversation, onClose, onSearchChange, agents, activeAgentId, onSelectAgent, title, agentsLabel, sectionLabel, emptyText, newChatTitle, deleteConversationTitle, searchPlaceholder, searchDebounceMs, width, sx, formatMessageCount, isCollapsed, onToggleCollapse, collapsedWidth, }: ChatHistoryProps) => react.JSX.Element; interface ChatHistoryHeaderProps { newChatTitle: string; onNewConversation?: () => void; onClose?: () => void; onToggleCollapse?: () => void; onSearchChange?: (query: string) => void; searchPlaceholder?: string; searchDebounceMs?: number; } declare const ChatHistoryHeader: ({ newChatTitle, onNewConversation, onClose, onToggleCollapse, onSearchChange, searchPlaceholder, searchDebounceMs, }: ChatHistoryHeaderProps) => react.JSX.Element; interface ChatHistoryButtonBaseProps { conversation: ChatHistoryConversation; isActive: boolean; highlightQuery?: string; onSelectConversation: (id: string) => void; onDeleteConversation?: (id: string) => void | Promise; deleteConversationTitle: string; formatMessageCount: (count: number) => string; showMessageCount?: boolean; sx?: SxProps$1; } declare const ChatHistoryButtonBase: ({ conversation, isActive, highlightQuery, onSelectConversation, onDeleteConversation, deleteConversationTitle, formatMessageCount, showMessageCount, sx, }: ChatHistoryButtonBaseProps) => react.JSX.Element; interface ChatHistoryAgentItemProps { agent: ChatHistoryAgent; isActive: boolean; onSelect: (id: string) => void; } declare const ChatHistoryAgentItem: ({ agent, isActive, onSelect, }: ChatHistoryAgentItemProps) => react.JSX.Element; declare const chatHistoryMatchesQuery: (conversation: ChatHistoryConversation, query: string) => boolean; declare const filterChatHistoryConversations: (conversations: TConversation[], query: string) => TConversation[]; interface CopyableTableContainerProps { children: React.ReactNode; } declare const CopyableTableContainer: ({ children, }: CopyableTableContainerProps) => react.JSX.Element; interface ChatAvatarProps { size?: "sm" | "md" | "lg"; icon?: React.ReactNode; sx?: object | object[]; } declare const ChatAvatar: ({ size, icon, sx }: ChatAvatarProps) => react.JSX.Element; interface MarkdownContentProps { content: string; highlightQuery?: string; compact?: boolean; /** Override or extend the default markdown component renderers */ components?: Partial; } declare const chatWindowMarkdownComponents: Partial; declare const MarkdownContent: ({ content, highlightQuery, compact, components: extraComponents, }: MarkdownContentProps) => react.JSX.Element; interface MessageBubbleProps { message: ChatMessage; highlightQuery?: string; showActivity?: boolean; /** Called when the user submits thumbs-up/down feedback */ onFeedback?: (messageId: string, rating: "positive" | "negative", comment?: string) => void; /** Called when the user clicks a file download button */ onDownloadFile?: (file: FileArtifact) => Promise; /** Replaces the default MarkdownContent renderer — use for custom chart/rich content */ contentRenderer?: (content: string) => React.ReactNode; /** Override or extend individual markdown element renderers */ markdownComponents?: Partial; compact?: boolean; } declare const MessageBubble: ({ message, highlightQuery, showActivity, onFeedback, onDownloadFile, contentRenderer, markdownComponents, compact, }: MessageBubbleProps) => react.JSX.Element; interface MessageFeedbackBarProps { message: ChatMessage; onFeedback: (messageId: string, rating: "positive" | "negative", comment?: string) => void; } declare const MessageFeedbackBar: ({ message, onFeedback, }: MessageFeedbackBarProps) => react.JSX.Element; interface StreamingBubbleProps { text: string; traceEvents: TraceEvent[]; highlightQuery?: string; avatarIcon?: React.ReactNode; /** @deprecated Stop is now handled by ChatInput — this prop is ignored */ onAbort?: () => void; showActivity?: boolean; compact?: boolean; } declare const StreamingBubble: ({ text, traceEvents, highlightQuery, avatarIcon, compact, showActivity, }: StreamingBubbleProps) => react.JSX.Element; interface TypingIndicatorProps { traceLabel?: string; avatarIcon?: React.ReactNode; } declare const TypingIndicator: ({ traceLabel, avatarIcon }: TypingIndicatorProps) => react.JSX.Element; interface SuggestedPromptsProps { prompts: string[]; onSelect: (prompt: string) => void; } declare const SuggestedPrompts: ({ prompts, onSelect }: SuggestedPromptsProps) => react.JSX.Element; interface MessageListProps { messages: ChatMessage[]; isTyping: boolean; streamingText?: string; liveTraceEvents?: TraceEvent[]; highlightQuery?: string; onAbort?: () => void; avatarIcon?: React.ReactNode; showActivity?: boolean; compact?: boolean; markdownComponents?: Partial; onFeedback?: (messageId: string, rating: "positive" | "negative", comment?: string) => void; } declare const MessageList: ({ messages, isTyping, streamingText, liveTraceEvents, highlightQuery, onAbort, showActivity, compact, markdownComponents, onFeedback, }: MessageListProps) => react.JSX.Element; interface EmptyStateProps { title: string; description: string; dataSources?: string[]; prompts: string[]; avatarIcon?: React.ReactNode; onSelect: (prompt: string) => void; } declare const EmptyState: ({ title, description, dataSources, prompts, onSelect, }: EmptyStateProps) => react.JSX.Element; interface SourceCitationsProps { sources: string[]; } declare const SourceCitations: ({ sources }: SourceCitationsProps) => react.JSX.Element | null; declare const latestTraceLabel: (events: TraceEvent[]) => string; type Props$1 = Omit; /** * Monospace inline code / path snippet. * Renders as a `` element using the system monospace font stack. * Colour inherits from `text.secondary` by default. */ declare const Code: react.ForwardRefExoticComponent & react.RefAttributes>; declare const Container: (props: ContainerProps) => react.JSX.Element; declare const Grid: (props: GridProps) => react.JSX.Element; interface LinkProps extends LinkProps$1 { /** Open in a new tab. Defaults to false. */ openInNewTab?: boolean; } /** * Styled anchor component for inline navigation. * Uses the `text.blues` semantic token (from `useTokens()`). * * For button-shaped links use `PrimaryButtonLink` / `SecondaryButtonLink`. */ declare const Link: ({ openInNewTab, children, sx, ...rest }: LinkProps) => react.JSX.Element; interface SelectOption { value: string; label: string; disabled?: boolean; } interface SelectProps extends Omit { /** Floating label rendered above the select. */ label?: string; /** Convenience prop: renders `MenuItem`s from an array instead of requiring children. */ options?: SelectOption[]; /** `sx` passed to the wrapping `FormControl`. */ formControlSx?: SxProps$1; } /** * A single-value (or multi-value) select field that bundles * `FormControl + InputLabel + Select` into one component. * * Use `options` for a simple array-driven list, or pass `` children directly. */ declare const Select: ({ label, options, formControlSx, id, children, size, ...rest }: SelectProps) => react.JSX.Element; interface SkipLinkProps { /** The ID of the main content element to skip to, e.g. "main-content". */ href: string; /** Link label. Defaults to "Skip to content". */ children?: React.ReactNode; } /** * Accessible skip-to-content link. * Visually hidden until focused — reveals with brand styling on focus. * Place as the first child of the page root. * * @example * */ declare const SkipLink: ({ href, children, }: SkipLinkProps) => react.JSX.Element; type StatusBadgeVariant = "success" | "warning" | "error" | "info" | "neutral"; interface StatusBadgeProps { variant?: StatusBadgeVariant; label: string; } /** * Inline semantic status pill. * Use for conveying status at a glance: success / warning / error / info / neutral. * * For RAG-specific statuses (On Track / At Risk / Off Track) prefer `RagChip`. * For domain-specific workflow statuses prefer `StatusChip`. */ declare const StatusBadge: ({ variant, label, }: StatusBadgeProps) => react.JSX.Element; interface SegmentedControlOption { label: ReactNode; value: T; /** Optional accessible label when `label` is an icon or is not descriptive. */ ariaLabel?: string; disabled?: boolean; } interface SegmentedControlProps extends Omit { options: SegmentedControlOption[]; value: T; onChange: (value: T) => void; /** Accessible group label, e.g. "Level of detail". */ ariaLabel?: string; size?: "small" | "medium" | "large"; } /** * Segmented pill-track toggle for switching between a small set of mutually exclusive * options — view switchers, detail/summary modes, region filters, and similar. * * Renders as a recessed pill track with a filled, elevated active segment. * * For multi-page navigation prefer `SideBladeNavList`; for tabbed page content * prefer `Tabs`. This is for compact in-page toggles. */ declare function SegmentedControl({ options, value, onChange, ariaLabel, size, sx, ...rest }: SegmentedControlProps): react.JSX.Element; interface BreadcrumbItem { label: ReactNode; /** When provided, the crumb is a clickable step. Omit for the current (last) step. */ onClick?: () => void; } interface BreadcrumbsProps { items: BreadcrumbItem[]; /** Accessible label for the nav landmark. Defaults to "Breadcrumb". */ ariaLabel?: string; /** Max items before collapsing with an ellipsis. Defaults to 8. */ maxItems?: number; } /** * Breadcrumb trail for stepwise, hierarchical navigation — for example the levels * of a single drill-down dialog (overview → product → programme). The last item is * rendered as the current step (not clickable); earlier items with an `onClick` are * links back to that step. */ declare const Breadcrumbs: ({ items, ariaLabel, maxItems, }: BreadcrumbsProps) => react.JSX.Element; declare const Switch: ({ sx, ...props }: SwitchProps) => react.JSX.Element; interface SliderMarkOption { value: number; label?: string; } interface SliderProps extends Omit { value: number; onChange: (event: Event, value: number) => void; min: number; max: number; step: number; /** Visible label rendered above the track with the current value. Omit to * render the bare track only (e.g. an existing caller supplying its own * label/value display and an `aria-label` directly). */ label?: string; marks?: SliderMarkOption[]; } declare const Slider: ({ value, onChange, min, max, step, disabled, label, marks, ...rest }: SliderProps) => react.JSX.Element; interface NotificationBellProps { count: number; onClick: () => void; /** Cap above which the badge shows `${max}+` instead of the exact count. Default 99. */ max?: number; /** Accessible/base label, e.g. "Notifications". Unread count is appended automatically. */ label?: string; disabled?: boolean; } declare const NotificationBell: ({ count, onClick, max, label, disabled, }: NotificationBellProps) => react.JSX.Element; interface NotificationListItemProps { title: string; timestamp: Date | string | number; body?: string; read?: boolean; onClick?: () => void; } declare const NotificationListItem: ({ title, timestamp, body, read, onClick, }: NotificationListItemProps) => react.JSX.Element; /** * Typed wrappers around MUI Typography that fix the `variant` prop and * inherit colour from the sageTheme TYPOGRAPHY_COLOURS map. * All other TypographyProps (sx, component, className, children, …) are forwarded. */ type Props = Omit; declare const H1: react.ForwardRefExoticComponent & react.RefAttributes>; declare const H2: react.ForwardRefExoticComponent & react.RefAttributes>; declare const H3: react.ForwardRefExoticComponent & react.RefAttributes>; declare const H4: react.ForwardRefExoticComponent & react.RefAttributes>; declare const ActionBarTitle: react.ForwardRefExoticComponent & react.RefAttributes>; declare const Body1: react.ForwardRefExoticComponent & react.RefAttributes>; declare const ChatWindowBody: react.ForwardRefExoticComponent & react.RefAttributes>; declare const Body2: react.ForwardRefExoticComponent & react.RefAttributes>; declare const Caption: react.ForwardRefExoticComponent & react.RefAttributes>; declare const Span: react.ForwardRefExoticComponent & react.RefAttributes>; type MetricValueSize = "xs" | "sm" | "md" | "lg"; type MetricValueProps = Omit & { size?: MetricValueSize; }; declare const MetricValue: react.ForwardRefExoticComponent & react.RefAttributes>; interface MetricStatProps { /** Label naming the metric — rendered as H4 (a sub-heading, not a caption). */ label: string; /** The data value — rendered as MetricValue (large bold, not a semantic heading). */ value: string; /** Optional variance / delta — rendered as Caption (small secondary text). */ delta?: string; /** * MUI theme colour token for the delta text (e.g. `'success.main'` / `'error.main'`). * Use `ragColorForDelta(delta)` from `it-data-nexus-ui-library` to derive this. Omit for neutral grey. */ deltaColor?: string; /** * MUI theme colour token for the value text (e.g. `'success.main'` / `'error.main'`). * Use for RAG-coloured values where the colour carries meaning. Omit for default text colour. */ valueColor?: string; /** Size passed to MetricValue. Defaults to 'md' (2rem / 32px). */ size?: MetricValueSize; /** Optional icon rendered horizontally beside the metric value. */ icon?: typeof SvgIcon; /** MUI theme colour token for the icon. Omit for default text colour. */ iconColor?: string; /** Optional icon size in pixels. Defaults to the size associated with the metric value. */ iconSize?: number; /** Gap between the icon, value, and delta row items. Defaults to 1. */ valueRowGap?: number | string; /** Gap between the metric label and the value row. Defaults to 0.25. */ labelGap?: number | string; /** Align the value row to the bottom when the metric has a constrained height. */ alignValueToBottom?: boolean; sx?: SxProps; } /** * A label + large value + optional delta block for KPI and metric display. * * ```tsx * * * ``` * * The label is an H4 (semantic sub-heading), the value is a MetricValue (bold * large p — not a heading), and the delta is a Caption. */ declare const MetricStat: { ({ label, value, delta, deltaColor, valueColor, size, icon: Icon, iconColor, iconSize, valueRowGap, labelGap, alignValueToBottom, sx, }: MetricStatProps): react.JSX.Element; displayName: string; }; interface MetricCardProps extends MetricStatProps { /** Applied to the outer Card — use for layout (flex, width) or decoration (border, borderRadius). */ cardSx?: SxProps; /** Applied to the inner MetricStat Stack — use for alignment (e.g. `alignItems: 'center'`). */ sx?: SxProps; } /** * A MetricStat inside a solid Card. Padding scales down for `size="xs"`. * Use inside GlassCard or GlassPaper where metric values need a solid background to remain readable. * * ```tsx * * ``` */ declare const MetricCard: { ({ label, value, delta, deltaColor, valueColor, size, icon, iconColor, iconSize, valueRowGap, labelGap, alignValueToBottom, cardSx, sx, }: MetricCardProps): react.JSX.Element; displayName: string; }; interface ActionBarProps { title?: ReactNode; extraLeft?: ReactNode; extraRight?: ReactNode; homeHref?: string; showHome?: boolean; logo?: ReactNode; mobileNavigation?: { open: boolean; onToggle: () => void; buttonRef?: Ref; }; } declare const ActionBar: ({ title, extraLeft, extraRight, homeHref, showHome, logo, mobileNavigation, }: ActionBarProps) => ReactElement; interface AccordionGroupProps { children: ReactNode; sx?: SxProps$1; } declare const AccordionGroup: ({ children, sx }: AccordionGroupProps) => react.JSX.Element; interface AccordionGroupItemProps { summary: ReactNode; children: ReactNode; defaultExpanded?: boolean; disabled?: boolean; summaryProps?: Omit; expandIcon?: ReactNode; sx?: SxProps$1; detailsSx?: SxProps$1; } declare const AccordionGroupItem: ({ summary, children, defaultExpanded, disabled, summaryProps, expandIcon, sx, detailsSx, }: AccordionGroupItemProps) => react.JSX.Element; interface AccordionSingleProps { summary: ReactNode; children: ReactNode; defaultExpanded?: boolean; expanded?: boolean; onChange?: (event: React.SyntheticEvent, isExpanded: boolean) => void; disabled?: boolean; summaryProps?: Omit; expandIcon?: ReactNode; sx?: SxProps$1; detailsSx?: SxProps$1; } declare const AccordionSingle: ({ summary, children, defaultExpanded, expanded, onChange, disabled, summaryProps, expandIcon, sx, detailsSx, }: AccordionSingleProps) => react.JSX.Element; interface SecondaryButtonProps extends Omit { color?: "primary" | "error"; size?: "small" | "medium" | "large"; } declare const SecondaryButton: React.FC; interface AiButtonProps extends Omit { label?: React.ReactNode; startIcon?: React.ReactNode; } declare const AiButton: React.FC; interface AiChipProps extends Omit { /** Badge text. Defaults to `"Powered by Nexus AI"`. */ label?: string; } /** * A Chip-shaped badge with the same animated conic-gradient border as `AiButton`. * Use it to signal AI-powered features in headers, cards, and toolbars. * * ```tsx * // "Powered by Nexus AI" * * ``` */ declare const AiChip: React.FC; type CardTrend = "up" | "flat" | "down"; interface CardProps extends CardProps$1 { /** Small icon displayed beside the label. Pass an MUI SvgIcon element. */ icon?: React.ReactNode; /** Card label / metric name. */ label?: string; /** Primary large value. */ value?: string; /** Supporting subtext (e.g. "+11% YoY"). Coloured by trend when provided. */ subtext?: string; /** Controls the colour of subtext. */ trend?: CardTrend; /** * `sx` applied directly to the inner `CardContent`. Use this (not a * `sx={{ "& .MuiCardContent-root": ... }}` selector on `Card`) to override * the default padding — a selector targeting the class can lose to the * `&:last-child` padding rule depending on style-injection order. */ contentSx?: SxProps; } declare const Card: ({ icon, label, value, subtext, trend, sx, contentSx, children, ...rest }: CardProps) => react.JSX.Element; type AiCardProps = CardProps; declare const AiCard: ({ sx, children, ...rest }: AiCardProps) => react.JSX.Element; type GlassCardProps = CardProps; declare const GlassCard: ({ sx, ...rest }: GlassCardProps) => react.JSX.Element; type AiGlassCardProps = GlassCardProps; declare const AiGlassCard: ({ sx, children, ...rest }: AiGlassCardProps) => react.JSX.Element; declare const Paper: ({ children, ...rest }: PaperProps) => react.JSX.Element; type AiPaperProps = PaperProps; declare const AiPaper: ({ sx, children, ...rest }: AiPaperProps) => react.JSX.Element; type GlassPaperProps = PaperProps; declare const GlassPaper: ({ sx, children, ...rest }: GlassPaperProps) => react.JSX.Element; type AiGlassPaperProps = GlassPaperProps; declare const AiGlassPaper: ({ sx, children, ...rest }: AiGlassPaperProps) => react.JSX.Element; declare const CircularProgress: (props: CircularProgressProps) => react.JSX.Element; declare const Collapse: ({ children, ...rest }: CollapseProps) => react.JSX.Element; declare const NexusDataGrid: ({ sx, ...rest }: DataGridProps) => react.JSX.Element; declare const ButtonBase: (props: ButtonBaseProps) => react.JSX.Element; interface ButtonTileProps extends Omit { title: ReactNode; subtitle?: ReactNode; /** Maximum tile width. Defaults to 350px. */ maxWidth?: number | string; icon?: ReactNode; /** Non-interactive content displayed at the end of the title row, such as a status badge. */ headerAdornment?: ReactNode; children?: ReactNode; footer?: ReactNode; cardSx?: SxProps; contentSx?: SxProps; headerSx?: SxProps; headerAdornmentSx?: SxProps; iconSx?: SxProps; titleSx?: SxProps; subtitleSx?: SxProps; bodySx?: SxProps; footerSx?: SxProps; } type AiButtonTileProps = ButtonTileProps; declare const ButtonTile: (props: ButtonTileProps) => react.JSX.Element; declare const AiButtonTile: (props: AiButtonTileProps) => react.JSX.Element; type GhostButtonProps = ButtonBaseProps; /** * Invisible interactive button — no background, border, or padding. * Use for interactive regions where sighted users rely on layout or iconography * to understand clickability (collapsible headers, clickable cards, row expanders). * Inherits font and text alignment from context; all other button chrome is stripped. * * Always supply `aria-label` or visible text content so the action is announced * to screen reader users. Add `aria-expanded` for toggle controls. * * ```tsx * * {label} * * ``` */ declare const GhostButton: React.FC; interface SelectableListItem { label: string; value?: string; disabled?: boolean; /** Applied to the row button itself — use for background, border, padding overrides. */ rowSx?: SxProps; /** Applied to the index Caption. */ indexSx?: SxProps; /** Applied to the label Body1. */ labelSx?: SxProps; /** Applied to the value Body2. */ valueSx?: SxProps; /** Applied to the chevron icon. */ chevronSx?: SxProps; } interface SelectableListProps { items: SelectableListItem[]; onSelect: (label: string) => void; sx?: SxProps; } /** * A bordered list of selectable rows, visually consistent with AccordionGroup. * Each row is a proper button — use in place of role="button" on Stack. * * ```tsx * ({ label: p, value: incVals[i] }))} * onSelect={onSelectProgramme} * /> * ``` */ declare const SelectableList: { ({ items, onSelect, sx, }: SelectableListProps): react.JSX.Element; displayName: string; }; declare const Checkbox: (props: CheckboxProps) => react.JSX.Element; declare const FormControlLabel: (props: FormControlLabelProps) => react.JSX.Element; declare const FormGroup: (props: FormGroupProps) => react.JSX.Element; interface CheckboxGroupProps { title?: React.ReactNode; labels?: string[]; selectedValues?: string[]; onChange?: (values: string[]) => void; rootSx?: SxProps$2; groupSx?: SxProps$2; titleSx?: SxProps$2; } declare const CheckboxGroup: React.FC; declare const Dialog: (props: DialogProps) => react.JSX.Element; declare const DialogTitle: (props: DialogTitleProps) => react.JSX.Element; declare const DialogContent: (props: DialogContentProps) => react.JSX.Element; declare const DialogActions: (props: DialogActionsProps) => react.JSX.Element; declare const DialogContentText: (props: DialogContentTextProps) => react.JSX.Element; interface FormDialogProps extends Omit { actions?: ReactNode; children: ReactNode; closeDisabled?: boolean; maxWidth?: DialogProps["maxWidth"]; onClose: () => void; onSubmit: FormEventHandler; open: boolean; title: ReactNode; } /** * Standard shell for create and edit forms displayed in a dialog. * * Form sections should be rendered in solid `Paper` components so content * remains readable against the `GlassPaper` surface. */ declare const FormDialog: ({ actions, children, closeDisabled, maxWidth, onClose, onSubmit, open, sx, title, ...dialogProps }: FormDialogProps) => react.JSX.Element; declare const Chip: (props: ChipProps) => react.JSX.Element; declare const Divider: ({ children, ...rest }: DividerProps) => react.JSX.Element; declare const Table: (props: TableProps) => react.JSX.Element; declare const TableHead: (props: TableHeadProps) => react.JSX.Element; declare const TableBody: (props: TableBodyProps) => react.JSX.Element; declare const TableRow: (props: TableRowProps) => react.JSX.Element; declare const TableCell: (props: TableCellProps) => react.JSX.Element; type GlassPaperAsyncProps = Omit & { title: string; /** Optional supporting description rendered below the title. */ description?: ReactNode; /** Optional actions (e.g. chip toggles, buttons) rendered in the top-right of the header. Hidden while loading or in error state. */ actions?: ReactNode; isLoading: boolean; isError: boolean; errorMessage?: string; children?: ReactNode; }; declare const GlassPaperAsync: ({ title, description, actions, isLoading, isError, errorMessage, children, ...rest }: GlassPaperAsyncProps) => react.JSX.Element; type PaperAsyncProps = Omit & { title: string; titleComponent?: "h2" | "h3" | "h4"; titleSx?: SxProps; description?: ReactNode; actions?: ReactNode; isLoading: boolean; isError: boolean; errorMessage?: string; children?: ReactNode; }; declare const PaperAsync: ({ title, titleComponent, titleSx, description, actions, isLoading, isError, errorMessage, children, ...rest }: PaperAsyncProps) => react.JSX.Element; type GreenWaveBackgroundProps = BoxProps; declare const GreenWaveBackground: ({ sx, children, ...rest }: GreenWaveBackgroundProps) => react.JSX.Element; type IconButtonVariant = "standard" | "filled" | "outlined"; type IconButtonProps = Omit & { title?: string; ariaLabel?: string; /** * `"standard"` — default MUI icon button (transparent background). * `"filled"` — primary-coloured filled circle; use for primary actions like Send. * `"outlined"` — jade border and icon; matches SecondaryButton styling. */ variant?: IconButtonVariant; }; declare const IconButton: ({ title, ariaLabel, children, disabled, variant, sx, ...rest }: IconButtonProps) => react.JSX.Element; type AvatarSize = "sm" | "md" | "lg"; type AvatarVariant = "primary" | "secondary"; interface AvatarProps { /** Visual size — sm 32px, md 48px, lg 64px */ size?: AvatarSize; /** * Colour scheme: * - `primary` — filled `primary.main` circle (brilliantGreen dark / jade light) * - `secondary` — grey circle using the theme's `text.secondary` tone */ variant?: AvatarVariant; /** Icon or initials to render inside the circle */ children?: React.ReactNode; /** Additional MUI sx overrides — use for layout only (e.g. margins), not visual design */ sx?: BoxProps["sx"]; } /** * Circular container for an icon or initials. * * Covers bot indicators in chat, sidebar brand circles, user avatars, and * empty-state illustrations. Use `sx` only for positioning/spacing overrides; * let `variant` and `size` control the visual design. */ declare const Avatar: ({ size, variant, children, sx, }: AvatarProps) => react.JSX.Element; interface LoadingSpinnerNexusProps { variant?: "small" | "large"; } declare const LoadingSpinnerNexus: ({ variant, }: LoadingSpinnerNexusProps) => react.JSX.Element; interface LocationMultiSelectProps { ariaLabel?: string; availableLocations?: string[]; emptyLabel?: string; selectedLocations?: string[]; onLocationsChange?: (next: string[]) => void; formControlSx?: SxProps$1; menuSx?: SxProps$1; selectSx?: SxProps$1; } declare const LocationMultiSelect: React.FC; type NodeShimmerMode = { shimmer: "text"; } | { shimmer: "fullText"; } | { shimmer: "node"; }; type LogoOptionBaseProps = { size?: "sm" | "md" | "lg"; fontFamily: string; fontWeight: string | number; text: string; letterSpacing?: string; nodeShimmerMode?: NodeShimmerMode; baselineOffset?: number; ariaLabel: string; }; declare const LogoOptions: { LogoOptionBase: ({ size, fontFamily, fontWeight, text, letterSpacing, nodeShimmerMode, baselineOffset, ariaLabel, }: LogoOptionBaseProps) => react.JSX.Element; LogoOption1: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption2: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption3: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption4: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption5: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption6: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption7: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption8: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption9: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption10: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption11: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption12: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption13: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption14: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; LogoOption15: ({ size }: { size?: "sm" | "md" | "lg"; }) => react.JSX.Element; }; interface NexusHomeProps { href?: string; } declare const NexusHome: React.FC; type LogoProps = { size?: "sm" | "md" | "lg"; }; /** Option 7 — Sage UI Medium weight, NEXUS all-caps, shimmer on whole word */ declare const NexusLogo: ({ size }: LogoProps) => react.JSX.Element; type NexusNodeIconSize = "sm" | "md" | "lg"; type NexusNodeIconTone = "default" | "brand" | "inherit"; interface NexusNodeIconProps { className?: string; /** Nexus size scale — sm 24px, md 32px, lg 40px. Takes precedence over fontSize. */ size?: NexusNodeIconSize; /** MUI compatibility size. Prefer the Nexus size scale for new code. */ fontSize?: "inherit" | "small" | "medium" | "large"; titleAccess?: string; /** default uses the theme-aware Nexus green; brand is fixed brilliant green. */ tone?: NexusNodeIconTone; } declare const NexusNodeIcon: ({ className, size, fontSize, titleAccess, tone, }: NexusNodeIconProps) => react.JSX.Element; interface SageLogoSvgProps { /** Height in px; width is calculated automatically from the 60×34 aspect ratio. */ height?: number; className?: string; "aria-label"?: string; } /** The SAGE wordmark as a standalone SVG — no pipe, node, or Nexus text. */ declare const SageLogoSvg: ({ height, className, "aria-label": ariaLabel, }: SageLogoSvgProps) => react.JSX.Element; interface PrimaryButtonProps extends Omit { color?: "primary" | "error"; size?: "small" | "medium" | "large"; } declare const PrimaryButton: React.FC; interface PrimaryButtonLinkProps extends Omit { href: string; openInNewTab?: boolean; target?: React.AnchorHTMLAttributes["target"]; rel?: React.AnchorHTMLAttributes["rel"]; download?: React.AnchorHTMLAttributes["download"]; } declare const PrimaryButtonLink: React.FC; type RagStatus = "On Track" | "At Risk" | "Off Track" | string; interface RagDotProps { status: RagStatus; } declare const RagDot: ({ status }: RagDotProps) => react.JSX.Element; type ColourProp = "jade" | "amber" | "cherry" | string; interface RagChipProps extends Omit { label?: ChipProps["label"]; status?: string; colour?: ColourProp; } declare const RagChip: ({ label, status, colour, size, variant, sx, ...rest }: RagChipProps) => react.JSX.Element; /** * Returns a MUI theme colour token for a signed delta / variance string. * * - Strings starting with `+` → `'success.main'` (positive / green) * - Strings starting with `-` or `−` → `'error.main'` (negative / red) * - Anything else (zero, no sign) → `'text.secondary'` (neutral / grey) * * Handles both the hyphen-minus (`-`) and the typographic minus (`−`). * * @example * ragColorForDelta('+3.1%') // 'success.main' * ragColorForDelta('-15.4%') // 'error.main' * ragColorForDelta('−7% vs bdgt') // 'error.main' * ragColorForDelta('0.0%') // 'text.secondary' */ declare const ragColorForDelta: (delta: string) => string; interface SecondaryButtonLinkProps extends Omit { href: string; color?: string; openInNewTab?: boolean; target?: React.AnchorHTMLAttributes["target"]; rel?: React.AnchorHTMLAttributes["rel"]; download?: React.AnchorHTMLAttributes["download"]; } declare const SecondaryButtonLink: React.FC; interface SearchInputProps { ariaLabel?: string; onSearchChange: (value: string) => void; placeholder?: string; searchValue?: string; sx?: SxProps$1; styles?: SxProps$1; } declare const SearchInput: react__default.FC; interface SideBladeProps { open: boolean; onToggle: () => void; mobileOpen?: boolean; onMobileToggle?: () => void; mobileTriggerRef?: RefObject; children?: ReactNode; collapsedContent?: ReactNode; /** Width of the blade when expanded (px). Default: 300 */ expandedWidth?: number; /** Width of the blade when collapsed (px). Default: 64 */ collapsedWidth?: number; sx?: SxProps$1; headerActions?: ReactNode; } /** * SideBlade — a mini-variant persistent Drawer that expands/collapses. * * On mobile (< sm) it becomes a full temporary overlay drawer. * Content is fully customisable via `children`. */ declare const SideBlade: ({ open, onToggle, mobileOpen, onMobileToggle, mobileTriggerRef, children, collapsedContent, expandedWidth, collapsedWidth, sx, headerActions, }: SideBladeProps) => react.JSX.Element; interface SideBladeNavItem { label: string; href: string; icon: ComponentType<{ className?: string; }>; } interface SideBladeNavListItemProps { item: SideBladeNavItem; isActive: boolean; collapsed: boolean; linkComponent?: ComponentType<{ href: string; [key: string]: unknown; }>; onSelect?: (item: SideBladeNavItem) => void; } declare const SideBladeNavListItem: ({ item, isActive, collapsed, linkComponent, onSelect, }: SideBladeNavListItemProps) => react.JSX.Element; interface SideBladeNavListProps { items: SideBladeNavItem[]; currentPathname?: string; selectedHref?: string; collapsed: boolean; linkComponent?: ComponentType<{ href: string; [key: string]: unknown; }>; onItemSelect?: (item: SideBladeNavItem) => void; } declare const SideBladeNavList: ({ items, currentPathname, selectedHref, collapsed, linkComponent, onItemSelect, }: SideBladeNavListProps) => react.JSX.Element; type SkeletonProps = SkeletonProps$1; /** * A themed wrapper around MUI Skeleton. * * - `variant="text"` (default) — height is inferred from the surrounding font * size, no explicit height needed. Width defaults to 100%. * - `variant="rectangular"` / `"rounded"` — fills `width="100%"` by default; * pass an explicit `height` (e.g. `height={120}`) when the container has no * intrinsic size. * - `variant="circular"` — pass explicit `width` and `height` for an avatar * placeholder. */ declare const Skeleton: ({ variant, width, ...rest }: SkeletonProps) => react.JSX.Element; interface SkillChipProps extends ChipProps { label?: react__default.ReactNode; tone?: "default" | "matched" | "accent" | string; } declare const SkillChip: react__default.FC; declare const Stack: ({ children, ...rest }: StackProps) => react.JSX.Element; type ChipSize = "default" | "small"; interface StatusChipProps extends ChipProps { status?: string; label?: React.ReactNode; chipSize?: ChipSize; } declare const StatusChip: React.FC; declare const Tab: (props: TabProps) => react.JSX.Element; declare const Tabs: (props: TabsProps) => react.JSX.Element; declare const TextField: (props: TextFieldProps) => react.JSX.Element; declare const ThemeToggle: React.FC; interface TooltipProps extends Omit { /** The tooltip content. Accepts a plain string, any ReactNode, or a React element for rich content. */ title: ReactNode; } declare const Tooltip: ({ title, children, ...rest }: TooltipProps) => react.JSX.Element; interface NexusiFrameProps { /** Accessible label for the iframe — required by WCAG. Also rendered as a heading above the frame. */ title: string; /** The URL to embed. */ url: string; /** Height of the iframe. Defaults to "600px". */ height?: string | number; /** Width of the iframe. Defaults to "100%". */ width?: string | number; /** * Defers loading until the frame is near the viewport. * Defaults to "lazy" — set to "eager" only when the frame must load immediately. */ loading?: "lazy" | "eager"; /** * Controls which referrer is sent with the request. * Defaults to "strict-origin-when-cross-origin" (the browser default made explicit). */ referrerPolicy?: React.IframeHTMLAttributes["referrerPolicy"]; /** * Space-separated sandbox permissions. When omitted the frame runs without * sandboxing — required for embedded apps that need cookies/session. * Example: "allow-scripts allow-same-origin allow-forms" */ sandbox?: string; /** * Feature policy for the frame. * Example: "fullscreen" or "camera; microphone" */ allow?: string; /** Applied to the outer Stack container. */ sx?: SxProps$1; } declare const NexusiFrame: ({ title, url, height, width, loading, referrerPolicy, sandbox, allow, sx, }: NexusiFrameProps) => react.JSX.Element; /** * Optional async/paper props shared by the Nexus chart components. When `title` is * provided, the chart self-wraps in `PaperAsync` and gains loading/error handling * for free. With no `title`, the chart renders bare (backward-compatible). */ interface ChartAsyncProps { title?: string; /** Heading level for a visible chart title. Defaults to `h3`. */ titleComponent?: "h2" | "h3" | "h4"; /** `sx` applied to the visible chart title. */ titleSx?: SxProps; /** * When `true`, the chart still self-wraps in a solid `Paper` (so it sits on a * solid background rather than inheriting a glass surface), but the title is * rendered as a visually-hidden `

` for screen readers only — no visible header * is shown. Useful when the chart lives inside a card that already provides a * visible heading. * * Ignored when `title` is not provided. */ titleHidden?: boolean; description?: ReactNode; actions?: ReactNode; isLoading?: boolean; isError?: boolean; errorMessage?: string; /** `sx` applied to the wrapping `PaperAsync` or `Paper` (defaults to `{ p: 3 }`). */ paperSx?: SxProps; } type NexusLineChartProps = Omit & ChartAsyncProps & { children?: React.ReactNode; }; declare function NexusLineChart({ sx, xAxis, grid, series, slots, slotProps, children, title, titleComponent, titleSx, titleHidden, description, actions, isLoading, isError, errorMessage, paperSx, ...props }: NexusLineChartProps): react.JSX.Element; type NexusBarChartProps = Omit & ChartAsyncProps & { /** Base colours used to generate the per-series gradients. */ gradientColors?: string[]; }; declare function NexusBarChart({ slotProps, slots, title, titleComponent, titleSx, titleHidden, description, actions, isLoading, isError, errorMessage, paperSx, gradientColors, ...props }: NexusBarChartProps): react.JSX.Element; type NexusPieChartProps = Omit & ChartAsyncProps; declare function NexusPieChart({ slotProps, slots, title, titleComponent, titleSx, titleHidden, description, actions, isLoading, isError, errorMessage, paperSx, ...props }: NexusPieChartProps): react.JSX.Element; type NexusScatterChartProps = Omit & ChartAsyncProps; declare function NexusScatterChart({ slotProps, slots, title, titleComponent, titleSx, titleHidden, description, actions, isLoading, isError, errorMessage, paperSx, ...props }: NexusScatterChartProps): react.JSX.Element; interface NexusHeatmapAxisItem { id: string; label: string; } interface NexusHeatmapCell { rowId: string; columnId: string; status: string; label?: string; } interface NexusHeatmapStatus { Icon: typeof SvgIcon; color: string; label: string; } interface NexusHeatmapProps extends ChartAsyncProps { rows: NexusHeatmapAxisItem[]; columns: NexusHeatmapAxisItem[]; cells: NexusHeatmapCell[]; statusMap: Record; /** Minimum height of each heatmap cell. Defaults to 40. */ cellMinHeight?: number; /** Icon size in px for populated heatmap cells. Defaults to 22. */ cellIconSize?: number; sx?: SxProps; } declare function NexusHeatmap({ rows, columns, cells, statusMap, cellMinHeight, cellIconSize, sx, title, titleComponent, titleSx, titleHidden, description, actions, isLoading, isError, errorMessage, paperSx, }: NexusHeatmapProps): react.JSX.Element; declare namespace NexusHeatmap { var displayName: string; } declare const getFaviconUrls: (versioned?: boolean) => { svg: string; ico: string; }; type FaviconLinksProps = { /** Append version query param for cache-busting (default true) */ versioned?: boolean; /** Optional additional attributes to add to the svg link */ svgAttrs?: react__default.LinkHTMLAttributes; /** Optional additional attributes to add to the ico link */ icoAttrs?: react__default.LinkHTMLAttributes; }; declare const FaviconLinks: react__default.FC; type ThemeMode = "light" | "dark"; type ModeTokens = { background: { default: string; paper: string; greys: string; jades: string; }; text: { primary: string; primaryReverse: string; secondary: string; blues: string; greens: string; greys: string; jades: string; }; border: string; shadow: string; outlinedPrimary: string; outlinedPrimaryHover: string; }; declare const colours: { readonly brilliantGreen: "#00D639"; readonly primaryGreenHover: "#00BE32"; readonly primaryGreenActive: "#00AA2D"; readonly cyan: "#00D6DE"; readonly jade: "#00A65C"; readonly jadeLight: "#00AE5C"; readonly jadeDark: "#00623E"; readonly teal: "#006362"; readonly blue: "#2D60FF"; readonly navy: "#1531af"; readonly cherry: "#cc0f4b"; readonly terra: "#A13829"; readonly amber: "#E9875B"; readonly gold: "#F5C518"; readonly black: "#000000"; readonly white: "#FFFFFF"; readonly darkGrey: "#55616D"; readonly lightGrey: "#ffffffc2"; }; declare const gradients: { readonly brand: "linear-gradient(135deg, #00D639 0%, #00A65C 42%, #006362 100%)"; readonly nexus: "linear-gradient(135deg, #00D639 0%, #00D6DE 40%, #2D60FF 100%)"; readonly aiConic: "conic-gradient(from var(--ai-angle), #00D639, #00D6DE, #2D60FF, #00D6DE, #00D639)"; }; declare const fontSageText = "SageText, Inter, Segoe UI, sans-serif"; declare const fontSageUI = "SageUI, Inter, Segoe UI, sans-serif"; declare const fontSageHeadline = "Sage Headline, Inter, Segoe UI, sans-serif"; declare const getModeTokens: (mode: ThemeMode) => ModeTokens; declare module "@mui/material/styles" { interface TypographyVariants { actionBarTitle: CSSProperties; chatWindowBody: CSSProperties; } interface TypographyVariantsOptions { actionBarTitle?: CSSProperties; chatWindowBody?: CSSProperties; } } declare module "@mui/material/Typography" { interface TypographyPropsVariantOverrides { actionBarTitle: true; chatWindowBody: true; } } declare const createSageTheme: (mode?: ThemeMode) => Theme; declare const useTokens: () => ModeTokens; type MuiAppThemeProviderProps = PropsWithChildren<{ mode?: ThemeMode; }>; declare const MuiAppThemeProvider: ({ children, mode, }: MuiAppThemeProviderProps) => react.JSX.Element; declare const NEXUS_THEME_STORAGE_KEY = "nexus-theme-mode"; type ThemeModeContextValue = { mode: ThemeMode; setMode: (mode: ThemeMode) => void; toggleMode: () => void; }; declare const ThemeModeContext: react.Context; declare const useThemeMode: () => ThemeModeContextValue; type ThemeModeProviderProps = PropsWithChildren<{ defaultMode?: ThemeMode; /** @deprecated Use defaultMode for new consumers. */ mode?: ThemeMode; storageKey?: string | null; onModeChange?: (mode: ThemeMode) => void; }>; declare const ThemeModeProvider: ({ children, defaultMode, mode: legacyInitialMode, storageKey, onModeChange, }: ThemeModeProviderProps) => react.JSX.Element; declare function formatSurnameFirstname(name: string | null): string | null; declare const getFiscalPeriod: (date: Date) => { fiscalYear: number; quarter: number; weekNumber: number; }; declare const formatDate: (date: Date) => string; type GradientBorderOptions = { borderRadius?: number; padding?: number; }; declare const getGradientBorderStyles: (theme: Theme, options?: GradientBorderOptions) => { position: string; borderRadius: number; border: string; background: string; backgroundClip: string; "&::before": { content: string; position: string; inset: number; borderRadius: string; padding: string; background: "linear-gradient(135deg, #00D639 0%, #00A65C 42%, #006362 100%)"; WebkitMask: string; WebkitMaskComposite: string; maskComposite: string; pointerEvents: string; }; }; declare const leftPipe: SxProps; declare const expandableText: (isExpanded: boolean) => SxProps; export { AccordionGroup, AccordionGroupItem, AccordionSingle, ActionBar, ActionBarTitle, AgentChatDialog, AgentChatWidget, AgentChatWindow, AgentChatWindowHeader, AiButton, AiButtonTile, AiCard, AiChip, AiGlassCard, AiGlassPaper, AiPaper, Alert, Avatar, Body1, Body2, Box, Breadcrumbs, ButtonBase, ButtonTile, Caption, Card, ChatAvatar, ChatHistory, ChatHistoryAgentItem, ChatHistoryButtonBase, ChatHistoryHeader, ChatInput, ChatWindowBody, Checkbox, CheckboxGroup, Chip, CircularProgress, Code, Collapse, Container, CopyableTableContainer, DateRangeFilter, DateRangePicker, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, EmptyState, FABButton, FaviconLinks, FormControlLabel, FormDialog, FormGroup, GhostButton, GlassCard, GlassPaper, GlassPaperAsync, GreenWaveBackground, Grid, H1, H2, H3, H4, IconButton, Link, LoadingSpinnerNexus, LocationMultiSelect, LogoOptions, MarkdownContent, MessageBubble, MessageFeedbackBar, MessageList, MetricCard, MetricStat, MetricValue, MuiAppThemeProvider, NEXUS_THEME_STORAGE_KEY, NexusBarChart, NexusDataGrid, NexusHeatmap, NexusHome, NexusLineChart, NexusLogo, NexusNodeIcon, NexusPieChart, NexusScatterChart, NexusiFrame, NotificationBell, NotificationListItem, Paper, PaperAsync, PrimaryButton, PrimaryButtonLink, RagChip, RagDot, SageLogoSvg, SearchInput, SecondaryButton, SecondaryButtonLink, SegmentedControl, Select, SelectableList, SideBlade, SideBladeNavList, SideBladeNavListItem, Skeleton, SkillChip, SkipLink, Slider, SourceCitations, Span, Stack, StatusBadge, StatusChip, StreamingBubble, SuggestedPrompts, Switch, Tab, Table, TableBody, TableCell, TableHead, TableRow, Tabs, TextField, ThemeModeContext, ThemeModeProvider, ThemeToggle, Tooltip, TypingIndicator, chatHistoryMatchesQuery, chatWindowMarkdownComponents, colours, createSageTheme, expandableText, filterChatHistoryConversations, fontSageHeadline, fontSageText, fontSageUI, formatDate, formatSurnameFirstname, getFaviconUrls, getFiscalPeriod, getGradientBorderStyles, getModeTokens, gradients, latestTraceLabel, leftPipe, ragColorForDelta, useThemeMode, useTokens }; export type { AccordionGroupItemProps, AccordionGroupProps, AccordionSingleProps, ActivitySummary, AgentChatDialogProps, AgentChatWidgetProps, AgentChatWindowHeaderProps, AgentChatWindowProps, AiButtonProps, AiButtonTileProps, AiCardProps, AiChipProps, AiGlassCardProps, AiGlassPaperProps, AiPaperProps, AvatarProps, AvatarSize, AvatarVariant, BreadcrumbItem, BreadcrumbsProps, ButtonTileProps, CardProps, CardTrend, ChartAsyncProps, ChatAvatarProps, ChatHistoryAgent, ChatHistoryAgentItemProps, ChatHistoryButtonBaseProps, ChatHistoryConversation, ChatHistoryHeaderProps, ChatHistoryProps, ChatInputProps, ChatMessage, CodeBlock, CopyableTableContainerProps, DateRangeFilterProps, DateRangePickerProps, DateRangePreset, DateRangeValue, EmptyStateProps, FABButtonProps, FileArtifact, FormDialogProps, GhostButtonProps, GlassCardProps, GlassPaperAsyncProps, GlassPaperProps, GradientBorderOptions, GreenWaveBackgroundProps, IconButtonProps, IconButtonVariant, LatencyMetrics, LinkProps, LoadingSpinnerNexusProps, MarkdownContentProps, MessageBubbleProps, MessageFeedbackBarProps, MessageListProps, MetricCardProps, MetricStatProps, MetricValueSize, ModeTokens, NexusBarChartProps, NexusHeatmapAxisItem, NexusHeatmapCell, NexusHeatmapProps, NexusHeatmapStatus, NexusLineChartProps, NexusNodeIconProps, NexusNodeIconSize, NexusNodeIconTone, NexusPieChartProps, NexusScatterChartProps, NexusiFrameProps, NotificationBellProps, NotificationListItemProps, PaperAsyncProps, ParsedActivity, PrimaryButtonLinkProps, PrimaryButtonProps, SecondaryButtonLinkProps, SecondaryButtonProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SelectableListItem, SelectableListProps, SideBladeNavItem, SideBladeNavListItemProps, SideBladeNavListProps, SideBladeProps, SkeletonProps, SkipLinkProps, SliderMarkOption, SliderProps, SourceCitationsProps, StatusBadgeProps, StatusBadgeVariant, StreamingBubbleProps, SuggestedPromptsProps, ThemeMode, ThemeModeContextValue, ThemeModeProviderProps, TooltipProps, TraceEvent, TypingIndicatorProps };