@cere/cere-design-system 0.0.20 → 0.0.22

package/dist/index.d.mts

@@ -3,11 +3,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LottieComponentProps } from 'lottie-react';
 import * as React from 'react';
 import React__default, { ReactNode, Ref, PropsWithChildren, ReactElement, AriaAttributes } from 'react';
-import { AlertColor, SnackbarOrigin, ButtonGroupProps as ButtonGroupProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, PopoverProps, StepProps as StepProps$1, StepButtonProps as StepButtonProps$1, StepContentProps as StepContentProps$1, StepLabelProps as StepLabelProps$1, StepperProps as StepperProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, BoxProps, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1, SvgIconProps } from '@mui/material';
-export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid2 as Grid, Grid2Props as GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
 import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
 import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
 import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab';
+import { ButtonGroupProps as ButtonGroupProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, PopoverProps, StepProps as StepProps$1, StepButtonProps as StepButtonProps$1, StepContentProps as StepContentProps$1, StepLabelProps as StepLabelProps$1, StepperProps as StepperProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, BoxProps, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1, SvgIconProps } from '@mui/material';
+export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid2 as Grid, Grid2Props as GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
 import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
 import { SwitchProps as SwitchProps$1 } from '@mui/material/Switch';
 import { CheckboxProps as CheckboxProps$1 } from '@mui/material/Checkbox';
@@ -171,20 +171,6 @@ declare const CheckMarkAnimation: () => react_jsx_runtime.JSX.Element;
 type LoadingAnimationProps = Omit<LottieComponentProps, 'animationData'>;
 declare const LoadingAnimation: (props: LoadingAnimationProps) => react_jsx_runtime.JSX.Element;
 
