next

.design-sync/ds-src/Text.tsx

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { cx } from './cx';
+
+export interface TextProps {
+  size?: 'body' | 'small';
+  /** Secondary text and metadata. */
+  muted?: boolean;
+  /** Caps the line at a readable measure. Use it on every paragraph. */
+  measure?: boolean;
+  as?: 'p' | 'span' | 'div';
+  children?: ReactNode;
+}
+
+/** Body copy and metadata. Short declarative sentences, with a full stop. */
+export function Text({ size = 'body', muted, measure, as: Tag = 'p', children }: TextProps) {
+  return (
+    <Tag className={cx(size === 'small' ? 'small' : 'body', muted && 'muted', measure && 'measure')}>{children}</Tag>
+  );
+}