hunk.code_window:   };
   });
   export const StyledShortcut = styled('div')(({ theme }) => {
     return {
       color: theme.colors.placeHolderColor,
       fontSize: theme.font.sm,
       whiteSpace: 'nowrap',
     };
   });
  
hunk.labels: keep keep keep keep keep replace keep keep keep
hunk.after_edit:     fontSize: theme.font.base,
  
hunk.file_path: packages/app/src/components/quick-search/style.ts
hunk.type: replace
file: import {
    InputHTMLAttributes,
    useEffect,
    useState,
    FocusEventHandler,
    KeyboardEventHandler,
  } from 'react';
  import { StyledInput } from './style';
  
  type inputProps = {
    value?: string;
    placeholder?: string;
    disabled?: boolean;
    width?: number;
    height?: number;
    maxLength?: number;
    minLength?: number;
    onChange?: (value: string) => void;
    onBlur?: FocusEventHandler<HTMLInputElement>;
    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
  };
  
  export const Input = (props: inputProps) => {
    const {
      disabled,
      value: valueProp,
      placeholder,
      maxLength,
      minLength,
      height,
      width = 260,
      onChange,
      onBlur,
      onKeyDown,
    } = props;
    const [value, setValue] = useState<string>(valueProp || '');
    const handleChange: InputHTMLAttributes<HTMLInputElement>['onChange'] = e => {
      if (
        (maxLength && e.target.value.length > maxLength) ||
        (minLength && e.target.value.length < minLength)
      ) {
        return;
      }
      setValue(e.target.value);
      onChange && onChange(e.target.value);
    };
    const handleBlur: InputHTMLAttributes<HTMLInputElement>['onBlur'] = e => {
      onBlur && onBlur(e);
    };
    const handleKeyDown: InputHTMLAttributes<HTMLInputElement>['onKeyDown'] =
      e => {
        onKeyDown && onKeyDown(e);
      };
    useEffect(() => {
      setValue(valueProp || '');
    }, [valueProp]);
    return (
      <StyledInput
        value={value}
        disabled={disabled}
        placeholder={placeholder}
        width={width}
        maxLength={maxLength}
        minLength={minLength}
        onChange={handleChange}
        onBlur={handleBlur}
        onKeyDown={handleKeyDown}
        height={height}
      ></StyledInput>
    );
  };
  