import { AccordionProps, AccordionActionsProps, AccordionDetailsProps, AccordionSummaryProps, AppBarProps, AvatarProps, AvatarGroupProps, BadgeProps, BackdropProps, BoxProps, ButtonProps as ButtonProps$1, ButtonGroupProps, CardProps, CardActionsProps, CardContentProps, CardHeaderProps, CardMediaProps, CheckboxProps, ChipProps, ClickAwayListenerProps, ContainerProps, DialogProps, DialogActionsProps, DialogContentProps, DialogContentTextProps, DialogTitleProps, DividerProps, DrawerProps, FormControlProps, FormControlLabelProps, FormGroupProps, GridProps, IconButtonProps, InputProps, InputAdornmentProps, InputLabelProps, ListProps, ListItemProps, ListItemAvatarProps, ListItemButtonProps, ListItemIconProps, ListItemSecondaryActionProps, ListSubheaderProps, MenuProps, MenuItemProps, MenuListProps, PaperProps, RadioGroupProps, SelectProps, SlideProps, StackProps, SwitchProps, TableProps, TabProps, TabsProps, TextFieldProps, ToggleButtonProps, ToggleButtonGroupProps, ToolbarProps, TooltipProps, TypographyProps, PaletteMode } from '@mui/material';
import { OptionsObject } from 'notistack';
import React$1 from 'react';
import { PopperProps, PopperPlacementType } from '@mui/material/Popper';
import { EmotionCache } from '@emotion/react';

declare function Accordion(props: AccordionProps): JSX.Element;

declare function AccordionActions(props: AccordionActionsProps): JSX.Element;

declare function AccordionDetails(props: AccordionDetailsProps): JSX.Element;

declare function AccordionSummary(props: AccordionSummaryProps): JSX.Element;

declare function AppBar(props: AppBarProps): JSX.Element;

declare function Avatar(props: AvatarProps): JSX.Element;

declare function AvatarGroup(props: AvatarGroupProps): JSX.Element;

declare function Badge(props: BadgeProps): JSX.Element;

declare function Backdrop(props: BackdropProps): JSX.Element;

declare function Box(props: BoxProps): JSX.Element;

interface ButtonProps extends ButtonProps$1 {
    label?: string;
    children?: React.ReactNode;
}
declare function Button({ label, children, ...props }: ButtonProps): JSX.Element;

declare function ButtonGroup(props: ButtonGroupProps): JSX.Element;

declare function Card(props: CardProps): JSX.Element;

declare function CardActions(props: CardActionsProps): JSX.Element;

declare function CardContent(props: CardContentProps): JSX.Element;

declare function CardHeader(props: CardHeaderProps): JSX.Element;

declare function CardMedia(props: CardMediaProps): JSX.Element;

declare function Checkbox(props: CheckboxProps): JSX.Element;

declare function Chip(props: ChipProps): JSX.Element;

declare function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element;

declare function Container(props: ContainerProps): JSX.Element;

declare function Dialog(props: DialogProps): JSX.Element;

declare function DialogActions(props: DialogActionsProps): JSX.Element;

declare function DialogContent(props: DialogContentProps): JSX.Element;

declare function DialogContentText(props: DialogContentTextProps): JSX.Element;

declare function DialogTitle(props: DialogTitleProps): JSX.Element;

declare function Divider(props: DividerProps): JSX.Element;

declare function Drawer(props: DrawerProps): JSX.Element;

declare function FormControl(props: FormControlProps): JSX.Element;

declare function FormControlLabel(props: FormControlLabelProps): JSX.Element;

declare function FormGroup(props: FormGroupProps): JSX.Element;

declare function Grid(props: GridProps): JSX.Element;

declare function IconButton(props: IconButtonProps): JSX.Element;

declare function Input(props: InputProps): JSX.Element;

declare function InputAdornment(props: InputAdornmentProps): JSX.Element;

