<commit_before>// @flow
import React, { type ElementRef } from 'react';
import AutosizeInput from 'react-input-autosize';

import { spacing } from '../theme';
import { Div } from '../primitives';

import type { PropsWithStyles } from '../types';

export type InputProps = PropsWithStyles & {
  cx: string => string | void,
  /** Reference to the internal element */
  innerRef: (ElementRef<*>) => void,
  /** Set whether the input should be visible. Does not affect input size. */
  isHidden: boolean,
  /** Whether the input is disabled */
  isDisabled?: boolean,
};

export const css = ({ isDisabled }: InputProps) => ({
  margin: spacing.baseUnit / 2,
  paddingBottom: spacing.baseUnit / 2,
  paddingTop: spacing.baseUnit / 2,
  visibility: isDisabled ? 'hidden' : 'visible',
});
const inputStyle = isHidden => ({
  background: 0,
  border: 0,
  fontSize: 'inherit',
  opacity: isHidden ? 0 : 1,
  outline: 0,
  padding: 0,
});

const Input = ({
  cx,
  getStyles,
  innerRef,
  isHidden,
  isDisabled,
  ...props
}: InputProps) => (
  <Div css={getStyles('input', props)}>
    <AutosizeInput
      className={cx('input')}
      inputRef={innerRef}
      inputStyle={inputStyle(isHidden)}
      disabled={isDisabled}<commit_msg>Add ability to change input color<commit_after>// @flow
import React, { type ElementRef } from 'react';
import AutosizeInput from 'react-input-autosize';

import { colors, spacing } from '../theme';
import { Div } from '../primitives';

import type { PropsWithStyles } from '../types';

export type InputProps = PropsWithStyles & {
  cx: string => string | void,
  /** Reference to the internal element */
  innerRef: (ElementRef<*>) => void,
  /** Set whether the input should be visible. Does not affect input size. */
  isHidden: boolean,
  /** Whether the input is disabled */
  isDisabled?: boolean,
};

export const css = ({ isDisabled }: InputProps) => ({
  margin: spacing.baseUnit / 2,
  paddingBottom: spacing.baseUnit / 2,
  paddingTop: spacing.baseUnit / 2,
  visibility: isDisabled ? 'hidden' : 'visible',
  color: colors.text,
});
const inputStyle = isHidden => ({
  background: 0,
  border: 0,
  fontSize: 'inherit',
  opacity: isHidden ? 0 : 1,
  outline: 0,
  padding: 0,
  color: 'inherit',
});

const Input = ({
  cx,
  getStyles,
  innerRef,
  isHidden,
  isDisabled,
  ...props
}: InputProps) => (
  <Div css={getStyles('input', props)}>
    <AutosizeInput
      className={cx('input')}
      inputRef={innerRef}
      inputStyle={inputStyle(isHidden)}
      disabled={isDisabled}
{'fraction_non_alphanumeric': 0.14928909952606634, 'fraction_numerical': 0.0071090047393364926, 'mean_word_length': 3.6054545454545455, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 17, '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': '2724238', 'n_tokens_mistral': 813, 'n_tokens_neox': 793, 'n_words': 237}