/// <reference types="react" />
import React$1 from 'react';
import { IconDefinition } from '@fortawesome/free-solid-svg-icons';

type GSizeEnum = 'large' | 'medium' | 'small';

type ButtonTypesEnum = 'button' | 'submit' | 'reset';
type ButtonThemesEnum = 'primary' | 'secondary' | 'tertiary' | 'destructivePrimary' | 'destructiveSecondary' | 'successPrimary' | 'successSecondary' | 'contrastPrimary' | 'contrastSecondary';
type ButtonAdditionalClassesPropTypes = {
    button: string[];
};
type ButtonComponentPropTypes = {
    children: React$1.ReactNode;
    type: ButtonTypesEnum;
    size: GSizeEnum;
    theme: ButtonThemesEnum;
    handleClick: React$1.MouseEventHandler<HTMLButtonElement>;
    additionalClasses?: ButtonAdditionalClassesPropTypes;
    disabled?: boolean;
    name?: string;
    value?: string;
};

/**
 * Button component
 *
 * @param {ButtonComponentPropTypes} props
 * @property {ReactNode} props.children
 * @property {ButtonTypesEnum} props.type - Defines the button type
 * @property {GSizeEnum} props.size - Defines padding and font-size
 * @property {ButtonThemesEnum} props.theme - Defines background color, border and text color
 * @property {React.MouseEventHandler<HTMLButtonElement>} props.handleClick - Function triggered by Mouse Evenet
 * @property {boolean} [props.disabled] - Blocks Mouse Event and change background-color
 * @property {boolean} [props.name]
 * @property {boolean} [props.value]
 * @property {ButtonAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
 * @property {string[]} [additionalClasses.button] - CSS classes for button div HTML tag
 * @example
 * <Button
 *  type='button'
 *  size='medium'
 *  theme='primary'
 *  handleClick={() => window.alert('Awesome GCL button was clicked')}
 *  disabled={false}
 *  name='buttonIdentifier'
 *  value='clicked'
 *  additionalClasses={{
 *    button: ['button-custom-border']
 *  }}
 * >
 *  Click me!
 * </Button>
 *
 * @returns {JSX.Element} Button
 */
declare const Button: ({ children, type, size, theme, handleClick, disabled, name, value, additionalClasses }: Readonly<ButtonComponentPropTypes>) => React$1.JSX.Element;

type IconButtonTypesEnum = 'button' | 'submit' | 'reset';
type IconButtonThemesEnum = 'primary' | 'secondary' | 'tertiary' | 'destructivePrimary' | 'destructiveSecondary' | 'successPrimary' | 'successSecondary' | 'contrastPrimary' | 'contrastSecondary';
type IconButtonAdditionalClassesPropTypes = {
    button: string[];
};
type IconButtonComponentPropTypes = {
    children: any;
    type: IconButtonTypesEnum;
    size: GSizeEnum;
    theme: IconButtonThemesEnum;
    handleClick: React$1.MouseEventHandler<HTMLButtonElement>;
    additionalClasses?: IconButtonAdditionalClassesPropTypes;
    disabled?: boolean;
    name?: string;
    value?: string;
};

/**
 * Icon Button component
 *
 * @param {IconButtonComponentPropTypes} props
 * @property {*} props.children
 * @property {IconButtonTypesEnum} props.type - Defines the button type
 * @property {GSizeEnum} props.size - Defines padding and font-size
 * @property {IconButtonThemesEnum} props.theme - Defines background color, border and text color
 * @property {React.MouseEventHandler<HTMLButtonElement>} props.handleClick - Function triggered by Mouse Evenet
 * @property {boolean} [props.disabled] - Blocks Mouse Event and change background-color
 * @property {boolean} [props.name]
 * @property {boolean} [props.value]
 * @property {IconButtonAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
 * @property {string[]} [additionalClasses.button] - CSS classes for button div HTML tag
 * @example
 * <IconButton
 *  type='button'
 *  size='medium'
 *  theme='primary'
 *  handleClick={() => window.alert('Awesome GCL button was clicked')}
 *  disabled={false}
 *  name='buttonIdentifier'
 *  value='clicked'
 *  additionalClasses={{
 *    button: ['button-custom-border']
 *  }}
 * >
 *  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none">
 *    <path fillRule="evenodd" clipRule="evenodd" d="M5.91006 10.4959L3.7071 8.29291C3.31658 7.90239 2.68342 7.90239 2.29289 8.29291C1.90237 8.68343 1.90237 9.3166 2.29289 9.70712L5.29288 12.7071C5.7168 13.131 6.4159 13.0892 6.7863 12.6178L13.7863 4.61786C14.1275 4.18359 14.0521 3.55494 13.6178 3.21372C13.1835 2.87251 12.5549 2.94795 12.2136 3.38222L5.91006 10.4959Z" fill="white"/>
 *  </svg>
 * </IconButton>
 *
 * @returns {JSX.Element} Icon Button
 */
