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

Patreon Studio Design System

import cx from 'classnames';
import React from 'react';
import { BodyText } from '~/components/BodyText';
import { HeadingText } from '~/components/HeadingText';
import styles from './Chip.module.css';
const sizeClassNames = {
    default: styles.sizeDefault,
    sm: styles.sizeSm,
};
const variantClassNames = {
    primary: styles.variantPrimary,
    secondary: styles.variantSecondary,
    tertiary: styles.variantTertiary,
    insetBlack: styles.variantInsetBlack,
    insetWhite: styles.variantInsetWhite,
    warning: styles.variantWarning,
    critical: styles.variantCritical,
    live: styles.variantLive,
    liveSubtle: styles.variantLiveSubtle,
    success: styles.variantSuccess,
    rich: styles.variantRich,
};
export function Chip({ variant = 'secondary', size = 'default', icon, id, 'data-tag': dataTag = 'chip-container', className, style, children, }) {
    const Icon = icon;
    const classList = cx(styles.root, sizeClassNames[size], variantClassNames[variant], className);
    return (<div className={classList} style={style} id={id} data-tag={dataTag}>
      {Icon && <Icon size="16px" color="currentColor" data-tag="chip-icon" className={styles.icon}/>}

      {size === 'sm' ? (<BodyText as="span" size="xs" color="inherit">
          {children}
        </BodyText>) : (<HeadingText as="span" size="sm" color="inherit">
          {children}
        </HeadingText>)}
    </div>);
}
//# sourceMappingURL=index.jsx.map