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

Patreon Studio Design System

import cx from 'classnames';
import React from 'react';
import styles from './Areas.module.css';
export const WideContent = React.forwardRef(function WideContent({ className, style, children, id, 'data-tag': dataTag }, ref) {
    const classList = cx(styles.sharedContent, styles.wideContent, className);
    return (<div ref={ref} className={classList} style={style} id={id} data-tag={dataTag}>
      {children}
    </div>);
});
export function NarrowContent({ className, style, children, id, 'data-tag': dataTag, }) {
    const classList = cx(styles.sharedContent, styles.narrowContent, className);
    return (<div className={classList} style={style} id={id} data-tag={dataTag}>
      {children}
    </div>);
}
export function MiniContent({ className, style, children, id, 'data-tag': dataTag, }) {
    const classList = cx(styles.sharedContent, styles.miniContent, className);
    return (<div className={classList} style={style} id={id} data-tag={dataTag}>
      {children}
    </div>);
}
export const FluidContent = React.forwardRef(function FluidContent({ className, style, children, id, 'data-tag': dataTag }, ref) {
    const classList = cx(styles.sharedContent, className);
    return (<div ref={ref} className={classList} style={style} id={id} data-tag={dataTag}>
      {children}
    </div>);
});
export function TwoColumnArea({ className, style, children, id, 'data-tag': dataTag, }) {
    const classList = cx(styles.sharedArea, styles.twoColumnArea, className);
    return (<div className={classList} style={style} id={id} data-tag={dataTag}>
      {children}
    </div>);
}
export function ThreeColumnArea({ className, style, children, id, 'data-tag': dataTag, }) {
    const classList = cx(styles.sharedArea, styles.threeColumnArea, className);
    return (<div className={classList} style={style} id={id} data-tag={dataTag}>
      {children}
    </div>);
}
export function AreaSpan({ span = 2, className, style, children, id, 'data-tag': dataTag, }) {
    const classList = cx(styles.sharedAreaSpan, {
        [styles.areaSpanOne]: span === 1,
        [styles.areaSpanTwo]: span === 2,
        [styles.areaSpanThree]: span === 3,
    }, className);
    return (<div className={classList} style={style} id={id} data-tag={dataTag}>
      {children}
    </div>);
}
//# sourceMappingURL=index.jsx.map