declare const IconButton: ({ children, type, size, theme, name, value, handleClick, disabled, additionalClasses }: Readonly<IconButtonComponentPropTypes>) => React$1.JSX.Element;

type TextButtonTypeEnum = 'button' | 'submit' | 'reset';
type TextButtonThemeEnum = 'primary' | 'secondary' | 'destructive' | 'success' | 'contrast';
type TextButtonAdditionalClassesPropTypes = {
    button: string[];
};
type TextButtonComponentPropTypes = {
    children: React$1.ReactNode;
    type: TextButtonTypeEnum;
    size: GSizeEnum;
    theme: TextButtonThemeEnum;
    handleClick: React$1.MouseEventHandler<HTMLButtonElement>;
    additionalClasses?: TextButtonAdditionalClassesPropTypes;
    disabled?: boolean;
    name?: string;
    value?: string;
};

/**
 * Text Button component
 *
 * @param {TextButtonComponentPropTypes} props
 * @property {ReactNode} props.children
 * @property {TextButtonTypesEnum} props.type - Defines the button type
 * @property {GSizeEnum} props.size - Defines padding and font-size
 * @property {TextButtonThemesEnum} props.theme - Defines background color, border and text color
 * @property {React.MouseEventHandler<HTMLButtonElement>} props.handleClick - Function triggered by Mouse Evenet
 * @property {boolean} [props.disabled] - Blocks Mouse Event and change background-color
 * @property {boolean} [props.name]
 * @property {boolean} [props.value]
 * @property {TextButtonAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
 * @property {string[]} [additionalClasses.button] - CSS classes for button div HTML tag
 * @example
 * <TextButton
 *  type='button'
 *  size='medium'
 *  theme='primary'
 *  handleClick={() => window.alert('Awesome GCL button was clicked')}
 *  disabled={false}
 *  name='buttonIdentifier'
 *  value='clicked'
 *  additionalClasses={{
 *    button: ['button-custom-border']
 *  }}
 * >
 *  Click me!
 * </TextButton>
 *
 * @returns {JSX.Element} Text Button
 */
declare const TextButton: ({ children, type, size, theme, handleClick, disabled, name, value, additionalClasses }: Readonly<TextButtonComponentPropTypes>) => React$1.JSX.Element;

type CheckboxAdditionalClassesPropTypes = {
    wrapper?: string[];
    label?: string[];
    input?: string[];
    icon?: string[];
};
type CheckboxPropTypes = {
    checked: boolean;
    size: GSizeEnum;
    handleClick?: React.MouseEventHandler<HTMLDivElement>;
    disabled?: boolean;
    label?: string;
    additionalClasses?: CheckboxAdditionalClassesPropTypes;
};

