<commit_before>import { Box, Flex, Serif } from "@artsy/palette"
import React from "react"
import { createRefetchContainer, graphql, RelayRefetchProp } from "react-relay"

import { SystemContextProps, useSystemContext } from "Artsy"
import { renderWithLoadProgress } from "Artsy/Relay/renderWithLoadProgress"
import { SystemQueryRenderer as QueryRenderer } from "Artsy/Relay/SystemQueryRenderer"

import { AppSecondFactorFragmentContainer as AppSecondFactor } from "./Components/AppSecondFactor"
import { BackupSecondFactorFragmentContainer as BackupSecondFactor } from "./Components/BackupSecondFactor"
import { SmsSecondFactorFragmentContainer as SmsSecondFactor } from "./Components/SmsSecondFactor"

import { TwoFactorAuthentication_me } from "__generated__/TwoFactorAuthentication_me.graphql"
import { TwoFactorAuthenticationQuery } from "__generated__/TwoFactorAuthenticationQuery.graphql"

export interface TwoFactorAuthenticationProps extends SystemContextProps {
  me: TwoFactorAuthentication_me
  relay: RelayRefetchProp
}

const TwoFactorAuthentication: React.FC<TwoFactorAuthenticationProps> = props => {
  const { me, relay } = props

  return (
    <Box>
      <Flex flexDirection="row" alignItems="flex-end">
        <Serif size="6" color="black100">
          Two-factor Authentication
        </Serif>
        {me.hasSecondFactorEnabled && (
          <Serif ml={1} size="4" color="green100">
            Enabled
          </Serif>
        )}
      </Flex>
      <Serif mt={1} size="3t" maxWidth="515px" color="black60">
        Set up an additional layer of security by requiring a security code in
        addition to your password to log in to your Artsy account.
      </Serif>
      <AppSecondFactor mt={3} me={me} relayRefetch={relay} />
      <SmsSecondFactor mt={2} me={me} relayRefetch={relay} />
      {me.hasSecondFactorEnabled && <BackupSecondFactor mt={2} me={me} />}
    </Box>
  )<commit_msg>Update "Enabled" typography to Sans style<commit_after>import { Box, Flex, Serif, Sans } from "@artsy/palette"
import React from "react"
import { createRefetchContainer, graphql, RelayRefetchProp } from "react-relay"

import { SystemContextProps, useSystemContext } from "Artsy"
import { renderWithLoadProgress } from "Artsy/Relay/renderWithLoadProgress"
import { SystemQueryRenderer as QueryRenderer } from "Artsy/Relay/SystemQueryRenderer"

import { AppSecondFactorFragmentContainer as AppSecondFactor } from "./Components/AppSecondFactor"
import { BackupSecondFactorFragmentContainer as BackupSecondFactor } from "./Components/BackupSecondFactor"
import { SmsSecondFactorFragmentContainer as SmsSecondFactor } from "./Components/SmsSecondFactor"

import { TwoFactorAuthentication_me } from "__generated__/TwoFactorAuthentication_me.graphql"
import { TwoFactorAuthenticationQuery } from "__generated__/TwoFactorAuthenticationQuery.graphql"

export interface TwoFactorAuthenticationProps extends SystemContextProps {
  me: TwoFactorAuthentication_me
  relay: RelayRefetchProp
}

const TwoFactorAuthentication: React.FC<TwoFactorAuthenticationProps> = props => {
  const { me, relay } = props

  return (
    <Box>
      <Flex flexDirection="row" alignItems="flex-end">
        <Serif size="6" color="black100">
          Two-factor Authentication
        </Serif>
        {me.hasSecondFactorEnabled && (
          <Sans ml={1} size="4" color="green100">
            Enabled
          </Sans>
        )}
      </Flex>
      <Serif mt={1} size="3t" maxWidth="515px" color="black60">
        Set up an additional layer of security by requiring a security code in
        addition to your password to log in to your Artsy account.
      </Serif>
      <AppSecondFactor mt={3} me={me} relayRefetch={relay} />
      <SmsSecondFactor mt={2} me={me} relayRefetch={relay} />
      {me.hasSecondFactorEnabled && <BackupSecondFactor mt={2} me={me} />}
    </Box>
  )
{'fraction_non_alphanumeric': 0.10077319587628866, 'fraction_numerical': 0.00979381443298969, 'mean_word_length': 4.323731138545953, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 33, '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': '2559393', 'n_tokens_mistral': 1103, 'n_tokens_neox': 1077, 'n_words': 278}