/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.108.1
 * Released under the MIT license.
 */

import { jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef } from 'react';
import { CONTAINER_STYLES, Element, extractStyles, filterBaseProps, } from '../../../tasty/index.js';
const DEFAULT_STYLES = {
    display: 'grid',
    gap: '1x',
    flow: 'row',
    fill: '#purple',
    color: '#white',
    radius: 'round',
    placeContent: 'center',
    width: '$avatar-size $avatar-size $avatar-size',
    height: '$avatar-size $avatar-size $avatar-size',
    fontSize: 'calc($avatar-size / 2)',
    lineHeight: 'calc($avatar-size / 2)',
    fontWeight: 500,
};
export const Avatar = forwardRef(function Avatar({ size = '4x', icon, children, ...props }, ref) {
    const styles = extractStyles(props, CONTAINER_STYLES, {
        ...DEFAULT_STYLES,
        '--avatar-size': size,
    });
    return (_jsxs(Element, { ...filterBaseProps(props, { eventProps: true }), ref: ref, styles: styles, "data-theme": "special", children: [icon, children] }));
});

        