<commit_before>// @flow strict

import React, {
  type ElementType,
  type Node,
} from 'react';
import getNotDeclaredProps from 'react-get-not-declared-props';

import Sheet, { type Data } from './Sheet';

type Color = 'secondary' | 'primary' | 'hint' | 'disabled' | 'accent' | 'error' | 'text' | null;
type Props = {
  typography: string,
  children: Node,
  element: string,
  color: Color,
  className: string,
};

function Typography(props: Props) {
  const data: Data = {
    typography: props.typography,
    color: props.color,
  };
  const Element = props.element;

  return (
    <Sheet data={data}>
      {({ classes }) => (
        <Element
          className={`${classes.typography} ${props.className}`}
          {...getNotDeclaredProps(props, Typography)}
        >
          {props.children}
        </Element>
      )}
    </Sheet>
  );
}

Typography.propTypes = {};

Typography.defaultProps = {
  element: 'span',
  className: '',
  color: null,
};

export type { Color };

export default Typography;
<commit_msg>Reverted to allowing ElementType for the Typography component<commit_after>// @flow strict

import React, {
  type ElementType,
  type Node,
} from 'react';
import getNotDeclaredProps from 'react-get-not-declared-props';

import Sheet, { type Data } from './Sheet';

type Color = 'secondary' | 'primary' | 'hint' | 'disabled' | 'accent' | 'error' | 'text' | null;
type Props = {
  typography: string,
  children: Node,
  element: ElementType,
  color: Color,
  className: string,
};

function Typography(props: Props) {
  const data: Data = {
    typography: props.typography,
    color: props.color,
  };
  const Element = props.element;

  return (
    <Sheet data={data}>
      {({ classes }) => (
        <Element
          className={`${classes.typography} ${props.className}`}
          {...getNotDeclaredProps(props, Typography)}
        >
          {props.children}
        </Element>
      )}
    </Sheet>
  );
}

Typography.propTypes = {};

Typography.defaultProps = {
  element: 'span',
  className: '',
  color: null,
};

export type { Color };

export default Typography;

{'fraction_non_alphanumeric': 0.1502125649504015, 'fraction_numerical': 0.0, 'mean_word_length': 3.0113636363636362, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2345146', 'n_tokens_mistral': 679, 'n_tokens_neox': 674, 'n_words': 169}