message: docs(input): update docs for focus and error border color
diff: @@ -122,15 +122,30 @@ function Example() {
  }
  ```
  -### Focus border color
  +### Changing the focus and error border colors
  -You can change the border color that shows when the input receives focus.
  +You can change the border color that shows when the input receives focus
  +(`focusBorderColor`) and when `isInvalid` is set to `true` (`errorBorderColor`).
  +The value can be set to a color in the theme object, like `teal.400` or a raw
  +CSS value.
  ```jsx
  <Stack spacing={3}>
  - <Input focusBorderColor="green" placeholder="Here is a sample placeholder" />
  - <Input focusBorderColor="pink" placeholder="Here is a sample placeholder" />
  - <Input focusBorderColor="teal" placeholder="Here is a sample placeholder" />
  + <Input focusBorderColor="lime" placeholder="Here is a sample placeholder" />
  + <Input
  + focusBorderColor="pink.400"
  + placeholder="Here is a sample placeholder"
  + />
  + <Input
  + isInvalid
  + errorBorderColor="red.300"
  + placeholder="Here is a sample placeholder"
  + />
  + <Input
  + isInvalid
  + errorBorderColor="crimson"
  + placeholder="Here is a sample placeholder"
  + />
  </Stack>
  ```
  @@ -141,7 +156,7 @@ The Input component composes [PseudoBox](/pseudobox) so you can pass all
  | Name | Type | Default | Description |
  | ------------------ | ------------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
  -| `as` | `React.ElementType` | | The component to use in place of `input`. |
  +| `as` | `React.ElementType` | `input` | The component to use in place of `input`. |
  | `aria-label` | `string` | | Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers. |
  | `aria-describedby` | `string` | | Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers. |
  | `isDisabled` | `boolean` | `false` | If `true`, the input will be disabled. This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop. |
  @@ -151,4 +166,5 @@ The Input component composes [PseudoBox](/pseudobox) so you can pass all
  | `isReadOnly` | `boolean` | `false` | If `true`, prevents the value of the input from being edited. |
  | `size` | `sm`, `md`, `lg` | `md` | The visual size of the `input` element. |
  | `variant` | `outline`, `unstyled`, `flushed`, `filled` | `outline` | The variant of the input style to use. |
  -| `focusBorderColor` | `string` | | The border color when the input is focused. Use color keys in `theme.colors` e.g `_focusBorderColor = "blue"` |
  +| `focusBorderColor` | `string` | | The border color when the input is focused. |
  +| `errorBorderColor` | `string` | | The border color when `isInvalid` is set to `true`. |
  