bluconndesign 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,2178 @@
+import { D as DesignSystemColor } from './theme-BTyiMh3f.mjs';
+export { t as theme, a as tokens } from './theme-BTyiMh3f.mjs';
+import React$1 from 'react';
+import * as _mui_material from '@mui/material';
+import { ButtonProps as ButtonProps$1, ButtonGroupProps as ButtonGroupProps$1, CheckboxProps as CheckboxProps$1, SwitchProps, ChipProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, TextFieldProps, BadgeProps as BadgeProps$1, AvatarProps as AvatarProps$1, TooltipProps as TooltipProps$1, CircularProgressProps as CircularProgressProps$1, LinearProgressProps as LinearProgressProps$1, BoxProps as BoxProps$1, ContainerProps as ContainerProps$1, GridProps as GridProps$1, StackProps as StackProps$1, TypographyProps as TypographyProps$1, DividerProps as DividerProps$1, AppBarProps as AppBarProps$1, DrawerProps as DrawerProps$1, LinkProps as LinkProps$1, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, TabsProps as TabsProps$1, TabProps as TabProps$1, ToolbarProps as ToolbarProps$1, ListProps as ListProps$1, ListItemProps as ListItemProps$1, ListItemAvatarProps as ListItemAvatarProps$1, ListItemButtonProps as ListItemButtonProps$1, ListItemIconProps as ListItemIconProps$1, ListItemSecondaryActionProps as ListItemSecondaryActionProps$1, ListItemTextProps as ListItemTextProps$1, TableProps as TableProps$1, TableBodyProps as TableBodyProps$1, TableCellProps as TableCellProps$1, TableContainerProps as TableContainerProps$1, TableHeadProps as TableHeadProps$1, TableRowProps as TableRowProps$1, PaperProps as PaperProps$1, AccordionProps as AccordionProps$1, AccordionDetailsProps as AccordionDetailsProps$1, AccordionSummaryProps as AccordionSummaryProps$1, CardProps as CardProps$1, CardMediaProps as CardMediaProps$1, CardContentProps as CardContentProps$1, CardActionsProps as CardActionsProps$1, AutocompleteProps as AutocompleteProps$1, SelectProps as SelectProps$1, FormControlProps as FormControlProps$1, FormControlLabelProps as FormControlLabelProps$1, FormHelperTextProps as FormHelperTextProps$1, FormLabelProps as FormLabelProps$1, InputLabelProps as InputLabelProps$1, IconButtonProps as IconButtonProps$1, FabProps as FabProps$1, ToggleButtonProps as ToggleButtonProps$1, ToggleButtonGroupProps as ToggleButtonGroupProps$1, DialogProps as DialogProps$1, DialogActionsProps as DialogActionsProps$1, DialogContentProps as DialogContentProps$1, DialogContentTextProps as DialogContentTextProps$1, DialogTitleProps as DialogTitleProps$1, PopoverProps as PopoverProps$1, StepperProps as StepperProps$1, StepProps as StepProps$1, StepLabelProps as StepLabelProps$1, StepContentProps as StepContentProps$1, StepButtonProps as StepButtonProps$1 } from '@mui/material';
+export { CssBaseline } from '@mui/material';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _mui_types from '@mui/types';
+import * as _mui_system from '@mui/system';
+import { DatePickerProps as DatePickerProps$1, TimePickerProps as TimePickerProps$1, LocalizationProviderProps as LocalizationProviderProps$1 } from '@mui/x-date-pickers';
+import { Dayjs } from 'dayjs';
+import { DataGridProps as DataGridProps$1, GridColDef } from '@mui/x-data-grid';
+export { ThemeProvider } from '@mui/material/styles';
+
+type ButtonSize = 'small' | 'medium' | 'large';
+interface ButtonProps extends Omit<ButtonProps$1, 'color' | 'size'> {
+    label?: string;
+    color?: DesignSystemColor | 'inherit';
+    size?: ButtonSize;
+    loading?: boolean;
+    iconLeading?: React$1.ReactNode;
+    iconTrailing?: React$1.ReactNode;
+    iconOnly?: boolean;
+}
+declare const Button: React$1.FC<ButtonProps>;
+
+interface ButtonGroupProps extends ButtonGroupProps$1 {
+}
+declare const ButtonGroup: React$1.FC<ButtonGroupProps>;
+
+interface CheckboxProps extends Omit<CheckboxProps$1, 'color' | 'size'> {
+    /**
+     * Optional label to display next to the checkbox
+     */
+    label?: string;
+    /**
+     * The color of the checkbox when checked
+     */
+    color?: DesignSystemColor;
+    /**
+     * The size of the checkbox
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+}
+/**
+ * Checkbox component following the design system specifications.
+ *
+ * Features:
+ * - Two sizes: small (16x16px) and medium (20x20px)
+ * - Green checked state with hover effect
+ * - Focus ring on keyboard navigation
+ * - Disabled state styling
+ * - Indeterminate state support
+ */
+declare const Checkbox: ({ label, size, color, ...props }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+interface ToggleProps extends Omit<SwitchProps, 'color'> {
+    /**
+     * Optional label to display next to the toggle
+     */
+    label?: string;
+    /**
+     * The color of the toggle when checked
+     */
+    color?: DesignSystemColor;
+    /**
+     * The size of the toggle
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+}
+/**
+ * Toggle component (Switch) following the design system specifications.
+ *
+ * Features:
+ * - Two sizes: small (sm: 36x20px) and medium (md: 44x24px)
+ * - Green checked state with hover effect
+ * - Focus ring on keyboard navigation
+ * - Disabled state styling
+ */
+declare const Toggle: ({ label, size, color, ...props }: ToggleProps) => react_jsx_runtime.JSX.Element;
+
+type TagSize = 'small' | 'medium' | 'large';
+type TagVariant = 'filled' | 'outlined';
+type TagColor = 'primary' | 'secondary' | 'error' | 'success';
+interface TagProps extends Omit<ChipProps, 'color' | 'size' | 'variant'> {
+    label?: string;
+    color?: TagColor;
+    size?: TagSize;
+    variant?: TagVariant;
+    icon?: React$1.ReactElement;
+    onDelete?: (event: any) => void;
+    deleteIcon?: React$1.ReactElement;
+    avatar?: React$1.ReactElement;
+    clickable?: boolean;
+}
+/**
+ * Tag component (wrapper for MUI Chip)
+ *
+ * A compact element that represents an input, attribute, or action.
+ * Tags can be used in Autocomplete components with the limitTags prop.
+ *
+ * @example
+ * // Basic tag
+ * <Tag label="Tag Label" color="primary" />
+ *
+ * @example
+ * // Deletable tag
+ * <Tag label="Deletable" color="primary" onDelete={() => handleDelete()} />
+ *
+ * @example
+ * // With Autocomplete (limit tags)
+ * <Autocomplete
+ *   multiple
+ *   limitTags={2}
+ *   options={options}
+ *   renderTags={(value, getTagProps) =>
+ *     value.map((option, index) => (
+ *       <Tag
+ *         label={option}
+ *         {...getTagProps({ index })}
+ *       />
+ *     ))
+ *   }
+ * />
+ */
+declare const Tag: React$1.FC<TagProps>;
+
+interface RadioOption {
+    label: string;
+    value: string | number;
+    disabled?: boolean;
+}
+interface RadioProps extends Omit<RadioProps$1, 'color'> {
+    /**
+     * The color of the radio when checked
+     */
+    color?: DesignSystemColor;
+    /**
+     * The size of the radio
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+}
+/**
+ * Radio component following the design system specifications.
+ *
+ * Features:
+ * - Two sizes: small (16x16px) and medium (20x20px)
+ * - Green checked state with solid background and white dot
+ * - Focus ring on keyboard navigation
+ * - Disabled state styling
+ */
+declare const Radio: ({ size, disabled, color, ...props }: RadioProps) => react_jsx_runtime.JSX.Element;
+interface RadioGroupProps extends Omit<RadioGroupProps$1, 'color'> {
+    options: RadioOption[];
+    color?: DesignSystemColor;
+    /**
+     * The size of the radio buttons
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+}
+/**
+ * RadioGroup component following the design system specifications.
+ */
+declare const RadioGroup: ({ options, color, size, ...props }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+
+interface InputProps extends Omit<TextFieldProps, 'color' | 'size'> {
+    /**
+     * The color of the input field
+     */
+    color?: DesignSystemColor;
+    /**
+     * The size of the input field
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+}
+/**
+ * Input component following the design system specifications.
+ *
+ * Features:
+ * - Two sizes: small (sm) and medium (md)
+ * - Support for leading and trailing adornments
+ * - Error state with destructive styling
+ * - Disabled state
+ * - Helper text support
+ */
+declare const Input: ({ size, color, ...props }: InputProps) => react_jsx_runtime.JSX.Element;
+
+interface TextAreaProps extends Omit<TextFieldProps, 'color' | 'multiline'> {
+    /**
+     * The color of the textarea field
+     */
+    color?: DesignSystemColor;
+    /**
+     * Minimum number of rows to display
+     * @default 4
+     */
+    minRows?: number;
+    /**
+     * Maximum number of rows to display before scrolling
+     */
+    maxRows?: number;
+}
+/**
+ * TextArea component following the design system specifications.
+ *
+ * A multiline input field for longer text content.
+ *
+ * Features:
+ * - Resizable textarea with optional min/max rows
+ * - Error state with destructive styling
+ * - Disabled state
+ * - Helper text support
+ * - Label with required indicator
+ */
+declare const TextArea: ({ minRows, maxRows, color, ...props }: TextAreaProps) => react_jsx_runtime.JSX.Element;
+
+interface BadgeProps extends Omit<BadgeProps$1, 'color' | 'variant' | 'content'> {
+    color?: DesignSystemColor;
+    /**
+     * Size of the badge
+     */
+    size?: 'sm' | 'md';
+    /**
+     * Variant: 'dot' for overlay badge (default MUI behavior), 'inline' for pill badge next to content
+     * @default 'dot'
+     */
+    variant?: 'dot' | 'inline';
+    /**
+     * For inline variant: the content to display in the badge
+     */
+    content?: React$1.ReactNode;
+    /**
+     * Whether the badge represents an active/selected state (for inline variant)
+     */
+    active?: boolean;
+}
+declare const Badge: ({ color, size, variant, content, active, ...props }: BadgeProps) => react_jsx_runtime.JSX.Element;
+
+type AvatarSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+interface AvatarProps extends Omit<AvatarProps$1, 'variant'> {
+    /**
+     * Size of the avatar
+     * @default 'sm'
+     */
+    size?: AvatarSize;
+    /**
+     * Whether to show placeholder (user icon or initials) instead of image
+     * @default false
+     */
+    placeholder?: boolean;
+    /**
+     * Initials to display when placeholder is true and text is provided
+     */
+    initials?: string;
+    /**
+     * Whether to show the verified badge
+     * @default false
+     */
+    verified?: boolean;
+}
+/**
+ * Avatar component following the design system specifications.
+ *
+ * Features:
+ * - Three sizes: sm (72px), md (96px), lg (160px)
+ * - Wrapper with white background and subtle border
+ * - Placeholder state with user icon
+ * - Initials state with text
+ * - Optional verified badge
+ */
+declare const Avatar: ({ size, placeholder, initials, verified, src, alt, children, sx, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element;
+
+interface TooltipProps extends Omit<TooltipProps$1, 'title'> {
+    /**
+     * The main tooltip text
+     */
+    title: string;
+    /**
+     * Optional supporting text for more detailed descriptions
+     */
+    supportingText?: string;
+}
+/**
+ * Tooltip component following the design system specifications.
+ *
+ * Features:
+ * - Dark background (#0A0D12) with 8px border radius
+ * - Optional supporting text for detailed descriptions
+ * - Proper arrow styling matching the tooltip background
+ * - Typography: 12px DM Sans, semibold title, medium supporting text
+ */
+declare const Tooltip: ({ title, supportingText, children, arrow, placement, ...props }: TooltipProps) => react_jsx_runtime.JSX.Element;
+
+interface CircularProgressProps extends Omit<CircularProgressProps$1, 'color'> {
+    color?: DesignSystemColor | 'inherit';
+}
+interface LinearProgressProps extends Omit<LinearProgressProps$1, 'color'> {
+    color?: DesignSystemColor | 'inherit';
+}
+declare const CircularProgress: ({ color, ...props }: CircularProgressProps) => react_jsx_runtime.JSX.Element;
+declare const LinearProgress: ({ color, ...props }: LinearProgressProps) => react_jsx_runtime.JSX.Element;
+type ProgressCircleSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+type ProgressCircleShape = 'circle' | 'half-circle';
+interface ProgressCircleProps {
+    /**
+     * The progress value (0-100)
+     */
+    value: number;
+    /**
+     * Size of the progress circle
+     */
+    size?: ProgressCircleSize;
+    /**
+     * Shape of the progress indicator
+     */
+    shape?: ProgressCircleShape;
+    /**
+     * Show label below the percentage
+     */
+    showLabel?: boolean;
+    /**
+     * Custom label text
+     */
+    label?: string;
+    /**
+     * Color of the progress bar
+     */
+    color?: 'primary' | 'success' | 'warning' | 'error';
+}
+declare const ProgressCircle: React$1.FC<ProgressCircleProps>;
+
+type BoxProps<C extends React.ElementType = 'div'> = BoxProps$1<C, {
+    component?: C;
+}>;
+declare const Box: _mui_types.OverridableComponent<_mui_system.BoxTypeMap<{}, "div", _mui_material.Theme>>;
+
+type ContainerProps = ContainerProps$1;
+declare const Container: React$1.FC<ContainerProps>;
+
+type GridProps = GridProps$1;
+declare const Grid: React$1.FC<GridProps>;
+
+type StackProps = StackProps$1;
+declare const Stack: React$1.FC<StackProps>;
+
+interface TypographyProps extends Omit<TypographyProps$1, 'color'> {
+    color?: DesignSystemColor | 'textPrimary' | 'textSecondary' | 'error' | 'inherit';
+}
+declare const Typography: React$1.FC<TypographyProps>;
+
+type DividerProps = DividerProps$1;
+declare const Divider: React$1.FC<DividerProps>;
+
+interface AppBarProps extends Omit<AppBarProps$1, 'color'> {
+    color?: DesignSystemColor | 'transparent' | 'inherit' | 'default';
+}
+declare const AppBar: React$1.FC<AppBarProps>;
+
+type BreadcrumbDivider = 'Chevron' | 'Slash';
+type BreadcrumbType = 'Text' | 'Text with line' | 'Button';
+type BreadcrumbBreakpoint = 'Desktop' | 'Mobile';
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    isCurrentPage?: boolean;
+}
+interface BreadcrumbsProps {
+    items: BreadcrumbItem[];
+    divider?: BreadcrumbDivider;
+    type?: BreadcrumbType;
+    breakpoint?: BreadcrumbBreakpoint;
+    showHomeIcon?: boolean;
+    maxItems?: number;
+    onItemClick?: (item: BreadcrumbItem, index: number) => void;
+}
+declare const Breadcrumbs: React$1.FC<BreadcrumbsProps>;
+
+type DrawerProps = DrawerProps$1;
+declare const Drawer: React$1.FC<DrawerProps>;
+
+interface LinkProps extends Omit<LinkProps$1, 'color'> {
+    color?: DesignSystemColor | 'inherit' | 'initial';
+}
+declare const Link: React$1.FC<LinkProps>;
+
+interface SectionFooterAction {
+    label: string;
+    variant?: 'text' | 'outlined' | 'contained';
+    onClick?: () => void;
+    disabled?: boolean;
+}
+interface SectionFooterPeriod {
+    label: string;
+    value: string;
+}
+interface SectionFooterProps {
+    /**
+     * Time period options for toggle buttons
+     */
+    periods?: SectionFooterPeriod[];
+    /**
+     * Selected period value
+     */
+    selectedPeriod?: string;
+    /**
+     * Period change handler
+     */
+    onPeriodChange?: (value: string) => void;
+    /**
+     * Show custom period button
+     */
+    showCustomButton?: boolean;
+    /**
+     * Custom button click handler
+     */
+    onCustomClick?: () => void;
+    /**
+     * Show "Learn more" link
+     */
+    showLearnMore?: boolean;
+    /**
+     * Learn more click handler
+     */
+    onLearnMoreClick?: () => void;
+    /**
+     * Action buttons to display
+     */
+    actions?: SectionFooterAction[];
+}
+/**
+ * SectionFooter component for consistent section footers with time periods and actions.
+ *
+ * Features:
+ * - Time period toggle buttons (12 months, 30 days, 7 days, etc.)
+ * - Custom period button with + icon
+ * - Learn more link
+ * - Action buttons (Tertiary, Secondary, Primary)
+ * - Responsive layout
+ */
+declare const SectionFooter: React$1.FC<SectionFooterProps>;
+
+type MenuProps = MenuProps$1;
+declare const Menu: React$1.FC<MenuProps>;
+
+type MenuItemProps = MenuItemProps$1;
+declare const MenuItem: React$1.FC<MenuItemProps>;
+
+type TabsProps = TabsProps$1;
+declare const Tabs: React$1.FC<TabsProps>;
+
+type TabProps = TabProps$1;
+declare const Tab: React$1.FC<TabProps>;
+
+type VerticalTabsType = 'Button primary' | 'Button gray' | 'Line' | 'Button border' | 'Button minimal';
+type VerticalTabsSize = 'sm' | 'md';
+type VerticalTabsBreakpoint = 'Desktop' | 'Mobile';
+interface VerticalTab {
+    label: string;
+    value: string;
+    badge?: number;
+}
+interface VerticalTabsProps extends Omit<BoxProps$1, 'onChange'> {
+    /**
+     * Visual style of the tabs
+     */
+    type?: VerticalTabsType;
+    /**
+     * Size of the tabs
+     */
+    size?: VerticalTabsSize;
+    /**
+     * Responsive breakpoint (manual override)
+     */
+    breakpoint?: VerticalTabsBreakpoint;
+    /**
+     * Array of tab items
+     */
+    tabs?: VerticalTab[];
+    /**
+     * Currently active tab value
+     */
+    value?: string;
+    /**
+     * Callback when tab changes
+     */
+    onChange?: (value: string) => void;
+}
+declare const VerticalTabs: React$1.FC<VerticalTabsProps>;
+
+type HorizontalTabsType = 'Button brand' | 'Button gray' | 'Button white' | 'Underline' | 'Button border' | 'Button minimal';
+type HorizontalTabsSize = 'sm' | 'md';
+type HorizontalTabsBreakpoint = 'Desktop' | 'Mobile';
+interface HorizontalTab {
+    label: string;
+    value: string;
+    badge?: number;
+}
+interface HorizontalTabsProps extends Omit<BoxProps$1, 'onChange'> {
+    /**
+     * Visual style of the tabs
+     */
+    type?: HorizontalTabsType;
+    /**
+     * Size of the tabs
+     */
+    size?: HorizontalTabsSize;
+    /**
+     * Whether tabs should expand to fill available width
+     */
+    fullWidth?: boolean;
+    /**
+     * Responsive breakpoint (manual override)
+     */
+    breakpoint?: HorizontalTabsBreakpoint;
+    /**
+     * Array of tab items
+     */
+    tabs?: HorizontalTab[];
+    /**
+     * Currently active tab value
+     */
+    value?: string;
+    /**
+     * Callback when tab changes
+     */
+    onChange?: (value: string) => void;
+}
+declare const HorizontalTabs: React$1.FC<HorizontalTabsProps>;
+
+type ToolbarProps = ToolbarProps$1;
+declare const Toolbar: React$1.FC<ToolbarProps>;
+
+type ListProps = ListProps$1;
+declare const List: React$1.FC<ListProps>;
+type ListItemProps = ListItemProps$1;
+declare const ListItem: React$1.FC<ListItemProps>;
+type ListItemAvatarProps = ListItemAvatarProps$1;
+declare const ListItemAvatar: React$1.FC<ListItemAvatarProps>;
+type ListItemButtonProps = ListItemButtonProps$1;
+declare const ListItemButton: React$1.FC<ListItemButtonProps>;
+type ListItemIconProps = ListItemIconProps$1;
+declare const ListItemIcon: React$1.FC<ListItemIconProps>;
+type ListItemSecondaryActionProps = ListItemSecondaryActionProps$1;
+declare const ListItemSecondaryAction: React$1.FC<ListItemSecondaryActionProps>;
+type ListItemTextProps = ListItemTextProps$1;
+declare const ListItemText: React$1.FC<ListItemTextProps>;
+
+/**
+ * Table component - wrapper around MUI Table
+ *
+ * For pagination, use the design system's Pagination component from '../Pagination'
+ * instead of MUI's TablePagination.
+ *
+ * @example
+ * import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from 'design_system';
+ * import { Pagination } from 'design_system';
+ */
+type TableProps = TableProps$1;
+declare const Table: React$1.FC<TableProps>;
+type TableBodyProps = TableBodyProps$1;
+declare const TableBody: React$1.FC<TableBodyProps>;
+type TableCellProps = TableCellProps$1;
+declare const TableCell: React$1.FC<TableCellProps>;
+type TableContainerProps = TableContainerProps$1;
+declare const TableContainer: React$1.FC<TableContainerProps>;
+type TableHeadProps = TableHeadProps$1;
+declare const TableHead: React$1.FC<TableHeadProps>;
+type TableRowProps = TableRowProps$1;
+declare const TableRow: React$1.FC<TableRowProps>;
+
+type PaperProps = PaperProps$1;
+declare const Paper: React$1.FC<PaperProps>;
+
+type AccordionProps = AccordionProps$1;
+declare const Accordion: React$1.FC<AccordionProps>;
+type AccordionDetailsProps = AccordionDetailsProps$1;
+declare const AccordionDetails: React$1.FC<AccordionDetailsProps>;
+type AccordionSummaryProps = AccordionSummaryProps$1;
+declare const AccordionSummary: React$1.FC<AccordionSummaryProps>;
+
+type CardProps = CardProps$1;
+declare const Card: React$1.FC<CardProps>;
+type CardMediaProps = CardMediaProps$1;
+declare const CardMedia: React$1.FC<CardMediaProps>;
+type CardContentProps = CardContentProps$1;
+declare const CardContent: React$1.FC<CardContentProps>;
+type CardActionsProps = CardActionsProps$1;
+declare const CardActions: React$1.FC<CardActionsProps>;
+interface CardHeaderBadgeProps {
+    label: string;
+    color?: 'primary' | 'success' | 'warning' | 'error' | 'gray';
+}
+interface CardHeaderActionButton {
+    label: string;
+    onClick?: () => void;
+    variant?: 'tertiary' | 'secondary' | 'primary';
+}
+interface CardHeaderProps {
+    title: string;
+    subheader?: string;
+    badge?: CardHeaderBadgeProps;
+    avatar?: string | React$1.ReactElement;
+    actions?: CardHeaderActionButton[];
+    showDropdown?: boolean;
+    onDropdownClick?: () => void;
+    showDivider?: boolean;
+}
+declare const CardHeader: React$1.FC<CardHeaderProps>;
+
+type AutocompleteSize = 'sm' | 'md';
+type AutocompleteProps<T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined> = Omit<AutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo>, 'size'> & {
+    /**
+     * The size of the autocomplete input
+     * @default 'md'
+     */
+    size?: AutocompleteSize;
+};
+declare const Autocomplete: <T, Multiple extends boolean | undefined = undefined, DisableClearable extends boolean | undefined = undefined, FreeSolo extends boolean | undefined = undefined>(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>) => react_jsx_runtime.JSX.Element;
+
+interface SelectOption {
+    value: string | number;
+    label: string;
+}
+interface SelectProps extends Omit<SelectProps$1, 'children'> {
+    /**
+     * Array of options for the select dropdown
+     * If provided, will render MenuItem children automatically
+     */
+    options?: SelectOption[];
+    /**
+     * Children to render (MenuItem components)
+     * If options prop is provided, this will be ignored
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Placeholder text to display when no value is selected
+     */
+    placeholder?: string;
+}
+declare const Select: React$1.FC<SelectProps>;
+
+type FormControlProps = FormControlProps$1;
+declare const FormControl: React$1.FC<FormControlProps>;
+type FormControlLabelProps = FormControlLabelProps$1;
+declare const FormControlLabel: React$1.FC<FormControlLabelProps>;
+type FormHelperTextProps = FormHelperTextProps$1;
+declare const FormHelperText: React$1.FC<FormHelperTextProps>;
+type FormLabelProps = FormLabelProps$1;
+declare const FormLabel: React$1.FC<FormLabelProps>;
+type InputLabelProps = InputLabelProps$1;
+declare const InputLabel: React$1.FC<InputLabelProps>;
+
+interface IconButtonProps extends Omit<IconButtonProps$1, 'color'> {
+    color?: DesignSystemColor | 'inherit' | 'default';
+}
+declare const IconButton: React$1.FC<IconButtonProps>;
+
+interface FabProps extends Omit<FabProps$1, 'color'> {
+    color?: DesignSystemColor | 'inherit' | 'default';
+}
+declare const Fab: React$1.FC<FabProps>;
+
+interface ToggleButtonProps extends Omit<ToggleButtonProps$1, 'color'> {
+    color?: DesignSystemColor | 'standard';
+}
+declare const ToggleButton: React$1.FC<ToggleButtonProps>;
+interface ToggleButtonGroupProps extends Omit<ToggleButtonGroupProps$1, 'color'> {
+    color?: DesignSystemColor | 'standard';
+}
+declare const ToggleButtonGroup: React$1.FC<ToggleButtonGroupProps>;
+
+type AlertSeverity = 'info' | 'success' | 'warning' | 'error' | 'default' | 'gray';
+type AlertVariant = 'floating' | 'full-width';
+interface AlertAction {
+    label: string;
+    onClick?: () => void;
+    variant?: 'text' | 'contained';
+}
+interface AlertProps {
+    /**
+     * The severity of the alert
+     */
+    severity?: AlertSeverity;
+    /**
+     * The title of the alert
+     */
+    title: string;
+    /**
+     * Optional supporting text
+     */
+    description?: string;
+    /**
+     * Optional actions
+     */
+    actions?: AlertAction[];
+    /**
+     * Show close button
+     */
+    onClose?: () => void;
+    /**
+     * Alert variant (floating or full-width)
+     */
+    variant?: AlertVariant;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare const Alert: React$1.FC<AlertProps>;
+type AlertTitleProps = {
+    children: React$1.ReactNode;
+};
+declare const AlertTitle: React$1.FC<AlertTitleProps>;
+
+type DialogProps = DialogProps$1;
+declare const Dialog: React$1.FC<DialogProps>;
+type DialogActionsProps = DialogActionsProps$1;
+declare const DialogActions: React$1.FC<DialogActionsProps>;
+type DialogContentProps = DialogContentProps$1;
+declare const DialogContent: React$1.FC<DialogContentProps>;
+type DialogContentTextProps = DialogContentTextProps$1;
+declare const DialogContentText: React$1.FC<DialogContentTextProps>;
+type DialogTitleProps = DialogTitleProps$1;
+declare const DialogTitle: React$1.FC<DialogTitleProps>;
+
+type EmptyStateIconType = 'featured' | 'illustration' | 'fileType' | 'folder';
+type EmptyStateSize = 'sm' | 'md' | 'lg';
+interface EmptyStateAction {
+    label: string;
+    onClick?: () => void;
+    variant?: 'text' | 'outlined' | 'contained';
+    color?: 'primary' | 'secondary' | 'error' | 'warning' | 'success';
+    icon?: React$1.ReactNode;
+}
+interface EmptyStateProps {
+    /**
+     * The type of icon to display
+     */
+    iconType?: EmptyStateIconType;
+    /**
+     * The size of the empty state
+     */
+    size?: EmptyStateSize;
+    /**
+     * The heading text
+     */
+    heading?: string;
+    /**
+     * The description/supporting text
+     */
+    description?: string;
+    /**
+     * Primary action button
+     */
+    primaryAction?: EmptyStateAction;
+    /**
+     * Secondary action button
+     */
+    secondaryAction?: EmptyStateAction;
+    /**
+     * Whether to show the decorative background pattern
+     */
+    showBackground?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare const EmptyState: React$1.FC<EmptyStateProps>;
+
+type ModalType = 'stacked-left-aligned' | 'horizontal' | 'warning-horizontal' | 'destructive-horizontal' | 'destructive-stacked-left-aligned' | 'warning-stacked-left-aligned';
+type ModalSize = 'sm' | 'md' | 'lg';
+interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    /**
+     * Modal type/variant
+     */
+    type?: ModalType;
+    /**
+     * Modal title
+     */
+    title?: string;
+    /**
+     * Supporting/description text
+     */
+    description?: string;
+    /**
+     * Show featured icon
+     */
+    showIcon?: boolean;
+    /**
+     * Custom icon component
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Show close button
+     */
+    showCloseButton?: boolean;
+    /**
+     * Content to render in the modal body
+     */
+    children?: React$1.ReactNode;
+    /**
+     * Primary button text
+     */
+    primaryButtonText?: string;
+    /**
+     * Secondary button text
+     */
+    secondaryButtonText?: string;
+    /**
+     * Tertiary button text (for horizontal layouts)
+     */
+    tertiaryButtonText?: string;
+    /**
+     * Primary button handler
+     */
+    onPrimaryClick?: () => void;
+    /**
+     * Secondary button handler
+     */
+    onSecondaryClick?: () => void;
+    /**
+     * Tertiary button handler
+     */
+    onTertiaryClick?: () => void;
+    /**
+     * Show checkbox option (for horizontal layouts)
+     */
+    showCheckbox?: boolean;
+    /**
+     * Checkbox label
+     */
+    checkboxLabel?: string;
+    /**
+     * Modal width size
+     */
+    size?: ModalSize;
+    /**
+     * Show divider between header and content
+     */
+    showDivider?: boolean;
+}
+declare const Modal: React$1.FC<ModalProps>;
+
+type ModalActionsLayoutType = 'vertical-fill-container' | 'horizontal-fill-container' | 'horizontal-right-aligned-checkbox';
+type ModalActionsBreakpoint = 'desktop' | 'mobile';
+interface ModalActionsProps {
+    /**
+     * Whether to show the checkbox ("Don't show again")
+     * @default false
+     */
+    checkbox?: boolean;
+    /**
+     * Whether to show the tertiary button (Settings)
+     * @default false
+     */
+    tertiaryButton?: boolean;
+    /**
+     * Whether to show the divider above the actions
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * The layout type of the modal actions
+     * @default 'horizontal-fill-container'
+     */
+    type?: ModalActionsLayoutType;
+    /**
+     * Whether this is a destructive action (shows Delete button)
+     * @default false
+     */
+    destructive?: boolean;
+    /**
+     * The breakpoint for responsive design
+     * @default 'desktop'
+     */
+    breakpoint?: ModalActionsBreakpoint;
+    /**
+     * Callback when the Cancel button is clicked
+     */
+    onCancel?: () => void;
+    /**
+     * Callback when the Confirm/Delete button is clicked
+     */
+    onConfirm?: () => void;
+    /**
+     * Callback when the tertiary button (Settings) is clicked
+     */
+    onTertiaryAction?: () => void;
+    /**
+     * Callback when the checkbox is toggled
+     */
+    onCheckboxChange?: (checked: boolean) => void;
+    /**
+     * The checked state of the checkbox
+     */
+    checkboxChecked?: boolean;
+    /**
+     * Custom label for the confirm button
+     * @default 'Confirm'
+     */
+    confirmLabel?: string;
+    /**
+     * Custom label for the cancel button
+     * @default 'Cancel'
+     */
+    cancelLabel?: string;
+    /**
+     * Custom label for the delete button
+     * @default 'Delete'
+     */
+    deleteLabel?: string;
+    /**
+     * Custom label for the tertiary button
+     * @default 'Settings'
+     */
+    tertiaryLabel?: string;
+    /**
+     * Custom label for the checkbox
+     * @default "Don't show again"
+     */
+    checkboxLabel?: string;
+}
+/**
+ * ModalActions component provides standardized action areas for modal dialogs
+ * with support for different layouts, responsive breakpoints, and destructive actions.
+ *
+ * Features:
+ * - Three layout types: vertical fill, horizontal fill, and horizontal with checkbox
+ * - Desktop and mobile breakpoints
+ * - Optional checkbox, tertiary button, and divider
+ * - Support for destructive actions (Delete button)
+ * - Consistent spacing and styling from design tokens
+ */
+declare const ModalActions: React$1.FC<ModalActionsProps>;
+
+type ModalHeaderType = 'left-aligned' | 'center-aligned' | 'horizontal-left-aligned';
+type ModalHeaderBreakpoint = 'desktop' | 'mobile';
+type IconVariant = 'success' | 'warning' | 'error' | 'info';
+interface ModalHeaderProps {
+    /**
+     * Whether to show the close (X) button
+     * @default true
+     */
+    xCloseButton?: boolean;
+    /**
+     * Whether to show the featured icon
+     * @default true
+     */
+    featuredIcon?: boolean;
+    /**
+     * Whether to add padding at the bottom
+     * @default true
+     */
+    paddingBottom?: boolean;
+    /**
+     * Whether to show the divider
+     * @default true
+     */
+    divider?: boolean;
+    /**
+     * The layout type of the modal header
+     * @default 'left-aligned'
+     */
+    type?: ModalHeaderType;
+    /**
+     * The breakpoint for responsive design
+     * @default 'desktop'
+     */
+    breakpoint?: ModalHeaderBreakpoint;
+    /**
+     * The icon variant/color scheme
+     * @default 'success'
+     */
+    iconVariant?: IconVariant;
+    /**
+     * Custom icon component
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * The title text
+     */
+    title?: string;
+    /**
+     * The supporting/description text
+     */
+    description?: string;
+    /**
+     * Callback when close button is clicked
+     */
+    onClose?: () => void;
+}
+/**
+ * ModalHeader component provides standardized header sections for modal dialogs
+ * with support for different layouts, responsive breakpoints, and icon variants.
+ *
+ * Features:
+ * - Three layout types: left-aligned, center-aligned, and horizontal left-aligned
+ * - Desktop and mobile breakpoints
+ * - Optional featured icon with color variants (success, warning, error, info)
+ * - Optional close button
+ * - Optional divider and padding
+ * - Customizable title and description text
+ * - Consistent spacing and styling from design tokens
+ */
+declare const ModalHeader: React$1.FC<ModalHeaderProps>;
+
+type PopoverProps = PopoverProps$1;
+declare const Popover: React$1.FC<PopoverProps>;
+
+type StepperProps = StepperProps$1;
+declare const Stepper: React$1.FC<StepperProps>;
+type StepProps = StepProps$1;
+declare const Step: React$1.FC<StepProps>;
+type StepLabelProps = StepLabelProps$1;
+declare const StepLabel: React$1.FC<StepLabelProps>;
+type StepContentProps = StepContentProps$1;
+declare const StepContent: React$1.FC<StepContentProps>;
+type StepButtonProps = StepButtonProps$1;
+declare const StepButton: React$1.FC<StepButtonProps>;
+
+interface DateCalendarComponentProps {
+    /**
+     * The selected date value
+     */
+    value?: Dayjs | null;
+    /**
+     * Callback fired when the value changes
+     */
+    onChange?: (value: Dayjs | null) => void;
+    /**
+     * Show the Today button
+     */
+    showTodayButton?: boolean;
+    /**
+     * Dates with event indicators (small green dots)
+     */
+    highlightedDates?: Dayjs[];
+    /**
+     * Show Cancel and Apply buttons
+     */
+    showActionButtons?: boolean;
+    /**
+     * Cancel button callback
+     */
+    onCancel?: () => void;
+    /**
+     * Apply button callback
+     */
+    onApply?: () => void;
+}
+declare const DateCalendarComponent: React$1.FC<DateCalendarComponentProps>;
+type DatePickerProps = Omit<DatePickerProps$1<Dayjs>, 'open'>;
+declare const DatePicker: React$1.FC<DatePickerProps>;
+type TimePickerProps = TimePickerProps$1<Dayjs>;
+declare const TimePicker: React$1.FC<TimePickerProps>;
+type LocalizationProviderProps = LocalizationProviderProps$1<Dayjs>;
+declare const LocalizationProvider: React$1.FC<LocalizationProviderProps>;
+
+type DataGridProps = DataGridProps$1 & {
+    /**
+     * Show the table header with title and badge
+     */
+    showHeader?: boolean;
+    /**
+     * Title text for the header
+     */
+    headerTitle?: string;
+    /**
+     * Badge content for the header (e.g., "100 users")
+     */
+    headerBadgeContent?: string;
+    /**
+     * Show header menu icon
+     */
+    showHeaderMenu?: boolean;
+    /**
+     * Callback when header menu is clicked
+     */
+    onHeaderMenuClick?: () => void;
+    /**
+     * Show custom pagination
+     */
+    showCustomPagination?: boolean;
+    /**
+     * Pagination type
+     */
+    paginationType?: 'Page default' | 'Card minimal left aligned';
+    /**
+     * Show header action buttons (for file table)
+     */
+    showHeaderActions?: boolean;
+    /**
+     * Download all button label
+     */
+    downloadAllLabel?: string;
+    /**
+     * Upload button label
+     */
+    uploadLabel?: string;
+    /**
+     * Callback when download all is clicked
+     */
+    onDownloadAll?: () => void;
+    /**
+     * Callback when files are selected for upload
+     */
+    onUpload?: (files: FileList | null) => void;
+};
+declare const createFileColumns: () => GridColDef[];
+declare const createDefaultColumns: () => GridColDef[];
+declare const DataGrid: React$1.FC<DataGridProps>;
+
+interface CommandMenuProps {
+    open: boolean;
+    onClose: () => void;
+    placeholder?: string;
+    children?: React$1.ReactNode;
+    /**
+     * Search value (controlled)
+     */
+    searchValue?: string;
+    /**
+     * Search change handler
+     */
+    onSearchChange?: (value: string) => void;
+}
+declare const CommandMenu: React$1.FC<CommandMenuProps>;
+declare const CommandGroup: React$1.FC<{
+    title: string;
+    children: React$1.ReactNode;
+}>;
+interface CommandItemProps {
+    icon?: React$1.ReactNode;
+    avatar?: React$1.ReactNode;
+    title: string;
+    subtitle?: string;
+    shortcut?: string[];
+    selected?: boolean;
+    onClick?: () => void;
+}
+declare const CommandItem: React$1.FC<CommandItemProps>;
+declare const CommandFooter: React$1.FC;
+interface CommandEmptyProps {
+    title?: string;
+    description?: string;
+    children?: React$1.ReactNode;
+}
+declare const CommandEmpty: React$1.FC<CommandEmptyProps>;
+interface CommandProfileProps {
+    avatar: React$1.ReactNode;
+    name: string;
+    role?: string;
+    description?: string;
+    actions?: React$1.ReactNode;
+}
+/**
+ * CommandProfile - Displays a user profile card with gradient header and avatar
+ *
+ * @example
+ * ```tsx
+ * <CommandProfile
+ *   avatar={<Avatar src="..." size="lg" />}
+ *   name="Olivia Rhye"
+ *   role="Product Designer"
+ *   description="I'm a Product Designer based in Melbourne, Australia."
+ *   actions={<Button>View profile</Button>}
+ * />
+ * ```
+ */
+declare const CommandProfile: React$1.FC<CommandProfileProps>;
+interface CommandSplitViewProps {
+    sidebar: React$1.ReactNode;
+    main: React$1.ReactNode;
+}
+/**
+ * CommandSplitView - Two-column layout with sidebar list and main content area
+ */
+declare const CommandSplitView: React$1.FC<CommandSplitViewProps>;
+interface CommandIntegrationDetailProps {
+    icon: React$1.ReactNode;
+    name: string;
+    description: string;
+    primaryAction?: React$1.ReactNode;
+    secondaryAction?: React$1.ReactNode;
+    toggle?: React$1.ReactNode;
+}
+/**
+ * CommandIntegrationDetail - Displays integration details with icon, description, and actions
+ */
+declare const CommandIntegrationDetail: React$1.FC<CommandIntegrationDetailProps>;
+interface CommandProfileEnhancedProps {
+    avatar: React$1.ReactNode;
+    name: string;
+    verified?: boolean;
+    description: string;
+    socialIcons?: React$1.ReactNode[];
+    actions?: React$1.ReactNode;
+    gradientType?: 'purple-blue' | 'blue-pink';
+}
+/**
+ * CommandProfileEnhanced - Profile card with verified badge, social icons, and custom gradient
+ */
+declare const CommandProfileEnhanced: React$1.FC<CommandProfileEnhancedProps>;
+
+interface SlideMenuHeaderProps {
+    /** Optional icon element to display */
+    icon?: React$1.ReactNode;
+    /** Whether to show the featured icon container */
+    showIcon?: boolean;
+    /** Heading text */
+    heading?: string;
+    /** Supporting text below the heading */
+    supportingText?: string;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Whether to show tabs */
+    showTabs?: boolean;
+    /** Array of tab labels */
+    tabs?: Array<{
+        label: string;
+        badge?: string | number;
+    }>;
+    /** Currently selected tab index */
+    selectedTab?: number;
+    /** Callback when tab changes */
+    onTabChange?: (event: React$1.SyntheticEvent, value: number) => void;
+}
+interface SlideMenuFooterProps {
+    /** Left-aligned action buttons/links */
+    leftActions?: React$1.ReactNode;
+    /** Right-aligned action buttons */
+    rightActions?: React$1.ReactNode;
+    /** Whether to show the footer */
+    show?: boolean;
+}
+interface SlideMenuProps extends Omit<DrawerProps$1, 'onClose'> {
+    /** Header configuration */
+    header?: SlideMenuHeaderProps;
+    /** Footer configuration */
+    footer?: SlideMenuFooterProps;
+    /** Callback when drawer closes */
+    onClose?: () => void;
+}
+/**
+ * SlideMenu component - A drawer that slides in from the side with an optional header and footer
+ *
+ * Features:
+ * - Optional header with icon, heading, and supporting text
+ * - Optional tabs in the header
+ * - Optional footer with left and right actions
+ * - Close button
+ * - Responsive (Desktop/Mobile breakpoints)
+ * - Uses design tokens from tokens.json
+ */
+declare const SlideMenu: React$1.FC<SlideMenuProps>;
+
+interface ApplicationNavigationSubmenuItem {
+    /**
+     * Submenu item label
+     */
+    label: string;
+    /**
+     * Icon element
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Badge count or text
+     */
+    badge?: number | string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+interface ApplicationNavigationItemProps {
+    /**
+     * Whether the item is active
+     */
+    active?: boolean;
+    /**
+     * Icon element to display
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Icon background color (for team items)
+     */
+    iconBgColor?: string;
+    /**
+     * Label text
+     */
+    label?: string;
+    /**
+     * Badge count
+     */
+    badge?: number | string;
+    /**
+     * Keyboard shortcut (e.g., "⌘1")
+     */
+    keyboardShortcut?: string;
+    /**
+     * Show dropdown arrow
+     */
+    showDropdown?: boolean;
+    /**
+     * Show right arrow
+     */
+    showRightArrow?: boolean;
+    /**
+     * Whether the item is expanded
+     */
+    expanded?: boolean;
+    /**
+     * Submenu items
+     */
+    submenuItems?: ApplicationNavigationSubmenuItem[];
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+interface ApplicationNavigationIconButtonProps {
+    /**
+     * Variant of icon button
+     */
+    variant?: 'notification' | 'menu';
+    /**
+     * Size of icon button
+     */
+    size?: 'md' | 'lg';
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+interface ApplicationNavigationSearchProps {
+    /**
+     * Placeholder text
+     */
+    placeholder?: string;
+    /**
+     * Keyboard shortcut text
+     */
+    shortcut?: string;
+    /**
+     * Change handler
+     */
+    onChange?: (value: string) => void;
+}
+interface ApplicationNavigationUserProfileProps {
+    /**
+     * User name
+     */
+    name: string;
+    /**
+     * User email
+     */
+    email: string;
+    /**
+     * Avatar image URL
+     */
+    avatarSrc?: string;
+    /**
+     * Online status
+     */
+    online?: boolean;
+    /**
+     * Selected state (for radio button variant)
+     */
+    selected?: boolean;
+    /**
+     * Show expand icon
+     */
+    showExpand?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+interface ApplicationNavigationMenuItemProps {
+    /**
+     * Menu item icon
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Menu item label
+     */
+    label: string;
+    /**
+     * Keyboard shortcut
+     */
+    shortcut?: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+interface ApplicationNavigationAccountMenuProps {
+    /**
+     * Current user
+     */
+    currentUser: ApplicationNavigationUserProfileProps;
+    /**
+     * Menu items
+     */
+    menuItems?: ApplicationNavigationMenuItemProps[];
+    /**
+     * Switch account users
+     */
+    switchAccountUsers?: ApplicationNavigationUserProfileProps[];
+    /**
+     * Show add account button
+     */
+    showAddAccount?: boolean;
+    /**
+     * Show sign out
+     */
+    showSignOut?: boolean;
+    /**
+     * Sign out click handler
+     */
+    onSignOut?: () => void;
+    /**
+     * Add account click handler
+     */
+    onAddAccount?: () => void;
+}
+interface ApplicationNavigationBannerListItem {
+    /**
+     * List item label
+     */
+    label: string;
+    /**
+     * Dot color
+     */
+    dotColor?: string;
+    /**
+     * Show arrow
+     */
+    showArrow?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+interface ApplicationNavigationBannerProps {
+    /**
+     * Icon element to display
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Status badge (e.g., "Online", "Live")
+     */
+    statusBadge?: string;
+    /**
+     * Status badge color
+     */
+    statusBadgeColor?: string;
+    /**
+     * Avatars to display
+     */
+    avatars?: string[];
+    /**
+     * Avatar count text (e.g., "+5")
+     */
+    avatarCount?: string;
+    /**
+     * Show add button
+     */
+    showAddButton?: boolean;
+    /**
+     * Timestamp text (e.g., "2 mins ago")
+     */
+    timestamp?: string;
+    /**
+     * Title text
+     */
+    title: string;
+    /**
+     * Title right text (e.g., "24 days left")
+     */
+    titleRight?: string;
+    /**
+     * Description text
+     */
+    description?: string;
+    /**
+     * Message text (for user messages)
+     */
+    message?: string;
+    /**
+     * Progress type
+     */
+    progressType?: 'bar' | 'circular' | 'none';
+    /**
+     * Progress value (0-100)
+     */
+    progressValue?: number;
+    /**
+     * Badge text
+     */
+    badge?: string;
+    /**
+     * List items
+     */
+    listItems?: ApplicationNavigationBannerListItem[];
+    /**
+     * List footer link text
+     */
+    listFooterLink?: string;
+    /**
+     * List footer link handler
+     */
+    onListFooterClick?: () => void;
+    /**
+     * Image/QR code URL
+     */
+    imageUrl?: string;
+    /**
+     * Input field value (for referral links etc)
+     */
+    inputValue?: string;
+    /**
+     * Show copy button
+     */
+    showCopyButton?: boolean;
+    /**
+     * Primary action button text
+     */
+    primaryAction?: string;
+    /**
+     * Primary action icon
+     */
+    primaryActionIcon?: React$1.ReactNode;
+    /**
+     * Primary action click handler
+     */
+    onPrimaryAction?: () => void;
+    /**
+     * Secondary action button text
+     */
+    secondaryAction?: string;
+    /**
+     * Secondary action click handler
+     */
+    onSecondaryAction?: () => void;
+    /**
+     * Close handler
+     */
+    onClose?: () => void;
+}
+interface ApplicationNavigationProps {
+    /**
+     * Navigation items
+     */
+    items?: ApplicationNavigationItemProps[];
+    /**
+     * Icon button props
+     */
+    iconButton?: ApplicationNavigationIconButtonProps;
+    /**
+     * Search props
+     */
+    search?: ApplicationNavigationSearchProps;
+    /**
+     * User profile props
+     */
+    userProfile?: ApplicationNavigationUserProfileProps;
+    /**
+     * Account menu props
+     */
+    accountMenu?: ApplicationNavigationAccountMenuProps;
+    /**
+     * Banner props
+     */
+    banner?: ApplicationNavigationBannerProps;
+    /**
+     * Type of component to render
+     */
+    type?: 'item' | 'iconButton' | 'search' | 'userProfile' | 'accountMenu' | 'banner';
+}
+/**
+ * ApplicationNavigation component for navigation items and icon buttons
+ */
+declare const ApplicationNavigation: React$1.FC<ApplicationNavigationProps>;
+
+interface ApplicationNavigationSidebarLogo {
+    /**
+     * Logo icon element
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Logo text
+     */
+    text?: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+interface ApplicationNavigationSidebarSection {
+    /**
+     * Section header label (e.g., "GENERAL", "YOUR TEAMS")
+     */
+    header?: string;
+    /**
+     * Navigation items in this section
+     */
+    items: ApplicationNavigationItemProps[];
+}
+interface ApplicationNavigationSidebarProps {
+    /**
+     * Logo configuration
+     */
+    logo?: ApplicationNavigationSidebarLogo;
+    /**
+     * Show search input
+     */
+    showSearch?: boolean;
+    /**
+     * Search placeholder
+     */
+    searchPlaceholder?: string;
+    /**
+     * Search shortcut
+     */
+    searchShortcut?: string;
+    /**
+     * Search change handler
+     */
+    onSearchChange?: (value: string) => void;
+    /**
+     * Main navigation items
+     */
+    navigationItems?: ApplicationNavigationItemProps[];
+    /**
+     * Navigation sections (alternative to navigationItems for grouped navigation)
+     */
+    navigationSections?: ApplicationNavigationSidebarSection[];
+    /**
+     * Bottom navigation items (Settings, Support, etc)
+     */
+    bottomNavigationItems?: ApplicationNavigationItemProps[];
+    /**
+     * Banner configuration
+     */
+    banner?: ApplicationNavigationBannerProps;
+    /**
+     * User profile configuration
+     */
+    userProfile?: ApplicationNavigationUserProfileProps;
+    /**
+     * Collapsed state (icon-only mode)
+     */
+    collapsed?: boolean;
+    /**
+     * Drawer mode (with overlay and close button)
+     */
+    drawer?: boolean;
+    /**
+     * Drawer open state
+     */
+    drawerOpen?: boolean;
+    /**
+     * Drawer close handler
+     */
+    onDrawerClose?: () => void;
+    /**
+     * Show header only (logo and hamburger menu)
+     */
+    headerOnly?: boolean;
+    /**
+     * Header hamburger click handler
+     */
+    onHeaderMenuClick?: () => void;
+    /**
+     * Submenu panel items (shown in side panel)
+     */
+    submenuPanelItems?: ApplicationNavigationSubmenuItem[];
+    /**
+     * Submenu panel title
+     */
+    submenuPanelTitle?: string;
+    /**
+     * Submenu panel icon
+     */
+    submenuPanelIcon?: React$1.ReactNode;
+}
+/**
+ * ApplicationNavigationSidebar - Full sidebar layout component
+ */
+declare const ApplicationNavigationSidebar: React$1.FC<ApplicationNavigationSidebarProps>;
+
+interface ApplicationNavigationTopBarLink {
+    /**
+     * Link label
+     */
+    label: string;
+    /**
+     * Whether the link is active
+     */
+    active?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+interface ApplicationNavigationTopBarTab {
+    /**
+     * Tab label
+     */
+    label: string;
+    /**
+     * Whether the tab is active
+     */
+    active?: boolean;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+}
+interface ApplicationNavigationTopBarProps {
+    /**
+     * Logo icon element
+     */
+    logo?: React$1.ReactNode;
+    /**
+     * Logo text
+     */
+    logoText?: string;
+    /**
+     * Logo click handler
+     */
+    onLogoClick?: () => void;
+    /**
+     * Navigation links
+     */
+    links?: ApplicationNavigationTopBarLink[];
+    /**
+     * Show upgrade button
+     */
+    showUpgradeButton?: boolean;
+    /**
+     * Upgrade button text
+     */
+    upgradeButtonText?: string;
+    /**
+     * Upgrade button click handler
+     */
+    onUpgradeClick?: () => void;
+    /**
+     * Show search icon
+     */
+    showSearch?: boolean;
+    /**
+     * Search click handler
+     */
+    onSearchClick?: () => void;
+    /**
+     * Show settings icon
+     */
+    showSettings?: boolean;
+    /**
+     * Settings click handler
+     */
+    onSettingsClick?: () => void;
+    /**
+     * Show notifications icon
+     */
+    showNotifications?: boolean;
+    /**
+     * Notifications click handler
+     */
+    onNotificationsClick?: () => void;
+    /**
+     * User avatar source
+     */
+    userAvatarSrc?: string;
+    /**
+     * User avatar click handler
+     */
+    onUserAvatarClick?: () => void;
+    /**
+     * Secondary navigation tabs
+     */
+    tabs?: ApplicationNavigationTopBarTab[];
+    /**
+     * Show search input in tabs row
+     */
+    showTabsSearch?: boolean;
+    /**
+     * Tabs search placeholder
+     */
+    tabsSearchPlaceholder?: string;
+    /**
+     * Tabs search shortcut
+     */
+    tabsSearchShortcut?: string;
+    /**
+     * Tabs search change handler
+     */
+    onTabsSearchChange?: (value: string) => void;
+}
+/**
+ * ApplicationNavigationTopBar - Horizontal top navigation bar
+ */
+declare const ApplicationNavigationTopBar: React$1.FC<ApplicationNavigationTopBarProps>;
+
+interface FileUploadProps {
+    /**
+     * Callback when files are selected or dropped
+     */
+    onFilesSelected?: (files: FileList) => void;
+    /**
+     * Accepted file types
+     */
+    accept?: string;
+    /**
+     * Allow multiple file selection
+     */
+    multiple?: boolean;
+    /**
+     * Disabled state
+     */
+    disabled?: boolean;
+    /**
+     * Maximum file size in bytes
+     */
+    maxSize?: number;
+    /**
+     * Custom helper text
+     */
+    helperText?: string;
+    /**
+     * Custom className
+     */
+    className?: string;
+}
+declare const FileUpload: React$1.FC<FileUploadProps>;
+type FileUploadItemStatus = 'uploading' | 'complete' | 'error';
+type FileUploadItemVariant = 'progress-bar' | 'progress-fill';
+interface FileUploadItemProps {
+    /**
+     * File name
+     */
+    fileName: string;
+    /**
+     * File size in bytes
+     */
+    fileSize: number;
+    /**
+     * Upload progress (0-100)
+     */
+    progress?: number;
+    /**
+     * Upload status
+     */
+    status: FileUploadItemStatus;
+    /**
+     * Display variant
+     */
+    variant?: FileUploadItemVariant;
+    /**
+     * Show file type icon
+     */
+    showIcon?: boolean;
+    /**
+     * File type for icon display (e.g., 'PDF', 'JPG')
+     */
+    fileType?: string;
+    /**
+     * Callback when delete button is clicked
+     */
+    onDelete?: () => void;
+    /**
+     * Callback when try again button is clicked
+     */
+    onRetry?: () => void;
+}
+declare const FileUploadItem: React$1.FC<FileUploadItemProps>;
+
+interface SectionHeaderTab {
+    label: string;
+    value: string;
+    badge?: number;
+}
+type SectionHeaderType = 'Buttons' | 'Search' | 'Button group';
+interface SectionHeaderProps {
+    title?: string;
+    supportingText?: boolean;
+    type?: SectionHeaderType;
+    breakpoint?: 'Desktop' | 'Mobile';
+    actions?: boolean;
+    buttonGroupItems?: string[];
+    searchPlaceholder?: string;
+    searchShortcut?: string;
+    dropdownIcon?: boolean;
+    tabs?: boolean;
+    tabsConfig?: SectionHeaderTab[];
+    activeTab?: string;
+    onTabChange?: (value: string) => void;
+    divider?: boolean;
+    onSearchChange?: (value: string) => void;
+    onDropdownClick?: () => void;
+    onButtonGroupClick?: (index: number) => void;
+}
+declare const SectionHeader: React$1.FC<SectionHeaderProps>;
+
+type LoadingIndicatorSize = 'sm' | 'md' | 'lg' | 'xl';
+
+type LoadingIndicatorStyle = 'Line simple' | 'Line spinner' | 'Dot circle';
+interface LoadingIndicatorProps extends Omit<BoxProps$1, 'style'> {
+    /**
+     * Visual style of the loading indicator
+     */
+    style?: LoadingIndicatorStyle;
+    /**
+     * Size of the indicator
+     */
+    size?: LoadingIndicatorSize;
+    /**
+     * Text label displayed below the indicator
+     */
+    label?: string;
+    /**
+     * Whether to show supporting text below the indicator
+     */
+    supportingText?: boolean;
+}
+declare const LoadingIndicator: React$1.FC<LoadingIndicatorProps>;
+
+type PaginationType = 'Page default' | 'Page minimal center aligned' | 'Card default' | 'Card minimal right aligned' | 'Card minimal left aligned' | 'Card minimal center aligned' | 'Card button group right aligned' | 'Card button group left aligned' | 'Card button group center aligned';
+type PaginationShape = 'Square' | 'Circle';
+type PaginationBreakpoint = 'Desktop' | 'Mobile';
+interface PaginationProps {
+    /**
+     * Visual style of the pagination
+     */
+    type?: PaginationType;
+    /**
+     * Shape of page number buttons
+     */
+    shape?: PaginationShape;
+    /**
+     * Current page number (1-indexed)
+     */
+    page?: number;
+    /**
+     * Total number of pages
+     */
+    totalPages?: number;
+    /**
+     * Callback when page changes
+     */
+    onChange?: (page: number) => void;
+    /**
+     * Responsive breakpoint (manual override)
+     */
+    breakpoint?: PaginationBreakpoint;
+}
+declare const Pagination: React$1.FC<PaginationProps>;
+
+type PieChartHole = 'False' | '25%' | '50%' | '75%';
+interface PieChartDataItem {
+    value: number;
+    label?: string;
+    color?: string;
+}
+interface PieChartProps {
+    /**
+     * Data for the pie chart segments
+     */
+    data?: PieChartDataItem[];
+    /**
+     * Size of the center hole (False = solid pie chart)
+     */
+    hole?: PieChartHole;
+    /**
+     * Size of the chart in pixels
+     */
+    size?: number;
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * PieChart component for displaying data in a circular chart
+ *
+ * Features:
+ * - Solid pie chart or donut chart with configurable hole sizes
+ * - Customizable colors per segment
+ * - SVG-based rendering
+ * - Responsive sizing
+ * - Uses design system color tokens
+ */
+declare const PieChart: React$1.FC<PieChartProps>;
+
+type ActivityGaugeSize = 'xs' | 'sm' | 'md' | 'lg';
+interface ActivityGaugeRing {
+    /**
+     * Progress percentage (0-100)
+     */
+    progress: number;
+    /**
+     * Custom color for the ring
+     */
+    color?: string;
+}
+interface ActivityGaugeProps {
+    /**
+     * Size of the gauge
+     */
+    size?: ActivityGaugeSize;
+    /**
+     * Whether to show the label
+     */
+    label?: boolean;
+    /**
+     * Label text (e.g., "Active users")
+     */
+    labelText?: string;
+    /**
+     * Value to display in the center
+     */
+    value?: string | number;
+    /**
+     * Array of rings (outer to inner)
+     */
+    rings?: ActivityGaugeRing[];
+    /**
+     * Custom class name
+     */
+    className?: string;
+}
+/**
+ * ActivityGauge component for displaying circular progress with multiple rings
+ *
+ * Features:
+ * - Multiple concentric progress rings
+ * - Four sizes: xs, sm, md, lg
+ * - Center label and value display
+ * - Customizable ring colors
+ * - SVG-based rendering
+ * - Uses design system color tokens
+ */
+declare const ActivityGauge: React$1.FC<ActivityGaugeProps>;
+
+type MetricItemType = 'Simple' | 'Icon 01' | 'Icon 02' | 'Icon 03' | 'Icon 04' | 'Chart 01' | 'Chart 02' | 'Chart 03' | 'Chart 04';
+type MetricItemBreakpoint = 'Desktop' | 'Mobile';
+type ChangeTrend = 'Positive' | 'Negative';
+type ChangeType = '01' | '02' | '03';
+interface MetricItemProps {
+    label: string;
+    value: string | number;
+    type?: MetricItemType;
+    breakpoint?: MetricItemBreakpoint;
+    showActions?: boolean;
+    showDropdown?: boolean;
+    showFeaturedIcon?: boolean;
+    showSettingsIcon?: boolean;
+    changeValue?: string;
+    changeTrend?: ChangeTrend;
+    changeType?: ChangeType;
+    changeText?: string;
+    actionText?: string;
+    onActionClick?: () => void;
+    onDropdownClick?: () => void;
+    onSettingsClick?: () => void;
+    chartComponent?: React$1.ReactNode;
+}
+declare const MetricItem: React$1.FC<MetricItemProps>;
+
+interface MessageReaction {
+    emoji: string;
+    count?: number;
+}
+interface MessageReply {
+    userName: string;
+    content: string;
+}
+interface MessageFile {
+    name: string;
+    size: string;
+    type: string;
+    color?: string;
+}
+interface MessageAudio {
+    duration: string;
+    waveformColor?: string;
+}
+interface MessageImage {
+    url: string;
+    name: string;
+    size: string;
+    aspectRatio?: string;
+}
+interface MessageVideo {
+    url: string;
+    thumbnail?: string;
+    duration?: string;
+}
+interface MessageLinkPreview {
+    url: string;
+    imageUrl: string;
+}
+interface MessageProps {
+    /** Whether message is from current user (true) or other user (false) */
+    sent: boolean;
+    /** Sender name */
+    userName: string;
+    /** Time display */
+    timestamp: string;
+    /** Message text */
+    content: string;
+    /** Avatar URL (only when sent=false) */
+    avatar?: string;
+    /** Online status indicator */
+    online?: boolean;
+    /** Emoji reactions */
+    reactions?: MessageReaction[];
+    /** Show read checkmark (only when sent=true) */
+    statusIcon?: boolean;
+    /** Replied message */
+    replyTo?: MessageReply;
+    /** File attachment */
+    file?: MessageFile;
+    /** Audio message */
+    audio?: MessageAudio;
+    /** Image attachment */
+    image?: MessageImage;
+    /** Video message */
+    video?: MessageVideo;
+    /** Link preview */
+    linkPreview?: MessageLinkPreview;
+    /** Show action buttons on hover */
+    showActions?: boolean;
+    /** Download click handler (for file/audio/image) */
+    onDownload?: () => void;
+    /** Reaction click handler */
+    onReaction?: (emoji: string) => void;
+    /** Edit click handler */
+    onEdit?: () => void;
+    /** Copy click handler */
+    onCopy?: () => void;
+    /** Regenerate click handler */
+    onRegenerate?: () => void;
+    /** Star click handler */
+    onStar?: () => void;
+}
+/**
+ * Message component - Chat message with avatar, reactions, and actions
+ *
+ * Features:
+ * - Different styles for sent/received messages
+ * - Avatar with online indicator for received messages
+ * - Reply message preview with green border
+ * - File attachments with colored icons
+ * - Audio messages with waveform visualization
+ * - Image attachments with file info
+ * - Video messages with play overlay and action bar
+ * - Link preview messages with open graph image
+ * - Emoji reactions
+ * - Action panel on hover (edit, copy, regenerate, star, download)
+ * - Read status icon for sent messages
+ */
+declare const Message: React$1.FC<MessageProps>;
+
+export { Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, ActivityGauge, type ActivityGaugeProps, type ActivityGaugeRing, type ActivityGaugeSize, Alert, type AlertAction, type AlertProps, type AlertSeverity, AlertTitle, type AlertTitleProps, type AlertVariant, AppBar, type AppBarProps, ApplicationNavigation, type ApplicationNavigationAccountMenuProps, type ApplicationNavigationBannerListItem, type ApplicationNavigationBannerProps, type ApplicationNavigationIconButtonProps, type ApplicationNavigationItemProps, type ApplicationNavigationMenuItemProps, type ApplicationNavigationProps, type ApplicationNavigationSearchProps, ApplicationNavigationSidebar, type ApplicationNavigationSidebarLogo, type ApplicationNavigationSidebarProps, type ApplicationNavigationSidebarSection, type ApplicationNavigationSubmenuItem, ApplicationNavigationTopBar, type ApplicationNavigationTopBarLink, type ApplicationNavigationTopBarProps, type ApplicationNavigationTopBarTab, type ApplicationNavigationUserProfileProps, Autocomplete, type AutocompleteProps, type AutocompleteSize, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, Box, type BoxProps, type BreadcrumbBreakpoint, type BreadcrumbDivider, type BreadcrumbItem, type BreadcrumbType, Breadcrumbs, type BreadcrumbsProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, CardActions, type CardActionsProps, CardContent, type CardContentProps, CardHeader, type CardHeaderActionButton, type CardHeaderBadgeProps, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, type ChangeTrend, type ChangeType, Checkbox, type CheckboxProps, CircularProgress, type CircularProgressProps, CommandEmpty, type CommandEmptyProps, CommandFooter, CommandGroup, CommandIntegrationDetail, type CommandIntegrationDetailProps, CommandItem, type CommandItemProps, CommandMenu, type CommandMenuProps, CommandProfile, CommandProfileEnhanced, type CommandProfileEnhancedProps, type CommandProfileProps, CommandSplitView, type CommandSplitViewProps, Container, type ContainerProps, DataGrid, type DataGridProps, DateCalendarComponent, type DateCalendarComponentProps, DatePicker, type DatePickerProps, Dialog, DialogActions, type DialogActionsProps, DialogContent, type DialogContentProps, DialogContentText, type DialogContentTextProps, type DialogProps, DialogTitle, type DialogTitleProps, Divider, type DividerProps, Drawer, type DrawerProps, EmptyState, type EmptyStateAction, type EmptyStateIconType, type EmptyStateProps, type EmptyStateSize, Fab, type FabProps, FileUpload, FileUploadItem, type FileUploadItemProps, type FileUploadItemStatus, type FileUploadItemVariant, type FileUploadProps, FormControl, FormControlLabel, type FormControlLabelProps, type FormControlProps, FormHelperText, type FormHelperTextProps, FormLabel, type FormLabelProps, Grid, type GridProps, type HorizontalTab, HorizontalTabs, type HorizontalTabsBreakpoint, type HorizontalTabsProps, type HorizontalTabsSize, type HorizontalTabsType, IconButton, type IconButtonProps, type IconVariant, Input, InputLabel, type InputLabelProps, type InputProps, LinearProgress, type LinearProgressProps, Link, type LinkProps, List, ListItem, ListItemAvatar, type ListItemAvatarProps, ListItemButton, type ListItemButtonProps, ListItemIcon, type ListItemIconProps, type ListItemProps, ListItemSecondaryAction, type ListItemSecondaryActionProps, ListItemText, type ListItemTextProps, type ListProps, LoadingIndicator, type LoadingIndicatorProps, type LoadingIndicatorStyle, LocalizationProvider, type LocalizationProviderProps, Menu, MenuItem, type MenuItemProps, type MenuProps, Message, type MessageAudio, type MessageFile, type MessageImage, type MessageLinkPreview, type MessageProps, type MessageReaction, type MessageReply, type MessageVideo, MetricItem, type MetricItemBreakpoint, type MetricItemProps, type MetricItemType, Modal, ModalActions, type ModalActionsBreakpoint, type ModalActionsLayoutType, type ModalActionsProps, ModalHeader, type ModalHeaderBreakpoint, type ModalHeaderProps, type ModalHeaderType, type ModalProps, Pagination, type PaginationBreakpoint, type PaginationProps, type PaginationShape, type PaginationType, Paper, type PaperProps, PieChart, type PieChartDataItem, type PieChartHole, type PieChartProps, Popover, type PopoverProps, ProgressCircle, type ProgressCircleProps, type ProgressCircleShape, type ProgressCircleSize, Radio, RadioGroup, type RadioGroupProps, type RadioOption, type RadioProps, SectionFooter, type SectionFooterAction, type SectionFooterPeriod, type SectionFooterProps, SectionHeader, type SectionHeaderProps, type SectionHeaderTab, type SectionHeaderType, Select, type SelectOption, type SelectProps, SlideMenu, type SlideMenuFooterProps, type SlideMenuHeaderProps, type SlideMenuProps, Stack, type StackProps, Step, StepButton, type StepButtonProps, StepContent, type StepContentProps, StepLabel, type StepLabelProps, type StepProps, Stepper, type StepperProps, Tab, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableContainer, type TableContainerProps, TableHead, type TableHeadProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Tag, type TagColor, type TagProps, type TagSize, type TagVariant, TextArea, type TextAreaProps, TimePicker, type TimePickerProps, Toggle, ToggleButton, ToggleButtonGroup, type ToggleButtonGroupProps, type ToggleButtonProps, type ToggleProps, Toolbar, type ToolbarProps, Tooltip, type TooltipProps, Typography, type TypographyProps, type VerticalTab, VerticalTabs, type VerticalTabsBreakpoint, type VerticalTabsProps, type VerticalTabsSize, type VerticalTabsType, createDefaultColumns, createFileColumns };