import { default as React } from 'react';
import { TooltipProps } from '@mui/material';
interface EditableFieldProps {
    value: string;
    onChange?: (value: string) => void;
    onValueValidate?: (value: string) => void;
    editable?: boolean;
    disabled?: boolean;
    component?: 'input' | 'textarea';
    placeholder?: string;
    rows?: number;
    maxLength?: number;
    icon?: React.ReactNode;
    label?: string | React.ReactNode;
    children?: React.ReactNode;
    tooltip?: TooltipProps['title'];
    inline?: boolean;
    style?: React.CSSProperties;
    verified?: boolean;
    errorMsg?: string;
    canEdit?: boolean;
    hidePreview?: boolean;
    renderValue?: (value: string) => React.ReactNode;
}
/** only for sx */
export declare const commonInputStyle: {
    '.MuiOutlinedInput-root': {
        '&:hover': {
            fieldset: {
                borderColor: string;
            };
        };
        '&.Mui-focused': {
            fieldset: {
                borderColor: string;
            };
        };
    };
};
/** only for sx */
export declare const inputFieldStyle: {
    width: string;
    '& .MuiFormHelperText-root': {
        position: string;
        bottom: number;
        left: number;
        margin: number;
    };
    fieldset: {
        borderColor: string;
    };
};
declare function EditableField({ value, onChange, onValueValidate, errorMsg, editable, component, placeholder, rows, maxLength, icon, label, children, tooltip, inline, style, verified, canEdit, renderValue, disabled, hidePreview, }: EditableFieldProps): import("react/jsx-runtime").JSX.Element | null;
export default EditableField;
