import { jsx as _jsx } from "react/jsx-runtime";
import Box from '../box';
import { omitThemingProps, useStyleConfig, vui } from '../core';
import { cs } from '../utils';
/**
 * Displays static, partially interactive or fully interactive content, such as text, images or buttons.
 * Supports use cases like a single card or multiple tiles.
 */
export const Card = vui((props, ref) => {
    const { className, isInteractive = props.onClick !== undefined, ...rest } = omitThemingProps(props);
    const styles = useStyleConfig('Card', props);
    const interactiveProps = isInteractive
        ? {
            cursor: 'pointer',
            focusRing: 2,
            hoverRingColor: 'seaBlue.main',
            hoverShadow: '3',
            outline: 'none',
            tabIndex: 0,
            userSelect: 'none',
        }
        : {};
    return _jsx(Box, { className: cs('vui-card', className), ref: ref, ...styles, ...interactiveProps, ...rest });
});
Card.displayName = 'Card';
export default Card;
//# sourceMappingURL=card.js.map