/**
 * Checkbox component
 *
 * @param {CheckboxPropTypes} props
 * @property {boolean} props.checked - Determines whether the component should render the mark icon
 * @property {GSizeEnum} props.size - Defines input and icon sizes and label font size
 * @property {React.MouseEventHandler<HTMLDivElement>} [props.handleClick] - Wrapper onClick function
 * @property {boolean} [props.disabled = false] - Defines the checkbox background-color and disable function
 * @property {string} [props.label] - Determines the value of label and if it should be rendered
 * @property {CheckboxAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
 * @property {string[]} [additionalClasses.wrapper] - CSS classes for checkbox-wrapper div HTML tag
 * @property {string[]} [additionalClasses.input] - CSS classes for checkbox-input input HTML tag
 * @property {string[]} [additionalClasses.label] - CSS classes for checkbox-label label HTML tag
 * @property {string[]} [additionalClasses.icon] - CSS classes for checkbox-mark svg HTML tag
 * @example
 * <Checkbox
 *  checked={isChecked}
 *  size='medium'
 *  handleClick={() => setIsChecked(!isChecked)}
 *  disabled={false}
 *  additionalClasses = {{
 *    wrapper: ['custom-background-color'],
 *    input: ['custom-input-border'],
 *    label: ['large-font-size'],
 *    icon: ['custom-background-constrast'],
 *   }}
 * />
 *
 * @returns {JSX.Element} Checkbox
 */
declare const Checkbox: ({ checked, size, handleClick, disabled, label, additionalClasses }: CheckboxPropTypes) => React$1.JSX.Element;

type FigureAdditionalClassesPropTypes = {
    figure?: string[];
    image?: string[];
    caption?: string[];
};
type FigurePropTypes = {
    src: string;
    alt: string;
    caption?: string;
    additionalClasses?: FigureAdditionalClassesPropTypes;
};

/**
 * Figure component
 *
 * @param {FigurePropTypes} props
 * @property {string} props.src - Img HTML tag src value
 * @property {string} props.alt - Img HTML tag alt value
 * @property {string} [props.caption] - Determines the value of figcaption and if it should be rendered
 * @property {FigureAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tah
 * @property {string[]} [additionalClasses.figure] - CSS classes for figure-wrapper figure HTML tag
 * @property {string[]} [additionalClasses.image] - CSS classes for figure-image img HTML tag
 * @property {string[]} [additionalClasses.caption] - CSS classes for figure-figcaption HTML tag
 * @example
 * <Figure
 *  src='https://cctech.io/images/cctech-logo-black.webp'
 *  alt='Convergence Concepts Logo'
 *  caption='Convergence'
 *  additionalClasses = {{
 *    figure: ['max-width'],
 *    image: ['half-size'],
 *    caption: ['colr-gray'],
 *  }}
 * />
 *
 * @returns {JSX.Element} - Figure
 */
declare const Figure: ({ src, alt, caption, additionalClasses }: Readonly<FigurePropTypes>) => React$1.JSX.Element;

type InputTypesEnum = 'text' | 'password' | 'email' | 'tel' | 'number';
type InputAdditionalClassesPropTypes = {
    wrapper?: string[];
    label?: string[];
    inputWrapper?: string[];
    input?: string[];
    passwordButton?: string[];
    caption?: string[];
};
type InputPropTypes = {
    type: InputTypesEnum;
    value: string;
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    label?: string;
    caption?: string;
    placeholder?: string;
    showPassword?: boolean;
    disabled?: boolean;
    pattern?: string;
    size: GSizeEnum;
    additionalClasses?: InputAdditionalClassesPropTypes;
};

