@patreon/studio/module/components/Card/index.jsx

Patreon Studio Design System

'use client';
import cx from 'classnames';
import React from 'react';
import { useTokenModes } from '../TokenModeProvider';
import styles from './Card.module.css';
export function Card({ variant = 'default', elevation = 'subtle', padding = 'regular', fluidHeight, id, 'data-tag': dataTag, className, style, children, }) {
    const { currentColorMode } = useTokenModes();
    const clasList = cx(styles.root, {
        [styles.fluidHeight]: fluidHeight,
        [styles.paddingRegular]: padding === 'regular',
        [styles.paddingTight]: padding === 'tight',
        [styles.variantDefault]: variant === 'default',
        [styles.variantTransparent]: variant === 'transparent',
        [styles.elevationSubtle]: elevation === 'subtle',
        [styles.elevationLow]: elevation === 'low',
        [styles.elevationMid]: elevation === 'mid',
        [styles.colorModeLight]: currentColorMode === 'light',
        [styles.colorModeAuto]: currentColorMode === 'auto',
    }, className);
    return (<div className={clasList} style={style} id={id} data-tag={dataTag}>
      {children}
    </div>);
}
Card.Content = function CardContent({ padding = 'regular', className, style, children }) {
    const clasList = cx({
        [styles.paddingRegular]: padding === 'regular',
        [styles.paddingTight]: padding === 'tight',
    }, className);
    return (<div className={clasList} style={style}>
      {children}
    </div>);
};
//# sourceMappingURL=index.jsx.map