Breakpoints docs are confusing or incorrect?

[adbutterfield]

I was looking at the docs here: https://panda-css.com/docs/customization/theme#breakpoints

One of my engineers set the breakpoints in our preset with sm: 0px because in the docs it says each breakpoint is set with a media query using min-width. We ended up not having any small size styles...

Since the responsiveness is handled mobile first, there isn't any media query for small actually. The sm value - 1 is the effective max-width.

Seems like it would be nice to do one of the following:

• Update the docs to be more accurate.
• Change so we're setting the max-width for each breakpoint (breaking change).
• Remove the option to set sm, and only md and up, and set the value provided to the min-width of the media query for that breakpoint (breaking change).

I kind of like the last option the best, because it's mobile first and a small media query isn't necessary with the min-width approach.

Or maybe I'm the only one who finds this confusing?

[adbutterfield]

Thinking about it more...
I guess currently it's like there's an implicit xs size below the small media query which handles the "base" case?

[adbutterfield]

After working on this a bit more. We have to keep the sm: '0px' breakpoint. We have some rules that use smOnly that aren't easy/don't make sense to be mobile first with overrides for medium and up.

And I figured out a workaround for using array syntax. We have to do like fontSize={[null, 'xLarge', 'x2Large', 'x3Large']}. I feel like this is going to be confusing for consumers.