<commit_before>import { Box, Flex } from 'grid-styled';
import SearchIcon from './SearchIcon';

const SearchInputContainer = Flex.extend`
  border: solid 1px var(--silver-four);
  border-radius: 20px;
`;

const SearchInput = Box.extend`
  && {
    background-color: transparent;
    border: none;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
  }
`;

const SearchButton = Flex.extend`
  && {
    appearance: none;
    background-color: transparent;
    border: none;
  }
`;

const SearchForm = () => (
  <form action="/search" method="GET">
    <SearchInputContainer
      alignItems="center"
      justifyContent="space-between"
      p={1}
    >
      <SearchInput 
        is="input"
        type="search" 
        name="q" 
        placeholder="Search Open Collective" 
        py={1} 
        pl={3}
        width={1}
      />
      <SearchButton is="button" mr={1} p={1}>
        <SearchIcon size={16} fill="#aaaaaa" />
      </SearchButton>
    </SearchInputContainer>
  </form>
);

export default SearchForm;<commit_msg>allow to specify fontSize when using the SearchForm component<commit_after>import { Box, Flex } from 'grid-styled';
import SearchIcon from './SearchIcon';
import { fontSize } from 'styled-system';
import styled from 'styled-components';

const SearchInputContainer = Flex.extend`
  border: solid 1px var(--silver-four);
  border-radius: 20px;
`;

const SearchInput = styled(Box)`
  && {
    background-color: transparent;
    border: none;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    ${fontSize}
  }
`;

const SearchButton = Flex.extend`
  && {
    appearance: none;
    background-color: transparent;
    border: none;
  }
`;

const SearchForm = ({ fontSize }) => (
  <form action="/search" method="GET">
    <SearchInputContainer
      alignItems="center"
      justifyContent="space-between"
      p={1}
    >
      <SearchInput 
        is="input"
        type="search" 
        name="q" 
        placeholder="Search Open Collective" 
        py={1} 
        pl={3}
        width={1}
        fontSize={fontSize}
      />
      <SearchButton is="button" mr={1} p={1}>
        <SearchIcon size={16} fill="#aaaaaa" />
      </SearchButton>
    </SearchInputContainer>
  </form>
);

export default SearchForm;
{'fraction_non_alphanumeric': 0.14336440301819794, 'fraction_numerical': 0.013315579227696404, 'mean_word_length': 2.7072368421052633, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 21, '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': '3717586', 'n_tokens_mistral': 740, 'n_tokens_neox': 712, 'n_words': 158}