/**
 * Input component
 * @WARNING Be cautious when passing a pattern to the input as this value is exposed and can lead to a security breach
 *
 * @param {Object} props
 * @property {InputTypesEnum} props.type - Defines the input HTML tag type
 * @property {string} props.value - Defines input's value
 * @property {function} props.onChange - Function to be triggered when value is changed
 * @param {React.ChangeEvent<HTMLInputElement>} props.onChange.event
 * @property {function} [props.onKeyDown] - Function to be triggered when a specific key is pressed
 * @param {React.KeyboardEvent<HTMLInputElement>} props.onChange.event
 * @property {string} [props.label] - Determines the value of label and if it should be rendered
 * @property {string} [props.caption] - Determines the value of caption and if it should be rendered
 * @property {string} [props.placeholder] - Determines the value of placeholder and if it should be rendered
 * @property {boolean} [props.showPassword] - Determines the button type is text or password to hide its value. Also changes the icon rendered
 * @property {boolean} [props.disabled] - Defines the input background color and disable functions
 * @property {string} [props.pattern] - Determines the input's regex pattern
 * @note pattern will be accepted only if it's a valid RegEx
 * @property {GSizeEnum} props.size - Determines the label, input and caption font size, input padding, password button position
 * @property {InputAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
 * @property {string[]} [additionalClasses.wrapper] - CSS classes for input-wrapper div HTML tag
 * @property {string[]} [additionalClasses.label] - CSS classes for input-label label HTML tag
 * @property {string[]} [additionalClasses.inputWrapper] - CSS classes for input-input-wrapper div HTML tag
 * @property {string[]} [additionalClasses.input] - CSS classes for input-input input HTML tag
 * @property {string[]} [additionalClasses.passwordIcon] - CSS classes for input-password-icon button HTML tag
 * @property {string[]} [additionalClasses.caption] - CSS classes for input-caption p HTML tag
 *
 * @example
 * <Input
 *  type='password'
 *  value={inputValue}
 *  onChange={(event) => setInputValue(e.target.value)}
 *  onKeyPress={(event) => window.alert('Input Key pressed')}
 *  label='Password'
 *  caption='password must be 8 characters long'
 *  placeholder='Password'
 *  showPassword={true}
 *  disabled={false}
 *  pattern='^[a-zA-Z0-9]*$'
 *  size='medium'
 *  additionalClasses = {{
 *    wrapper: ['flex-justify-end'],
 *    label: ['large-font-size'],
 *    inputWrapper: ['gray-background'],
 *    input: ['half-width'],
 *    passwordButton: ['gray-color'],
 *    caption: ['medium-font-size'],
 *  }}
 * />
 *
 * @returns {JSX.Element} Input
 */
declare const Input: ({ type, value, onChange, onKeyDown, label, caption, placeholder, showPassword, disabled, pattern, size, additionalClasses }: Readonly<InputPropTypes>) => React$1.JSX.Element;

type ModalAdditionalClassesPropTypes = {
    wrapper?: string[];
    dialog?: string[];
};
type ModalPropTypes = {
    isOpen: boolean;
    children: React.ReactNode;
    additionalClasses?: ModalAdditionalClassesPropTypes;
};

/**
 * Modal component
 *
 * @param {ModalPropTypes} props
 * @property {boolean} props.isOpen - Determines if modal is visible to user
 * @property {ReactNode} children
 * @property {ModalAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
 * @property {string[]} [additionalClasses.wrapper] - CSS classes for modal-wrapper div HTML tag
 * @property {string[]} [additionalClasses.dialog] - CSS classes for modal-dialog dialog HTML tag
 * @example
 * <Modal
 *  isOpen={true}
 *  additionalClasses = {{
 *    wrapper: ['custom-background-color'],
 *    dialog: ['large-font-size']
 *   }}
 * >
 *  <p>Modal information</p>
 * </Modal>
 *
 * @returns {JSX.Element} Modal
 */
declare const Modal: ({ isOpen, children, additionalClasses }: ModalPropTypes) => JSX.Element;

type SelectAdditionalClassesPropTypes = {
    wrapper?: string[];
    label?: string[];
    inputWrapper?: string[];
    input?: string[];
    optionList?: string[];
    optionItem?: string[];
};
type ItemPropTypes = Record<string, any> & {
    label: string;
};
type SelectPropTypes = {
    label?: string;
    selected?: ItemPropTypes;
    placeholder?: string;
    options: ItemPropTypes[];
    onChange: (option: ItemPropTypes) => void;
    icon?: IconDefinition;
    disabled?: boolean;
    size: GSizeEnum;
    additionalClasses?: SelectAdditionalClassesPropTypes;
};