declare function InputLabel(props: InputLabelProps): JSX.Element;

declare function List(props: ListProps): JSX.Element;

declare function ListItem(props: ListItemProps): JSX.Element;

declare function ListItemAvatar(props: ListItemAvatarProps): JSX.Element;

declare function ListItemButton(props: ListItemButtonProps): JSX.Element;

declare function ListItemIcon(props: ListItemIconProps): JSX.Element;

declare function ListItemSecondaryAction(props: ListItemSecondaryActionProps): JSX.Element;

declare function ListSubheader(props: ListSubheaderProps): JSX.Element;

declare function Menu(props: MenuProps): JSX.Element;

declare function MenuItem(props: MenuItemProps): JSX.Element;

declare function MenuList(props: MenuListProps): JSX.Element;

declare function Paper(props: PaperProps): JSX.Element;

declare function RadioGroup(props: RadioGroupProps): JSX.Element;

declare function Select(props: SelectProps): JSX.Element;

declare function Slide(props: SlideProps): JSX.Element;

declare function Stack(props: StackProps): JSX.Element;

declare function Switch(props: SwitchProps): JSX.Element;

declare function Table(props: TableProps): JSX.Element;

declare function Tab(props: TabProps): JSX.Element;

declare function Tabs(props: TabsProps): JSX.Element;

declare function TextField(props: TextFieldProps): JSX.Element;

declare function ToggleButton(props: ToggleButtonProps): JSX.Element;

declare function ToggleButtonGroup(props: ToggleButtonGroupProps): JSX.Element;

declare function Toolbar(props: ToolbarProps): JSX.Element;

declare function Tooltip(props: TooltipProps): JSX.Element;

declare function Typography(props: TypographyProps): JSX.Element;

/**
 * @file colors.ts
 * @description This file defines the color palette for the design system.
 * It provides a dictionary of commonly used colors for consistency across components.
 * @remarks These colors can be imported and used in various components.
 */
/**
 * Dictionary of commonly used colors.
 */
type ColorDictionary = Record<string, string>;
declare const colors: ColorDictionary;

/**
 * Custom hook for getting window dimensions.
 *
 * @returns {WindowDimensions} { width, height }
 */
declare function useWindowDimensions(): WindowDimensions;
/**
 * Represents the width and height of the window.
 */
interface WindowDimensions {
    width: number;
    height: number;
}

type NotificationHandler = (message: string, options?: OptionsObject) => void;
declare const useNotificationHandler: () => NotificationHandler;

type StyledTooltipProps = {
    title: string;
    onClick?: (event: React$1.MouseEvent<HTMLElement>) => void;
    children: React$1.ReactNode;
} & Omit<TooltipProps, 'title' | 'onClick'>;
declare function StyledTooltip({ title, onClick, placement, children, ...props }: StyledTooltipProps): JSX.Element;

interface ChartDialogProps {
    open: boolean;
    content: React$1.ReactNode;
    title: string;
    actions?: React$1.ReactNode;
}
declare function StyledChartDialog({ open, content, title, actions }: ChartDialogProps): JSX.Element;

interface SearchBarProps$1 {
    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
    value?: string;
    width?: string;
    label: string;
    endAdornment?: React$1.ReactNode;
}
declare function StyledSearchBar({ onChange, value, width, label, endAdornment, ...props }: SearchBarProps$1): JSX.Element;

interface CustomColumnVisibilityControlProps {
    columns: CustomColumn[];
    customToolsProps: {
        columnVisibility: Record<string, boolean>;
        setColumnVisibility: React$1.Dispatch<React$1.SetStateAction<Record<string, boolean>>>;
    };
    style?: React$1.CSSProperties;
    id: string;
}
interface CustomColumn {
    name: string;
    label: string;
}
declare function CustomColumnVisibilityControl({ columns, id, customToolsProps }: CustomColumnVisibilityControlProps): JSX.Element;

