import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { Avatar } from '../avatar';
import { Box } from '../box';
import { styled, useStyleConfig, vui } from '../core';
import { Icon } from '../icon';
import { cs } from '../utils';
import { avatarStyles, iconDictionary, spacingDictionary } from './consts';
export const MessageBase = styled.divBox `
  transition-duration: fast;
`;
/** Displays a simple message text. */
export const Message = vui((props, ref) => {
    const { avatar, children, className, text, size = 'md', variant = 'info', ...rest } = props;
    const styles = useStyleConfig('Message', props);
    return (_jsx(MessageBase, { className: cs('vui-message', className), ref: ref, ...styles, ...rest, children: _jsxs(_Fragment, { children: [avatar ? (_jsx(Avatar, { mr: "16px", ...avatar })) : (_jsx(Icon, { mr: `${spacingDictionary[size]}px`, name: iconDictionary[variant], size: styles.iconSize })), _jsx(Box, { size: styles.fontSize, w: "100%", ...(avatar ? avatarStyles : undefined), children: children ?? text })] }) }));
});
Message.displayName = 'Message';
export default Message;
//# sourceMappingURL=message.js.map