Field

  () => {
    const [value, setValue] = useState('');
    const style = `
      .inputExample {
        appearance: none;
        font: inherit;
        color: inherit;
        width: 100%;
        padding-inline: var(--grn-field-paddingX);
        border: 1px solid var(--grn-field-border-color);
        height: var(--grn-textbox-height-m);
        border-radius: var(--grn-textbox-radius-m);
        transition: var(--grn-transition-leave);
      }
      .inputExample::placeholder {
        color: var(--grn-field-placeholder-color);
      }
      .inputExample:hover {
        border-color: var(--grn-field-border-color-hover);
        transition: var(--grn-transition-hover);
      }
      .inputExample:focus {
        border-color: var(--grn-field-border-color-focus);
        transition: var(--grn-transition-active);
        outline: none;
      }
    `;
    return (
      <>
        <style>{style}</style>
        <input
          type="text"
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="Placeholder"
          className="inputExample"
        />
      </>
    )}
    

    <FieldLabel>FieldLabel</FieldLabel>

    <FieldHint>FieldHint</FieldHint>

    <InputField />

    <FieldClearButton />