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

Patreon Studio Design System

import cx from 'classnames';
import React from 'react';
import styled from 'styled-components';
import { classNameForDataBodyText } from '../../styles/classNameForDataBodyText';
import { classNameForDataDisplayText } from '../../styles/classNameForDataDisplayText';
import { classNameForDataHeadingText } from '../../styles/classNameForDataHeadingText';
import { classNameForTextColor } from '../../styles/classNameForTextColor';
import { classNameForTextLayout } from '../../styles/classNameForTextLayout';
import { tokens } from '../../tokens';
import styles from './DataText.module.css';
export const DataText = ({ as = 'p', variant, size, weight, color = tokens.global.content.regular.default, align, ellipsis, className, style, children, id, 'data-tag': dataTag, ...props }) => {
    const Component = as;
    const classList = cx(styles.root, variant === 'display' && classNameForDataDisplayText({ size, weight }), variant === 'heading' && classNameForDataHeadingText({ size, weight }), variant === 'body' && classNameForDataBodyText({ size, weight }), classNameForTextColor({ color }), classNameForTextLayout({ align, ellipsis }), className);
    return (<Component className={classList} style={style} id={id} data-tag={dataTag} {...props}>
      {children}
    </Component>);
};
/** @deprecated use `DataText` with `className` and css modules instead. */
export const DataTextWithCss = styled(DataText) `
  && {
    ${({ css }) => css};
  }
`;
//# sourceMappingURL=index.jsx.map