/**
 * Select component
 *
 * @param {SelectPropTypes} props
 * @property {string} [props.label] - Determines the value of label and if it should be rendered
 * @property {ItemPropTypes} [props.selected] - Determines the value shown in the input
 * @property {string} [props.placeholder] - Defines the input placeholder
 * @property {ItemPropTypes[]} props.options - List of options to be selected
 * @property {function} props.onChange - Function triggered when an option is clicked
 * @param {ItemPropTypes} props.onChange.option - option item clicked
 * @property {IconDefinition} [props.icon] - Font Awesome icon class
 * @property {boolean} [props.disabled] - Defines the input background color and disables the input wrapper function
 * @property {GSizeEnum} props.size - Defines label and input font size, input wrapper padding and option list gap an top position
 * @property {SelectAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
 * @property {string[]} [additionalClasses.wrapper] - CSS classes for select-wrapper div HTML tag
 * @property {string[]} [additionalClasses.label] - CSS classes for select-label label HTML tag
 * @property {string[]} [additionalClasses.inputWrapper] - CSS classes for select-input-wrapper div HTML tag
 * @property {string[]} [additionalClasses.input] - CSS classes for select-input input HTML tag
 * @property {string[]} [additionalClasses.optionList] - CSS classes for select-option-list ul HTML tag
 * @property {string[]} [additionalClasses.optionItem] - CSS classes for select-option-item li HTML tag
 * @example
 * <Select
 *  label='Country'
 *  selected={{
 *    id: 0,
 *    label: 'Canada',
 *    value: 'CA'
 *  }}
 *  placeholder='Select your address country'
 *  options={[
 *    {
 *      id: 0,
 *      label: 'Canada',
 *      value: 'CA'
 *    },
 *    {
 *      id: 1,
 *      label: 'Brazil',
 *      value: 'BR'
 *    },
 *    {
 *      id: 2,
 *      label: 'Italy',
 *      value: 'IT'
 *    }
 *  ]}
 *  onChange={(option) => window.alert(`${option} was selected`)}
 *  icon={faGlobe}
 *  disabled={true}
 *  size='large'
 *  additionalClasses={{
 *    wrapper: ['outline-3px'],
 *    label: ['large-font-size'],
 *    inputWrapper: ['half-width'],
 *    input: [],
 *    optionList: ['beige-background'],
 *    optionItem: ['blue-border']
 *  }}
 * />
 *
 * @returns {JSX.Element} Select
 */
declare const Select: ({ label, selected, placeholder, options, onChange, icon, disabled, size, additionalClasses }: Readonly<SelectPropTypes>) => JSX.Element;

type ListItemPropTypes = {
    id: string;
    label: string;
};
type SelectMultiAdditionalClassesPropTypes = {
    wrapper?: string[];
    label?: string[];
    input?: string[];
    placeholder?: string[];
    selectedItem?: string[];
    selectedList?: string[];
    optionItem?: string[];
    optionList?: string[];
};
type SelectMultiPropTypes = {
    options: ListItemPropTypes[];
    addOption: (value: ListItemPropTypes) => void;
    removeOption: (value: ListItemPropTypes) => void;
    label?: string;
    selected?: ListItemPropTypes[];
    disabled?: boolean;
    placeholder?: string;
    size: GSizeEnum;
    additionalClasses?: SelectMultiAdditionalClassesPropTypes;
};

