Support Breakpoints in sizes Prop

Currently, the sizes prop accepts only a single value (e.g., string or number). It would be useful to allow responsive breakpoints where users can define different sizes based on screen widths.

**Motivation & Use Case:**

- This would improve responsiveness by allowing different sizes for different screen widths.
- Many UI libraries (e.g., Chakra UI, Tailwind CSS) support responsive props via objects, and adding this would enhance flexibility.
- Right now, users have to manually handle media queries, which isn't efficient.

**Proposed Solution:**
Modify the sizes prop to support both a number and an object for breakpoints, like this:
`
`

- If an object is passed, the component should use breakpoints internally.
- If a string or number is passed, it should behave as it does now.

**Alternatives Considered:**

- Using CSS media queries manually, but this makes the code more complex.
- Wrapping the component to handle breakpoints externally.

If maintainers approve, I'm happy to contribute to this feature!
Would love feedback on preferred implementation details. 😊