type StyledDialogProps = {
    open: boolean;
    fullScreen?: boolean;
    title?: string;
} & Omit<DialogProps, 'fullScreen'>;
declare function StyledDialog({ open, onClose, children, title, ...props }: StyledDialogProps): JSX.Element;

interface StyledDialogActionsProps {
    children: React$1.ReactNode;
}
declare function StyledDialogActions({ children, ...props }: StyledDialogActionsProps): JSX.Element;

interface StyledDialogContentProps {
    children: React$1.ReactNode;
}
declare function StyledDialogContent({ children, ...props }: StyledDialogContentProps): JSX.Element;

interface StyledDialogTitleProps {
    children: React$1.ReactNode;
}
declare function StyledDialogTitle({ children, ...props }: StyledDialogTitleProps): JSX.Element;

interface IPopperListener extends PopperProps {
    open: boolean;
    anchorEl: HTMLElement | null | undefined;
    children: React.ReactNode;
    placement?: PopperPlacementType;
}
declare function PopperListener({ children, open, anchorEl, placement, ...props }: IPopperListener): JSX.Element;

interface Column {
    name: string;
    label: string;
    options?: {
        filter?: boolean;
        sort?: boolean;
        searchable?: boolean;
        display?: boolean;
        sortDescFirst?: boolean;
        customBodyRender?: (value: string | number | boolean | object) => JSX.Element;
    };
}
interface ResponsiveDataTableProps {
    data: string[][];
    columns: Column[];
    options?: object;
    tableCols?: Column[];
    updateCols?: ((columns: Column[]) => void) | undefined;
    columnVisibility: Record<string, boolean> | undefined;
    theme?: object;
    colViews?: Record<string, boolean> | undefined;
}
declare const ResponsiveDataTable: ({ data, columns, options, tableCols, updateCols, columnVisibility, ...props }: ResponsiveDataTableProps) => JSX.Element;

interface SearchBarProps {
    onSearch: (searchText: string) => void;
    style?: React$1.CSSProperties;
    placeholder?: string;
    onClear?: () => void;
    expanded: boolean;
    setExpanded: (expanded: boolean) => void;
    iconFill?: string;
}
declare function SearchBar({ onSearch, placeholder, onClear, expanded, setExpanded, iconFill }: SearchBarProps): JSX.Element;

interface TooltipIconProps {
    title: string;
    onClick: (event: React$1.MouseEvent<HTMLElement>) => void;
    icon: React$1.ReactNode;
    arrow?: boolean;
    style?: React$1.CSSProperties;
}
declare function TooltipIcon({ title, onClick, icon, style, arrow }: TooltipIconProps): JSX.Element;

interface FilterColumn {
    name: string;
    options: {
        label: string;
        value: string;
    }[];
}
interface UniversalFilterProps {
    filters: Record<string, FilterColumn>;
    selectedFilters: Record<string, string>;
    setSelectedFilters: React$1.Dispatch<React$1.SetStateAction<Record<string, string>>>;
    handleApplyFilter: () => void;
    showAllOption?: boolean;
    id: string;
}
declare function UniversalFilter({ filters, selectedFilters, setSelectedFilters, handleApplyFilter, showAllOption, id }: UniversalFilterProps): JSX.Element;

interface SistentThemeProviderProps {
    children: React$1.ReactNode;
    emotionCache?: EmotionCache;
    initialMode?: PaletteMode;
}
declare function SistentThemeProvider({ children, emotionCache, initialMode }: SistentThemeProviderProps): JSX.Element;

/**
 * Define the base common colors to derive from
 */