/**
 * Select component
 *
 * @param {SelectPropTypes} props
 * @property {ListItemPropTypes[]} props.options - List of options to be selected
 * @property {function} props.addOption - Function triggered when an option item is clicked and it is not found in the selected array
 * @param {ListItemPropTypes} props.addOption.option - option item clicked
 * @property {function} props.removeOption - Function triggered when an option item is clicked and it is found in the selected array
 * @param {ListItemPropTypes} props.removeOption.option - option item clicked
 * @property {string} [props.label] - Determines the value of label and if it should be rendered
 * @property {ListItemPropTypes[]} [props.selected] - Determines the value shown in the input
 * @property {boolean} [props.disabled] - Defines the input background color and disables the input wrapper function
 * @property {string} [props.placeholder] - Determines the value of select-multi-placeholder p HTML tag and if it should be rendered
 * @property {GSizeEnum} props.size - Defines label, input and selected item font size, input, selected item, selected list, and option list gap and padding
 * @property {SelectAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tag
 * @property {string[]} [additionalClasses.wrapper] - CSS classes for select-multi-wrapper div HTML tag
 * @property {string[]} [additionalClasses.label] - CSS classes for select-multi-label label HTML tag
 * @property {string[]} [additionalClasses.input] - CSS classes for select-multi-select-list-wrapper div HTML tag
 * @property {string[]} [additionalClasses.placeholder] - CSS classes for select-multi-placeholder p HTML tag
 * @property {string[]} [additionalClasses.selectedList] - CSS classes for select-multi-selected-list div HTML tag
 * @property {string[]} [additionalClasses.selectedItem] - CSS classes for select-multi-selected-item div HTML tag
 * @property {string[]} [additionalClasses.optionList] - CSS classes for select-multi-options-list ul HTML tag
 * @property {string[]} [additionalClasses.optionItem] - CSS classes for select-multi-options-item li HTML tag
 * @example
 * <Select
 *  label='Countries'
 *  selected={[
 *    {
 *      id: 0,
 *      label: 'Canada',
 *      value: 'CA'
 *    },
 *    {
 *      id: 2,
 *      label: 'Italy',
 *      value: 'IT'
 *    }
 *  ]}
 *  placeholder='Select a few countries'
 *  options={[
 *    {
 *      id: 0,
 *      label: 'Canada',
 *      value: 'CA'
 *    },
 *    {
 *      id: 1,
 *      label: 'Brazil',
 *      value: 'BR'
 *    },
 *    {
 *      id: 2,
 *      label: 'Italy',
 *      value: 'IT'
 *    }
 *  ]}
 *  addOption={(option) => window.alert(`${option} was added`)}
 *  removeOption={(option) => window.alert(`${option} was removed`)}
 *  disabled={true}
 *  size='large'
 *  additionalClasses={{
 *    wrapper: ['outline-3px'],
 *    label: ['large-font-size'],
 *    input: [],
 *    placeholder: ['half-width'],
 *    selectedList: ['beige-background'],
 *    selectedItem: ['blue-border'],
 *    optionList: ['beige-background'],
 *    optionItem: ['blue-border']
 *  }}
 * />
 *
 * @returns {JSX.Element} SelectMulti
 */
declare const SelectMulti: ({ options, addOption, removeOption, label, selected, disabled, size, placeholder, additionalClasses }: SelectMultiPropTypes) => JSX.Element;

type SwitchPropTypes = {
    size: GSizeEnum;
    checked: boolean;
    handleClick: () => void;
    label?: string;
    disabled?: boolean;
    additionalClasses?: SwitchAdditionalClasses;
};
type SwitchAdditionalClasses = {
    wrapper?: string[];
    label?: string[];
    switchWrapper?: string[];
    input?: string[];
    span?: string[];
};

/**
 * Switch component
 * @param {SwitchPropTypes} props
 * @property {string} [props.label]
 * @property {GSizeEnum} props.size
 * @property {boolean} props.checked
 * @property {function} props.handleClick
 * @property {SwitchAdditionalClassesPropTypes} props.additionalClasses
 * @example
 * <Switch
 *   size='medium'
 *   checked={isChecked}
 *   handleClick={() => setIsChecked(!isChecked)}
 *   label='Switch component'
 *   disabled={isDataLoading}
 *   additionalClasses={
 *      wrapper: ['wrapper-additional-class'],
 *      label: ['label-additional-class'],
 *      switchwrapper: ['switchwrapper-additional-class'],
 *      input: ['input-additional-class'],
 *      span: ['span-additional-class'],
 *   }
 * />
 *
 * @returns {JSX.Element} Switch
 */
declare const Switch: ({ size, checked, handleClick, label, disabled, additionalClasses }: SwitchPropTypes) => JSX.Element;

type HeaderAdditionalClasses = {
    header?: string[];
    icon?: string[];
};
type HeaderPropTypes = {
    id: string;
    label: string;
    additionalClasses?: HeaderAdditionalClasses;
};

type DataPropTypes = Record<string, any> & {
    details?: any;
};
type RowAdditionalClassesPropTypes = {
    row?: string[];
    dataWrapper?: string[];
    data?: string[];
    details?: string[];
    iconWrapper?: string[];
};

