(match-media): useBreakpointIndex defaultIndex option doesn't allow you to select the largest breakpoint

[Toddish]

Describe the bug
You can't specify the largest breakpoint as the defaultIndex in useBreakpointIndex when using ssr.

To Reproduce
Steps to reproduce the behavior:

1. Create a new app using the base theme
2. Import @theme-ui/match-media
3. Create a component that uses useBreakpointIndex, setting the defaultIndex to 3
4. Render the component using ssr

Expected behavior
useBreakpointIndex by default returns 0-3, because it gets the length of how many breakpoints it matches (of which there are three by default). I expect to be able to pass the max breakpoint index (3) as the default.

Additional context
There's a check for if the defaultIndex passed is < 0 || > breakpoints.length - 1, but really you're not passing in the actual breakpoint index you want, but the number of breakpoints the screen currently matches:

return breakpoints.filter(
  breakpoint =>
  window.matchMedia(`screen and (min-width: ${breakpoint})`).matches
).length

Which produces 0-3.

[atanasster]

@Toddish thanks for the report - makes sense. Although naming it useBreakpointIndex seems a bit counter-intuitive to me - if its called index it should be up to length -1 imho. And where its used inuseResponsiveValue, the returned index is subtracted by 1 since its not actually an index : return array[index >= array.length ? array.length - 1 : index]

What do you think, would you like to submit a PR?