declare const KEPPEL = "#00B39F";
declare const CARIBBEAN_GREEN = "#00D3A9";
declare const TEAL_BLUE = "#477E96";
declare const CHARCOAL = "#3C494F";
declare const BLACK = "#000000";
declare const WHITE = "#FFFFFF";
declare const DARK_SHADE_GRAY = "#222222";
declare const CHINESE_SILVER = "#CCCCCC";
declare const SAFFRON = "#EBC017";
declare const GRAY = "#696969";
declare const GRAY97 = "#f7f7f7";
declare const DARK_SLATE_GRAY = "#294957";
declare const LIGHT_GRAY = "#d3d3d3";
declare const ALICE_BLUE = "#EBEFF1";
declare const LIMED_SPRUCE = "#3C494F";
declare const WHITESMOKE = "#F5F5F5";
declare const PRIMARY_COLOR = "#647881";
declare const DARK_PRIMARY_COLOR = "#51636B";
declare const SLATE_GRAY = "#7a848e";
declare const DARK_JUNGLE_GREEN = "#1E2117";
declare const CASPER = "#b1b6b8";
declare const EERIE_BLACK = "#b1b6b8";
declare const PATTERNS_BLUE = "#D9E0E2";
declare const GREEN = "green";
declare const DARK_TEAL = "#455a64";
declare const LIGHT_TEAL = "#607d8b";
declare const CULTURED = "#F6F8F8";
declare const ANAKIWA = "#9EFFEC";
declare const NOT_FOUND = "#666666";
declare const YELLOW_SEA = "#F0A303";
declare const PINE_GREEN = "#008071";
declare const DARK_BLUE_GRAY = "#263238";
declare const common: {
    black: string;
    white: string;
};
declare const keppel: {};
declare const carribean: {};
declare const saffron: {};
/**
 * Grayscale Colors
 */
declare const charcoal: {
    100: string;
    90: string;
    80: string;
    70: string;
    60: string;
    50: string;
    40: string;
    30: string;
    20: string;
    10: string;
};
declare const accentGrey: {
    90: string;
    80: string;
    70: string;
    60: string;
    50: string;
    40: string;
    30: string;
    20: string;
    10: string;
};
/**
 * Function Colors
 */
declare const blue: {
    70: string;
    60: string;
    50: string;
    40: string;
    30: string;
    20: string;
    10: string;
};
declare const green: {
    70: string;
    60: string;
    50: string;
    40: string;
    30: string;
    20: string;
    10: string;
};
declare const yellow: {
    70: string;
    60: string;
    50: string;
    40: string;
    30: string;
    20: string;
    10: string;
};
declare const red: {
    70: string;
    60: string;
    50: string;
    40: string;
    30: string;
    20: string;
    10: string;
};
declare const defaultPalette: {
    keppel: string[];
};
type BackgroundColor = {
    [key in 'default' | 'secondary' | 'tertiary' | 'hover' | 'brand-default' | 'info-default' | 'success-default' | 'warning-default' | 'error-default']: string;
};
declare const background: BackgroundColor;
interface TextColor {
    default: string;
    secondary: string;
    tertiary: string;
    inverse: string;
    brand: string;
    info: string;
    success: string;
    warning: string;
    error: string;
}
declare const text: TextColor;
interface BorderColor {
    default: string;
    strong: string;
    brand: string;
}
declare const border: BorderColor;
/**
 * Use the colors below that provides the action that you want to use
 */
declare const primaryColor: {
    main: string;
    dark: string;
};
declare const patternsBlue: {
    main: string;
};
declare const cultured: {
    main: string;
};
declare const darkTeal: {
    main: string;
    dark: string;
};
declare const actionIcon: {
    main: string;
    hover: string;
};
declare const tabeMenu: {
    main: string;
    hover: string;
};
declare const darkSlateGray: {
    main: string;
    dark: string;
};
declare const eerieBlack: {
    main: string;
    light: string;
    lighter: string;
};
declare const casper: {
    main: string;
    light: string;
    lighter: string;
};
declare const slateGray: {
    main: string;
    light: string;
};
declare const white: {
    main: string;
    light: string;
    lighter: string;
};
declare const black: {
    main: string;
    light: string;
    lighter: string;
    dark: string;
};
declare const jungleGreen: {
    main: string;
    light: string;
    lighter: string;
};
declare const buttonDisabled: {
    main: string;
};
declare const tableBackgroundHover: {
    main: string;
};
declare const DELETE = "#8F1F00";
declare const HOVER_DELETE = "#b32700";
declare const redDelete: {
    main: string;
    light: string;
};
declare const buttonDelete: {
    main: string;
    hover: string;
};
/**
 * Notification Colors
 */
