Text field error spacing

[mollykreis]

Pull Request

🤨 Rationale

Fixes #2090

There are a few problems with the spacing in the text field:

1. The spacing between the error icon and the right edge of the component is 8px rather than 4px.
2. The spacing between the "parts" of the component is 8px rather than 4px. This is spacing such as the inner input to the error icon, the inner input to the action slot buttons, and the error icon to the action slot buttons.
3. The spacing between the right edge of the component and the content within the component (error icon, action slot buttons, or right edge of the inner input) is measured from the border rather than including the border.
4. The spacing between the left edge of the component and the start slot icon is 8px rather than 4px.
5. The spacing between the left edge of the component and the content within the component (start slot icon or left edge of the inner input).

This PR addresses problems 1 & 2 above, but it does not address problems 3-5 because these should be addressed across all components (select, combobox, number field, etc) in order to avoid creating misalignments of text across components. Therefore, I created #2400.

👩‍💻 Implementation

• Updated the gap used in the text-field to be small padding (4px) rather than medium padding (8px), which addressed problems 1 & 2.
  • In order to keep the input 8px from the left side of the text field, with the new 4px gap, I also added 4px to the left padding of the .root element.
  • Similarly, I added a 4px margin on the right of the slotted start icon to keep the icon 8px from the input.

🧪 Testing

• Manually tested in storybook
• Inspected the chromatic diffs

✅ Checklist

• I have updated the project documentation to reflect my changes or determined no changes are needed.

[mollykreis]

@m-akinc, can you buddy this PR for me?