code: function MediaInput({ wrapperProps = {}, start, end, ...props }) {
    const { getInputProps } = useFieldContext();
    const inputRef = useRef(undefined);
  
    const { onClick, ...otherWrapperProps } = wrapperProps;
  
    const onFauxInputClickHandler = composeEventHandlers(onClick, () => {
      inputRef.current && inputRef.current.focus();
    });
  
    return (
      <FauxInput
        data-garden-id="forms.media_input"
        data-garden-version={PACKAGE_VERSION}
        onClick={onFauxInputClickHandler}
        mediaLayout
        {...otherWrapperProps}
      >
        {start && <StyledTextMediaFigure>{start}</StyledTextMediaFigure>}
        <StyledTextMediaInput
          {...getInputProps({
            innerRef: inputRef,
            ...props
          })}
        />
        {end && <StyledTextMediaFigure>{end}</StyledTextMediaFigure>}
      </FauxInput>
    );
  }
docs: Accepts all `<input />` props.