declare const notificationColors: {
    info: {
        main: string;
    };
    error: {
        main: string;
        dark: string;
    };
    warning: {
        main: string;
        light: string;
    };
    success: {
        main: string;
    };
};
declare const CONNECTED = "#00B39F";
declare const REGISTERED = "#477E96";
declare const DISCOVERED: string;
declare const IGNORED: string;
declare const DELETED: string;
declare const MAINTAINENCE: string;
declare const DISCONNECTED: string;
declare const connected: {
    main: string;
};
declare const anakiwa: {
    main: string;
};
/**
 * Social media or equivalent icons colors
 */
declare const socialIcons: {
    slack: string;
    twitter: string;
    github: string;
    youtube: string;
    docker: string;
};

export { ALICE_BLUE, ANAKIWA, Accordion, AccordionActions, AccordionDetails, AccordionSummary, AppBar, Avatar, AvatarGroup, BLACK, Backdrop, Badge, Box, Button, ButtonGroup, CARIBBEAN_GREEN, CASPER, CHARCOAL, CHINESE_SILVER, CONNECTED, CULTURED, Card, CardActions, CardContent, CardHeader, CardMedia, Checkbox, Chip, ClickAwayListener, Column, Container, CustomColumn, CustomColumnVisibilityControl, CustomColumnVisibilityControlProps, DARK_BLUE_GRAY, DARK_JUNGLE_GREEN, DARK_PRIMARY_COLOR, DARK_SHADE_GRAY, DARK_SLATE_GRAY, DARK_TEAL, DELETE, DELETED, DISCONNECTED, DISCOVERED, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Drawer, EERIE_BLACK, FilterColumn, FormControl, FormControlLabel, FormGroup, GRAY, GRAY97, GREEN, Grid, HOVER_DELETE, IGNORED, IconButton, Input, InputAdornment, InputLabel, KEPPEL, LIGHT_GRAY, LIGHT_TEAL, LIMED_SPRUCE, List, ListItem, ListItemAvatar, ListItemButton, ListItemIcon, ListItemSecondaryAction, ListSubheader, MAINTAINENCE, Menu, MenuItem, MenuList, NOT_FOUND, PATTERNS_BLUE, PINE_GREEN, PRIMARY_COLOR, Paper, PopperListener, REGISTERED, RadioGroup, ResponsiveDataTable, ResponsiveDataTableProps, SAFFRON, SLATE_GRAY, SearchBar, SearchBarProps, Select, SistentThemeProvider, Slide, Stack, StyledChartDialog, StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle, StyledSearchBar, StyledTooltip, Switch, TEAL_BLUE, Tab, Table, Tabs, TextField, ToggleButton, ToggleButtonGroup, Toolbar, Tooltip, TooltipIcon, Typography, UniversalFilter, UniversalFilterProps, WHITE, WHITESMOKE, YELLOW_SEA, accentGrey, actionIcon, anakiwa, background, black, blue, border, buttonDelete, buttonDisabled, carribean, casper, charcoal, colors, common, connected, cultured, darkSlateGray, darkTeal, defaultPalette, eerieBlack, green, jungleGreen, keppel, notificationColors, patternsBlue, primaryColor, red, redDelete, saffron, slateGray, socialIcons, tabeMenu, tableBackgroundHover, text, useNotificationHandler, useWindowDimensions, white, yellow };