type TableAdditionalClassesPropTypes = HeaderAdditionalClasses & RowAdditionalClassesPropTypes & {
    table?: string[];
    tableHead?: string[];
    headerRow?: string[];
    hiddenIconRep?: string[];
};
type TablePropTypes = {
    headers: HeaderPropTypes[];
    data: DataPropTypes[];
    onRowClick?: (row: DataPropTypes) => void;
    checkedArray: DataPropTypes[];
    details?: (row: DataPropTypes) => React.ReactNode;
    additionalClasses?: TableAdditionalClassesPropTypes;
};

/**
 * Table Row component
 *
 * @param {TablePropTypes} props
 * @property {HeaderPropTypes[]} headers - Determines what data should be rendered based on the header
 * @property {DataPropTypes[]} data - First-level table data information
 * @property {function} [onRowClick] - Function to retrieve row information
 * @param {DataPropTypes} onRowClick.row - Row clicked
 * @property {DataPropTypes[]} checkedArray - Determines which rows change a marked checkbox
 * @property {function} [details] - Function to render a ReactNode based on the row information
 * @param {DataPropTypes} details.row - Row clicked
 * @property {number} index - Determines if all rows have the marked checkbox
 * @property {TableAdditionalClassesPropTypes} [props.additionalClasses] - Object for additional css classes to each HTML tah
 * @property {string[]} [additionalClasses.header] - CSS classes for header-{id} th HTML tag
 * @property {string[]} [additionalClasses.row] - CSS classes for row tr HTML tag
 * @property {string[]} [additionalClasses.dataWrapper] - CSS classes for data wrapper td HTML tag
 * @property {string[]} [additionalClasses.data] - CSS classes for data div th HTML tag
 * @property {string[]} [additionalClasses.details] - CSS classes for details td HTML tag
 * @property {string[]} [additionalClasses.iconWrapper] - CSS classes for icon wrapper div th HTML tag
 * @property {string[]} [additionalClasses.table] - CSS classes for table HTML tag
 * @property {string[]} [additionalClasses.tableHead] - CSS classes for thead HTML tag
 * @property {string[]} [additionalClasses.headerRow] - CSS classes for tr HTML tag
 * @property {string[]} [additionalClasses.hiddenIconRep] - CSS classes for table header div HTML tag
 * @example
 * type TableRowType = Record<string, any> & {
 *  details?: any
 * }
 *
 * <Table
 *  headers={[
 *    {
 *      id: 'name',
 *      label: 'Name'
 *    },
 *    {
 *      id: 'rank',
 *      label: 'Rank'
 *    },
 *    {
 *      id: 'lightsaberColor',
 *      label: 'Lightsaber Color'
 *    },
 *  ]}
 *  data={[
 *    {
 *      name: 'Obi-wan',
 *      rank: 'Master',
 *      lightsaberColor: 'Blue',
 *      details: 'Anakin\'s master'
 *    },
 *    {
 *      name: 'Yoda',
 *      rank: 'Master',
 *      lightsaberColor: 'Green',
 *      details: 'Jedi Master'
 *    },
 *    {
 *      name: 'Anakin',
 *      rank: 'Master',
 *      lightsaberColor: 'Red',
 *      details: 'Luke\'s father'
 *     }
 *  ]}
 *  checkedArray={[]}
 *  onRowClick={(row: TableRowType) => console.log(row)}
 *  details={(row: TableRowType) => (
 *    <p>{row.details}</p>
 *  )}
 *  additionalClasses={{
 *    header: ['font-size-large'],
 *    row: ['gray-background'],
 *    dataWrapper: ['red-background'],
 *    data: ['large-font-size'],
 *    details: ['yellow-background'],
 *    iconWrapper: ['blue-border'],
 *    table: ['width-twice'],
 *    tableHead: ['light-gray-background'],
 *    headerRow: ['medium-padding'],
 *    hiddenIconRep: ['width-0']
 *  }}
 * />
 *
 * @returns {JSX.Element} - Table
 */