-interface MessageOptions {
-    message: string;
-    appearance?: AlertColor;
-    autoDismiss?: boolean;
-    placement?: SnackbarOrigin;
-}
-interface MessagesContextProps {
-    showMessage: (options: MessageOptions) => void;
-}
-declare const useMessages: () => MessagesContextProps;
-declare const MessagesProvider: ({ children }: {
-    children: ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-
 declare const useIsDesktop: () => boolean;
 declare const useIsTablet: () => boolean;
 declare const useIsMobile: () => boolean;
@@ -1056,8 +1042,7 @@ interface IDBlockProps {
  * IDBlock - Read-only identifier display with integrated copy-to-clipboard button
  *
  * A component that displays an identifier (ID, account number, etc.) with a copy button.
- * Provides user feedback via Snackbar messages when copy succeeds or fails.
- * Requires MessagesProvider to be present in the component tree.
+ * Provides user feedback via an inline Snackbar when copy succeeds or fails.
  *
  * @example
  * ```tsx
@@ -1077,7 +1062,6 @@ interface IDBlockProps {
  * ```
  *
  * @see Figma node 17-3596 for design specifications
- * @requires MessagesProvider - Must be wrapped in MessagesProvider context
  */
 declare const IDBlock: React__default.FC<IDBlockProps>;
 
@@ -1241,7 +1225,6 @@ interface EntityHeaderProps {
  * ```
  *
  * @see Figma node 15-1258 for design specifications
- * @requires MessagesProvider - Must be wrapped in MessagesProvider context for ID copy feedback
  */
 declare const EntityHeader: React__default.FC<EntityHeaderProps>;
 
@@ -1828,6 +1811,170 @@ type PeriodSelectProps = {
 };
 declare const PeriodSelect: ({ value, onChange }: PeriodSelectProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Represents a single time range option in the dropdown.
+ */
+interface TimeRangeOption {
+    /** Display label shown in the dropdown (e.g., "1 week") */
+    label: string;
+    /** Value identifier passed to the callback on selection */
+    value: string;
+}
+interface TimeRangeSelectProps {
+    /** Available time range options */
+    options: TimeRangeOption[];
+    /** Currently selected time range value */
+    value?: string;
+    /** Callback invoked when user selects a different time range */
+    onChange?: (value: string) => void;
+}
+/**
+ * Configurable time range dropdown selector.
+ * Renders a compact select field with the provided time range options.
+ *
+ * @example
+ * ```tsx
+ * <TimeRangeSelect
+ *   options={[
+ *     { label: 'Last hour', value: 'hour' },
+ *     { label: '24 hours', value: 'day' },
+ *     { label: '1 week', value: 'week' },
+ *   ]}
+ *   value="week"
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+declare const TimeRangeSelect: ({ options, value, onChange }: TimeRangeSelectProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Represents a single summary statistic item displayed below the graph.
+ */
+interface SummaryItem {
+    /** Descriptive label (e.g., "Total Engagements") */
+    label: string;
+    /** Numeric or string value (e.g., "13.72" or 11372) */
+    value: string | number;
+    /** Optional unit suffix (e.g., "K", "GB", "%") */
+    unit?: string;
+}
+interface SummaryStatsProps {
+    /** Array of summary items to display */
+    items: SummaryItem[];
+}
+/**
+ * Renders a horizontal row of summary statistics below the graph.
+ * Each item shows a label with its corresponding value and optional unit.
+ *
+ * Matches the Figma design layout with label in secondary text color
+ * and value in bold heading typography.
+ *
+ * @example
+ * ```tsx
+ * <SummaryStats
+ *   items={[
+ *     { label: 'Total Engagements', value: 11372 },
+ *     { label: 'Total Consumed', value: '156.91', unit: 'GB' },
+ *   ]}
+ * />
+ * ```
+ */
+declare const SummaryStats: ({ items }: SummaryStatsProps) => react_jsx_runtime.JSX.Element | null;
+
+/**
+ * A single data point in a time series.
+ * Use `null` for the value to represent missing/gap data — the line will break.
+ */
+interface DataPoint {
+    /** Timestamp of the observation */
+    timestamp: Date;
+    /** Numeric value, or `null` to indicate a gap in the data */
+    value: number | null;
+}
+/**
+ * Represents one line on the graph (a named data series).
+ */
+interface DataSeries {
+    /** Unique display name for this series (shown in legend) */
+    name: string;
+    /** CSS color string for the line and legend indicator */
+    color: string;
+    /** Ordered array of data points */
+    data: DataPoint[];
+}
+interface TimeSeriesGraphProps {
+    /** Optional title displayed at the top-left of the graph card */
+    title?: string;
+    /**
+     * Array of data series to render. Each series becomes one line on the graph.
+     * There is no hardcoded limit on the number of series.
+     */
+    series: DataSeries[];
+    /**
+     * Configurable time range options for the dropdown selector.
+     * When omitted, the time range dropdown is not rendered.
+     */
+    timeRangeOptions?: TimeRangeOption[];
+    /** Currently selected time range value (controlled) */
+    selectedTimeRange?: string;
+    /** Callback invoked when the user picks a different time range */
+    onTimeRangeChange?: (value: string) => void;
+    /**
+     * Optional array of summary statistics displayed below the graph.
+     * When omitted or empty, the summary section is hidden.
+     */
+    summaryItems?: SummaryItem[];
+    /**
+     * Whether to show the summary statistics section.
+     * Defaults to `true`. Set to `false` to explicitly hide, even when `summaryItems` are provided.
+     */
+    showSummary?: boolean;
+    /**
+     * Optional header action element rendered to the right of the title
+     * (e.g., a secondary dropdown or filter control).
+     */
+    headerAction?: ReactNode;
+    /**
+     * When `true`, shows a loading overlay (spinner) over the graph area
+     * while the header remains visible and interactive.
+     */
+    loading?: boolean;
+}
+/**
+ * A reusable time series graph component that displays one or more data lines
+ * over a shared time axis. Supports configurable time range selection,
+ * optional summary statistics, interactive legend toggling, crosshair tooltips,
+ * and a loading state.
+ *
+ * Built on `@mui/x-charts` LineChart and the Cere Design System theme.
+ *
+ * @example
+ * ```tsx
+ * <TimeSeriesGraph
+ *   title="Engagement over time"
+ *   series={[
+ *     { name: 'Engagements', color: '#6750A4', data: engagementData },
+ *     { name: 'Unique Streams', color: '#4caf50', data: streamData },
+ *   ]}
+ *   timeRangeOptions={[
+ *     { label: 'Last hour', value: 'hour' },
+ *     { label: '24 hours', value: 'day' },
+ *     { label: '1 week', value: 'week' },
+ *     { label: '1 month', value: 'month' },
+ *   ]}
+ *   selectedTimeRange="week"
+ *   onTimeRangeChange={(range) => fetchData(range)}
+ *   summaryItems={[
+ *     { label: 'Total Engagements', value: 11372 },
+ *     { label: 'Daily Engagements', value: 156 },
+ *   ]}
+ * />
+ * ```
+ *
+ * Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)
+ */
+declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
+
 interface FlowEditorProps extends Omit<ReactFlowProps, 'nodes' | 'edges'> {
     /**
      * Nodes to display in the flow
@@ -2004,4 +2151,4 @@ interface CodeEditorProps {
  */
 declare const CodeEditor: React__default.FC<CodeEditorProps>;
 
-export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, type CardProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorLanguage, type CodeEditorProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, DecentralizedServerIcon, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, GithubLogoIcon, IDBlock, type IDBlockProps, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, type MessageOptions, MessagesProvider, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, Paper, type PaperProps, PeriodSelect, type PrimaryAction, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, RightArrowIcon, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UserInfo, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, robPaletteExtended, robPrimaryPalette, theme, useIsDesktop, useIsMobile, useIsTablet, useMessages, useOnboarding };
+export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, type CardProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorLanguage, type CodeEditorProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, type DataPoint, type DataSeries, DecentralizedServerIcon, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, GithubLogoIcon, IDBlock, type IDBlockProps, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, Paper, type PaperProps, PeriodSelect, type PrimaryAction, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, RightArrowIcon, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, type SummaryItem, SummaryStats, type SummaryStatsProps, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UserInfo, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, robPaletteExtended, robPrimaryPalette, theme, useIsDesktop, useIsMobile, useIsTablet, useOnboarding };

package/dist/index.d.ts

@@ -3,11 +3,11 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LottieComponentProps } from 'lottie-react';
 import * as React from 'react';
 import React__default, { ReactNode, Ref, PropsWithChildren, ReactElement, AriaAttributes } from 'react';
-import { AlertColor, SnackbarOrigin, ButtonGroupProps as ButtonGroupProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, PopoverProps, StepProps as StepProps$1, StepButtonProps as StepButtonProps$1, StepContentProps as StepContentProps$1, StepLabelProps as StepLabelProps$1, StepperProps as StepperProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, BoxProps, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1, SvgIconProps } from '@mui/material';
-export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid2 as Grid, Grid2Props as GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
 import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
 import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
 import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab';
+import { ButtonGroupProps as ButtonGroupProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, PopoverProps, StepProps as StepProps$1, StepButtonProps as StepButtonProps$1, StepContentProps as StepContentProps$1, StepLabelProps as StepLabelProps$1, StepperProps as StepperProps$1, MenuProps as MenuProps$1, DialogProps as DialogProps$1, BoxProps, ListProps as ListProps$1, ListItemProps as ListItemProps$1, TableProps as TableProps$1, AccordionProps as AccordionProps$1, AppBarProps as AppBarProps$1, CollapseProps as CollapseProps$1, CircularProgressProps as CircularProgressProps$1, SvgIconProps } from '@mui/material';
+export { Box, BoxProps, Container, ContainerProps, FormControl, FormControlLabel, FormControlLabelProps, FormControlProps, FormHelperText, FormHelperTextProps, FormLabel, FormLabelProps, Grid2 as Grid, Grid2Props as GridProps, InputAdornment, InputAdornmentProps, InputLabel, InputLabelProps, ListItemIcon, ListItemSecondaryAction, ListItemText, Stack, StackProps, Toolbar, ToolbarProps, Typography, TypographyProps } from '@mui/material';
 import { TextFieldProps as TextFieldProps$1 } from '@mui/material/TextField';
 import { SwitchProps as SwitchProps$1 } from '@mui/material/Switch';
 import { CheckboxProps as CheckboxProps$1 } from '@mui/material/Checkbox';
@@ -171,20 +171,6 @@ declare const CheckMarkAnimation: () => react_jsx_runtime.JSX.Element;
 type LoadingAnimationProps = Omit<LottieComponentProps, 'animationData'>;
 declare const LoadingAnimation: (props: LoadingAnimationProps) => react_jsx_runtime.JSX.Element;
 
-interface MessageOptions {
-    message: string;
-    appearance?: AlertColor;
-    autoDismiss?: boolean;
-    placement?: SnackbarOrigin;
-}
-interface MessagesContextProps {
-    showMessage: (options: MessageOptions) => void;
-}
-declare const useMessages: () => MessagesContextProps;
-declare const MessagesProvider: ({ children }: {
-    children: ReactNode;
-}) => react_jsx_runtime.JSX.Element;
-
 declare const useIsDesktop: () => boolean;
 declare const useIsTablet: () => boolean;
 declare const useIsMobile: () => boolean;
@@ -1056,8 +1042,7 @@ interface IDBlockProps {
  * IDBlock - Read-only identifier display with integrated copy-to-clipboard button
  *
  * A component that displays an identifier (ID, account number, etc.) with a copy button.
- * Provides user feedback via Snackbar messages when copy succeeds or fails.
- * Requires MessagesProvider to be present in the component tree.
+ * Provides user feedback via an inline Snackbar when copy succeeds or fails.
  *
  * @example
  * ```tsx
@@ -1077,7 +1062,6 @@ interface IDBlockProps {
  * ```
  *
  * @see Figma node 17-3596 for design specifications
- * @requires MessagesProvider - Must be wrapped in MessagesProvider context
  */
 declare const IDBlock: React__default.FC<IDBlockProps>;
 
@@ -1241,7 +1225,6 @@ interface EntityHeaderProps {
  * ```
  *
  * @see Figma node 15-1258 for design specifications
- * @requires MessagesProvider - Must be wrapped in MessagesProvider context for ID copy feedback
  */
 declare const EntityHeader: React__default.FC<EntityHeaderProps>;
 
@@ -1828,6 +1811,170 @@ type PeriodSelectProps = {
 };
 declare const PeriodSelect: ({ value, onChange }: PeriodSelectProps) => react_jsx_runtime.JSX.Element;
 
+/**
+ * Represents a single time range option in the dropdown.
+ */
+interface TimeRangeOption {
+    /** Display label shown in the dropdown (e.g., "1 week") */
+    label: string;
+    /** Value identifier passed to the callback on selection */
+    value: string;
+}
+interface TimeRangeSelectProps {
+    /** Available time range options */
+    options: TimeRangeOption[];
+    /** Currently selected time range value */
+    value?: string;
+    /** Callback invoked when user selects a different time range */
+    onChange?: (value: string) => void;
+}
+/**
+ * Configurable time range dropdown selector.
+ * Renders a compact select field with the provided time range options.
+ *
+ * @example
+ * ```tsx
+ * <TimeRangeSelect
+ *   options={[
+ *     { label: 'Last hour', value: 'hour' },
+ *     { label: '24 hours', value: 'day' },
+ *     { label: '1 week', value: 'week' },
+ *   ]}
+ *   value="week"
+ *   onChange={(value) => console.log(value)}
+ * />
+ * ```
+ */
+declare const TimeRangeSelect: ({ options, value, onChange }: TimeRangeSelectProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * Represents a single summary statistic item displayed below the graph.
+ */
+interface SummaryItem {
+    /** Descriptive label (e.g., "Total Engagements") */
+    label: string;
+    /** Numeric or string value (e.g., "13.72" or 11372) */
+    value: string | number;
+    /** Optional unit suffix (e.g., "K", "GB", "%") */
+    unit?: string;
+}
+interface SummaryStatsProps {
+    /** Array of summary items to display */
+    items: SummaryItem[];
+}
+/**
+ * Renders a horizontal row of summary statistics below the graph.
+ * Each item shows a label with its corresponding value and optional unit.
+ *
+ * Matches the Figma design layout with label in secondary text color
+ * and value in bold heading typography.
+ *
+ * @example
+ * ```tsx
+ * <SummaryStats
+ *   items={[
+ *     { label: 'Total Engagements', value: 11372 },
+ *     { label: 'Total Consumed', value: '156.91', unit: 'GB' },
+ *   ]}
+ * />
+ * ```
+ */
+declare const SummaryStats: ({ items }: SummaryStatsProps) => react_jsx_runtime.JSX.Element | null;
+
+/**
+ * A single data point in a time series.
+ * Use `null` for the value to represent missing/gap data — the line will break.
+ */
+interface DataPoint {
+    /** Timestamp of the observation */
+    timestamp: Date;
+    /** Numeric value, or `null` to indicate a gap in the data */
+    value: number | null;
+}
+/**
+ * Represents one line on the graph (a named data series).
+ */
+interface DataSeries {
+    /** Unique display name for this series (shown in legend) */
+    name: string;
+    /** CSS color string for the line and legend indicator */
+    color: string;
+    /** Ordered array of data points */
+    data: DataPoint[];
+}
+interface TimeSeriesGraphProps {
+    /** Optional title displayed at the top-left of the graph card */
+    title?: string;
+    /**
+     * Array of data series to render. Each series becomes one line on the graph.
+     * There is no hardcoded limit on the number of series.
+     */
+    series: DataSeries[];
+    /**
+     * Configurable time range options for the dropdown selector.
+     * When omitted, the time range dropdown is not rendered.
+     */
+    timeRangeOptions?: TimeRangeOption[];
+    /** Currently selected time range value (controlled) */
+    selectedTimeRange?: string;
+    /** Callback invoked when the user picks a different time range */
+    onTimeRangeChange?: (value: string) => void;
+    /**
+     * Optional array of summary statistics displayed below the graph.
+     * When omitted or empty, the summary section is hidden.
+     */
+    summaryItems?: SummaryItem[];
+    /**
+     * Whether to show the summary statistics section.
+     * Defaults to `true`. Set to `false` to explicitly hide, even when `summaryItems` are provided.
+     */
+    showSummary?: boolean;
+    /**
+     * Optional header action element rendered to the right of the title
+     * (e.g., a secondary dropdown or filter control).
+     */
+    headerAction?: ReactNode;
+    /**
+     * When `true`, shows a loading overlay (spinner) over the graph area
+     * while the header remains visible and interactive.
+     */
+    loading?: boolean;
+}
+/**
+ * A reusable time series graph component that displays one or more data lines
+ * over a shared time axis. Supports configurable time range selection,
+ * optional summary statistics, interactive legend toggling, crosshair tooltips,
+ * and a loading state.
+ *
+ * Built on `@mui/x-charts` LineChart and the Cere Design System theme.
+ *
+ * @example
+ * ```tsx
+ * <TimeSeriesGraph
+ *   title="Engagement over time"
+ *   series={[
+ *     { name: 'Engagements', color: '#6750A4', data: engagementData },
+ *     { name: 'Unique Streams', color: '#4caf50', data: streamData },
+ *   ]}
+ *   timeRangeOptions={[
+ *     { label: 'Last hour', value: 'hour' },
+ *     { label: '24 hours', value: 'day' },
+ *     { label: '1 week', value: 'week' },
+ *     { label: '1 month', value: 'month' },
+ *   ]}
+ *   selectedTimeRange="week"
+ *   onTimeRangeChange={(range) => fetchData(range)}
+ *   summaryItems={[
+ *     { label: 'Total Engagements', value: 11372 },
+ *     { label: 'Daily Engagements', value: 156 },
+ *   ]}
+ * />
+ * ```
+ *
+ * Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)
+ */
+declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
+
 interface FlowEditorProps extends Omit<ReactFlowProps, 'nodes' | 'edges'> {
     /**
      * Nodes to display in the flow
@@ -2004,4 +2151,4 @@ interface CodeEditorProps {
  */
 declare const CodeEditor: React__default.FC<CodeEditorProps>;
 
-export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, type CardProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorLanguage, type CodeEditorProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, DecentralizedServerIcon, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, GithubLogoIcon, IDBlock, type IDBlockProps, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, type MessageOptions, MessagesProvider, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, Paper, type PaperProps, PeriodSelect, type PrimaryAction, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, RightArrowIcon, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UserInfo, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, robPaletteExtended, robPrimaryPalette, theme, useIsDesktop, useIsMobile, useIsTablet, useMessages, useOnboarding };
+export { Accordion, type AccordionProps, AccountSection, type AccountSectionProps, ActivityAppIcon, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, AppLoading, type AppLoadingProps, Avatar, AvatarIcon, type AvatarProps, Badge, type BadgeProps, BarTrackingIcon, type BreadcrumbItem, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, BytesSize, type BytesSizeProps, Card, CardActions, CardContent, CardHeader, type CardProps, CereIcon, ChartWidget, type ChartWidgetProps, CheckMarkAnimation, Checkbox, type CheckboxProps, Chip, type ChipProps, CircularProgress, type CircularProgressProps, ClockIcon, CloudFlashIcon, CodeEditor, type CodeEditorLanguage, type CodeEditorProps, Collapse, type CollapseProps, ConnectionStatus, type ConnectionStatusProps, type ContextMenuItem, type DataPoint, type DataSeries, DecentralizedServerIcon, type DeploymentCardAction, DeploymentDashboardCard, type DeploymentDashboardCardProps, DeploymentDashboardPanel, type DeploymentDashboardPanelProps, DeploymentDashboardTree, type DeploymentDashboardTreeProps, DeploymentEntityContextMenu, type DeploymentEntityContextMenuProps, type DeploymentEntityType, type DeploymentStatusIndicator, type DeploymentTreeNode, Dialog, type DialogProps, DiscordIcon, Divider, type DividerProps, DownloadIcon, Drawer, type DrawerProps, Dropdown, DropdownAnchor, type DropdownAnchorProps, type DropdownProps, EmptyState, type EmptyStateProps, EntityHeader, type EntityHeaderProps, FilledFolderIcon, FlowEditor, type FlowEditorProps, FolderIcon, GithubLogoIcon, IDBlock, type IDBlockProps, IconButton, type IconButtonProps, LeftArrowIcon, Link, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Loading, LoadingAnimation, type LoadingAnimationProps, LoadingButton, type LoadingButtonProps, type LoadingProps, Logo, type LogoProps, Markdown, type MarkdownProps, Menu, MenuItem, type MenuItemProps, type MenuProps, MetricsChart, type MetricsChartProps, type MetricsPeriod, NavigationItem, type NavigationItemProps, NavigationList, type NavigationListProps, OnboardingProvider, Pagination, type PaginationProps, Paper, type PaperProps, PeriodSelect, type PrimaryAction, Progress, type ProgressProps, QRCode, type QRCodeProps, Radio, type RadioProps, RightArrowIcon, RoleBadge, type RoleBadgeColor, type RoleBadgeProps, type RoleBadgeSize, SearchField, type SearchFieldProps, Selector, type SelectorOption, type SelectorProps, type Service, ServiceSelectorButton, type ServiceSelectorButtonProps, ShareIcon, SideNav, SideNavHeader, type SideNavHeaderProps, type SideNavProps, Sidebar, SidebarItem, type SidebarItemProps, type SidebarProps, Snackbar, type SnackbarProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, StorageAppIcon, type SummaryItem, SummaryStats, type SummaryStatsProps, Switch, type SwitchProps, Tab, type TabProps, Table, TableHeader, type TableHeaderProps, type TableProps, TextField, type TextFieldProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, Tooltip, type TooltipProps, Truncate, type TruncateProps, UploadFileIcon, UploadFolderIcon, type UserInfo, type Workspace, WorkspaceSelectorButton, type WorkspaceSelectorButtonProps, colors, contextMenuItems, robPaletteExtended, robPrimaryPalette, theme, useIsDesktop, useIsMobile, useIsTablet, useOnboarding };