declare const Table: ({ headers, data, checkedArray, onRowClick, details, additionalClasses }: TablePropTypes) => React$1.JSX.Element;

type ToastUseCaseEnums = 'primary' | 'success' | 'alert' | 'warning';
type ToastAdditionalClassesPropTypes = {
    toast: string[];
};
type ToastComponentPropTypes = {
    id: string;
    useCase: ToastUseCaseEnums;
    isOpen: boolean;
    handleClose: React.MouseEventHandler<SVGSVGElement>;
    children: React.ReactNode;
    additionalClasses?: ToastAdditionalClassesPropTypes;
};

type ToastListComponentPropType = {
    toastList: ToastComponentPropTypes[];
    additionalClasses?: string[];
};

/**
 * Toast List component
 * @param {ToastListComponentPropType} props
 * @property {toastComponentPropTypes} props.toastList
 * @property {string[]} props.additionalClasses
 * @example
 * <ToastList
 *  toastList={[
 *    {
 *      id: 'success toast',
 *      isOpen: successToastOpen,
 *      handleClose: () => setSuccessToastOpen(false),
 *      useCase: 'success',
 *      children: <p>Success</p>,
 *    },
 *    {
 *      id: 'fail toast',
 *      isOpen: failToastOpen,
 *      handleClose: () => setFailToastOpen(false),
 *      useCase: 'fail',
 *      children: <p>Fail</p>,
 *    },
 *    {
 *      id: 'warning toast',
 *      isOpen: warningToastOpen,
 *      handleClose: () => setWarningToastOpen(false),
 *      useCase: 'warning',
 *      children: <p>Warning</p>,
 *    },
 *    {
 *      id: 'info toast',
 *      isOpen: infoToastOpen,
 *      handleClose: () => setInfoToastOpen(false),
 *      useCase: 'info',
 *      children: <p>Info</p>,
 *    },
 *  ]}
 * />
 * @returns {JSX.Element} ToastList
 */
declare const ToastList: ({ toastList, additionalClasses }: Readonly<ToastListComponentPropType>) => JSX.Element;

type UserAdditionalClassesPropTypes = {
    wrapper?: string[];
    avatar?: string[];
    initials?: string[];
    info?: string[];
    name?: string[];
    description?: string[];
};
type UserPropTypes = {
    profileImage?: string;
    firstName: string;
    lastName: string;
    description?: string;
    size: GSizeEnum;
    additionalClasses?: UserAdditionalClassesPropTypes;
};

/**
 * User component
 * @param {UserPropTypes} props
 * @property {string} [props.profileImage] - Url used as src for img HTML tag
 * @property {string} props.firstName - Determines initials value in case no image is provided
 * @property {string} props.lastName - Determines initials value in case no image is provided
 * @property {string} [props.description] - Determines the value for description an if it should be rendered
 * @property {GSizeEnum} props.size
 * @property {UserAdditionalClasses} [props.additionalClasses] - Option css classes
 * @property {string[]} [props.additionalClasses.wrapper] - CSS classes for wrapper div HTML tag
 * @property {string[]} [props.additionalClasses.avatar] - CSS classes for img HTML tag
 * @property {string[]} [props.additionalClasses.initials] - CSS classes for initials div HTML tag
 * @property {string[]} [props.additionalClasses.info] - CSS classe for indo div HTML tag
 * @property {string[]} [props.additionalClasses.name] = CSS classes for name p HTML tag
 * @property {string[]} [props.additionalClasses.description] - CSS classes for description p HTML tag
 * @example
 * <User
 *  size='large'
 *  profileImage:'path/to/image'
 *  firstName: 'John'
 *  lastName: 'Doe'
 *  description: 'johndoe@email.com'
 * />
 *
 * @returns {JSX.Element} User
 */
declare const User: ({ profileImage, firstName, lastName, description, size, additionalClasses }: UserPropTypes) => React$1.JSX.Element;

export { Button, Checkbox, Figure, IconButton, Input, Modal, Select, SelectMulti, Switch, Table, TextButton, ToastList, User };